Flex AdvancedDataGrid 分层展示
Flex AdvancedDataGrid 分层显示
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>