Flex 3 AdvancedDataGrid的使用(七)
2009-09-26 16:13
351 查看
对分层数据进行列分组
和扁平数据一样,您使用分层数据进行列分组,以下例子修改自“为导航树创建单独的列“章节中的示例以将Actual和Estimates列归组到Revenues组列中:
运行示例
上面的列分组示例中并没有为AdvancedDataGridColumnGroup类指定数据字段,但是,AdvancedDataGridColumnGroup类就是被设计用于和分层数据一起工作的。因此,如果您给AdvancedDataGridColumnGroup类指定一个数据字段的话,它将自动给该数据字段的子字段创建一个列分组。
在下面示例中,HierarchicalDataForGroupedColumns.as文件定义了一个分层数据,设置Revenues字段包含俩个子字段,Actual 和Estimate:
下面示例使用该数据并且指定Revenues字段为AdvancedDataGridColumnGroup.dataField属性的值,其输出如下:
以下是实现代码:
运行示例
和扁平数据一样,您使用分层数据进行列分组,以下例子修改自“为导航树创建单独的列“章节中的示例以将Actual和Estimates列归组到Revenues组列中:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; include "SimpleHierarchicalData.as"; ]]> </mx:Script> <mx:AdvancedDataGrid width="100%" height="100%"> <mx:dataProvider> <mx:HierarchicalData source="{dpHierarchy}"/> </mx:dataProvider> <mx:groupedColumns> <mx:AdvancedDataGridColumn dataField="Region"/> <mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory Rep"/> <mx:AdvancedDataGridColumnGroup headerText="Revenues"> <mx:AdvancedDataGridColumn dataField="Actual"/> <mx:AdvancedDataGridColumn dataField="Estimate"/> </mx:AdvancedDataGridColumnGroup> </mx:groupedColumns> </mx:AdvancedDataGrid> </mx:Application>
运行示例
上面的列分组示例中并没有为AdvancedDataGridColumnGroup类指定数据字段,但是,AdvancedDataGridColumnGroup类就是被设计用于和分层数据一起工作的。因此,如果您给AdvancedDataGridColumnGroup类指定一个数据字段的话,它将自动给该数据字段的子字段创建一个列分组。
在下面示例中,HierarchicalDataForGroupedColumns.as文件定义了一个分层数据,设置Revenues字段包含俩个子字段,Actual 和Estimate:
[Bindable] private var dpHierarchy:ArrayCollection = new ArrayCollection([ {Region:"Southwest", Territory:"Arizona", Territory_Rep:"Barbara Jennings", Revenues:{Actual:38865, Estimate:40000}}, {Region:"Southwest", Territory:"Arizona", Territory_Rep:"Dana Binn", Revenues:{Actual:29885, Estimate:30000}}, {Region:"Southwest", Territory:"Central California", Territory_Rep:"Joe Smith", Revenues:{Actual:29134, Estimate:30000}}, {Region:"Southwest", Territory:"Nevada", Territory_Rep:"Bethany Pittman", Revenues:{Actual:52888, Estimate:45000}}, {Region:"Southwest", Territory:"Northern California", Territory_Rep:"Lauren Ipsum", Revenues:{Actual:38805, Estimate:40000}}, {Region:"Southwest", Territory:"Northern California", Territory_Rep:"T.R. Smith", Revenues:{Actual:55498, Estimate:40000}}, {Region:"Southwest", Territory:"Southern California", Territory_Rep:"Alice Treu", Revenues:{Actual:44985, Estimate:45000}}, {Region:"Southwest", Territory:"Southern California", Territory_Rep:"Jane Grove", Revenues:{Actual:44913, Estimate:45000}} ]);
下面示例使用该数据并且指定Revenues字段为AdvancedDataGridColumnGroup.dataField属性的值,其输出如下:
以下是实现代码:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; include "HierarchicalDataForGroupedColumns.as"; ]]> </mx:Script> <mx:AdvancedDataGrid id="myADG" width="100%" height="100%" defaultLeafIcon="{null}"> <mx:dataProvider> <mx:HierarchicalData source="{dpHierarchy}"/> </mx:dataProvider> <mx:groupedColumns> <mx:AdvancedDataGridColumn dataField="Region"/> <mx:AdvancedDataGridColumn dataField="Territory"/> <mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory Rep"/> <mx:AdvancedDataGridColumnGroup dataField="Revenues"> <mx:AdvancedDataGridColumn dataField="Actual"/> <mx:AdvancedDataGridColumn dataField="Estimate"/> </mx:AdvancedDataGridColumnGroup> </mx:groupedColumns> </mx:AdvancedDataGrid> </mx:Application>
运行示例
相关文章推荐
- flex 使用AdvancedDataGrid进行表头列合并,设置每列背景颜色(2)
- Flex 3 AdvancedDataGrid的使用(六)
- Flex 3 AdvancedDataGrid的使用(五)
- Flex 3 发现之旅:AdvancedDataGrid的使用(第三部分)续2
- Flex4 AdvancedDataGrid 控件的介绍和使用
- Flex 3 AdvancedDataGrid的使用(四)
- Flex 3 AdvancedDataGrid的使用(七)
- Flex 3 发现之旅:AdvancedDataGrid的使用
- Flex 3 发现之旅:AdvancedDataGrid的使用(第二部分)
- Flex 3 发现之旅:AdvancedDataGrid的使用(第二部分)续1
- Flex 3 体验:AdvancedDataGrid的使用(第二部分)
- flex AdvancedDataGrid的使用
- Flex 3 advancedDataGrid的使用(一)
- Flex 3 AdvancedDataGrid的使用(八)
- Flex 3 AdvancedDataGrid的使用(六)
- Flex 3 发现之旅:AdvancedDataGrid的使用(第一部分)
- Flex 3 发现之旅:AdvancedDataGrid的使用(第二部分)续2
- flex AdvancedDataGrid使用心得
- Flex开发小结(1)如何使用AdvancedDataGrid
- Flex 3 AdvancedDataGrid的使用(五)