Flex AdvancedDataGrid 分层显示

最新推荐文章于 2021-07-04 22:53:35 发布

原创最新推荐文章于 2021-07-04 22:53:35 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #AdvanceDataGrid #层级关系 #显示

Flex 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何利用AdvancedDataGrid组件在Flex应用中以树状结构显示具有层级关系的数据，并提供了两种示例：一种是静态定义数据结构，另一种是通过动态方式构建数据。

AdvancedDataGrid 实际上是增强版的DataGrid，提供更强大的定制显示功能。

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",email:"jobs@gmail.com",children:[{name:"tom",email:"tom@gmail.com"}]}
				,{name:"marry",email:"marry@gmail.com"}
			]);
			
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
			
				var fd:HierarchicalData = new HierarchicalData;
				fd.source = dp;
				dd.dataProvider = fd;
				
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<mx:AdvancedDataGrid id="dd">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="name" headerText="姓名">
				
			</mx:AdvancedDataGridColumn>
			<mx:AdvancedDataGridColumn dataField="email" headerText="邮箱">
				
			</mx:AdvancedDataGridColumn>
		</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:"dd",email:"dudong0726@126.com"}
				,{name:"lp",email:"liuhongyu8866@126.com"}
			]);
			
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
			
				var childrens:Array = new Array();
				childrens.push({name:"ddlp",email:"ddlp@126.com"});
				
				dp.getItemAt(0).children = childrens;   //children 指定层级关系
				
				var fd:HierarchicalData = new HierarchicalData;
				fd.source = dp;
				dd.dataProvider = fd;
				
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<mx:AdvancedDataGrid id="dd">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="name" headerText="姓名">
				
			</mx:AdvancedDataGridColumn>
			<mx:AdvancedDataGridColumn dataField="email" headerText="邮箱">
				
			</mx:AdvancedDataGridColumn>
		</mx:columns>
	</mx:AdvancedDataGrid>
</s:Application>