Flex AdvancedDataGrid 列分组功能

最新推荐文章于 2020-03-27 16:20:42 发布

原创最新推荐文章于 2020-03-27 16:20:42 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #AdvanceDataGrid #列分组

Flex 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何在ADG应用中通过列分组功能，将父子地址信息合并显示，避免重复地址信息的展示，提升用户体验。

问题：

在ADG的数据源的顶层数据有两列数据显示某人的家庭地址和工作地址，但是这位同志的儿子在家上班（或者说家庭地址和工作地址一样），我们不希望在两列显示相同的地址，而是让地址跨两列显示。

解决方案：

使用ADG的特殊功能（列分组），把列相同的合并为一组显示，而不是在每列显示相同的数据。

1、未分组前

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.HierarchicalData;
			import mx.events.FlexEvent;
			
			//children为array，指出DataGrid的层级关系
			public var dp:ArrayCollection = new ArrayCollection([
				{name:"jobs",sex:"man",homeAddress:"New jersey",workAddress:"Nevada",email:"jobs@gmail.com"}
				,{name:"marry",sex:"woman",homeAddress:"Mississippi",workAddress:"Montana",email:"marry@gmail.com"}
			]);
			
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
			
				var childrens:Array = new Array();
				childrens.push({name:"tom",homeAddress:"Indiana",sex:"man",email:"tom@gmail.com"});
				dp.getItemAt(0).children = childrens;   //children 指定层级关系
				
				childrens = new Array();
				childrens.push({name:"laly",homeAddress:"Indiana",sex:"woman",email:"laly@gmail.com"});
				dp.getItemAt(1).children = childrens;
				
				var fd:HierarchicalData = new HierarchicalData;
				fd.source = dp;
				dd.dataProvider = fd;
				
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<mx:AdvancedDataGrid id="dd" width="100%" height="100%">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="name" headerText="姓名" />
			<mx:AdvancedDataGridColumn dataField="sex" headerText="性别" />
			<mx:AdvancedDataGridColumn dataField="homeAddress" headerText="家庭地址"  id="address"/>
			<mx:AdvancedDataGridColumn dataField="workAddress" headerText="工作地址" />
			<mx:AdvancedDataGridColumn dataField="email" headerText="邮箱" />
		</mx:columns>
	</mx:AdvancedDataGrid>
</s:Application>

显示效果:

2、列分组后

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.HierarchicalData;
			import mx.events.FlexEvent;
			
			//children为array，指出DataGrid的层级关系
			public var dp:ArrayCollection = new ArrayCollection([
				{name:"jobs",sex:"man",homeAddress:"New jersey",workAddress:"Nevada",email:"jobs@gmail.com"}
				,{name:"marry",sex:"woman",homeAddress:"Mississippi",workAddress:"Montana",email:"marry@gmail.com"}
			]);
			
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
			
				var childrens:Array = new Array();
				childrens.push({name:"tom",homeAddress:"Indiana",sex:"man",email:"tom@gmail.com"});
				dp.getItemAt(0).children = childrens;   //children 指定层级关系
				
				childrens = new Array();
				childrens.push({name:"laly",homeAddress:"Indiana",sex:"woman",email:"laly@gmail.com"});
				dp.getItemAt(1).children = childrens;
				
				var fd:HierarchicalData = new HierarchicalData;
				fd.source = dp;
				dd.dataProvider = fd;
				
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<mx:AdvancedDataGrid id="dd" width="100%" height="100%">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="name" headerText="姓名" />
			<mx:AdvancedDataGridColumn dataField="sex" headerText="性别" />
			<mx:AdvancedDataGridColumn dataField="homeAddress" headerText="家庭地址"  id="address"/>
			<mx:AdvancedDataGridColumn dataField="workAddress" headerText="工作地址" />
			<mx:AdvancedDataGridColumn dataField="email" headerText="邮箱" />
		</mx:columns>
		
		<mx:rendererProviders>
		    <!--column 指定渲染的列可以使用id，亦可指定columnIndex(从0开始) ; columnSpan指定跨度 ; depth指定深度(从1开始),这里我们为子类也就是第二层指定渲染器 -->
			<mx:AdvancedDataGridRendererProvider column="{address}" 
												 columnSpan="2"
												 depth="2"
												 renderer="com.google.test.TestRender"/> 
		</mx:rendererProviders>
	</mx:AdvancedDataGrid>
</s:Application>

渲染器TestRender.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
								  xmlns:s="library://ns.adobe.com/flex/spark" 
								  xmlns:mx="library://ns.adobe.com/flex/mx" 
								  focusEnabled="true">
	<s:Label id="lblData"  width="100%" textAlign="center" text="{data.homeAddress}" />
</s:MXAdvancedDataGridItemRenderer>

显示效果