Flex开发小结（1）如何使用AdvancedDataGrid

1、AdvancedDataGrid扩展了普通DataGrid的功能，AdvancedDataGrid控件提供了另外一些特性，并在数据显示、数据聚合和数据格式化方面有着强大的控制力。

这里我主要说一下AdvancedDataGrid中数据的分层、分组显示以及导航树功能。

 

2、如果要配置AdvancedDataGrid显示分层数据和导航树，需要把AdvancedDataGrid数据源dataProvider属性设置为HierarchicalData类或者GroupingCollection类的实例。

 

数据分层显示：使用HierarchicalDatal类。

数据分组显示：使用GroupingCollection类，作为配置一个GroupingCollection类的实例的一部分，您需要指定一个或更多的字段来将平面数据组织为同一层次。

 

注意：您可以从任意数据创建一个HierarchicalData类或GroupingCollection类的实例来作为数据源。但是，AdvancedDataGrid控件按如下修改它为内部的数据表示：

• 一个数组实例在AdvancedDataGrid控件内部使用一个ArrayCollection类实例表示。
• 一个ArrayCollection在AdvancedDataGrid控件内部使用一个ArrayCollection类实例表示。
• 一个包含正确XML文本的字符串在AdvancedDataGrid控件内部使用一个XMLListCollection类实例表示。
• 一个XMLNode实例在AdvancedDataGrid控件内部使用一个XMLListCollection类实例表示。
• 一个XMLList实例在AdvancedDataGrid控件内部使用一个XMLListCollection类实例表示。
• 任何实现ICollectionView接口的对象在AdvancedDataGrid控件内部使用一个ICollectionView实例表示。
• 一个其他任意类型的对象被作为唯一的条目包裹在一个的数组示例中。

例如，如果您使用一个数组来创建HierarchicalData类的一个实例，并将该HierarchicalData实例传递给AdvancedDataGrid.dataProvider属性，然后又从AdvancedDataGrid.dataProvider属性将其读回；您读回的数据将是一个ArrayCollection实例。

 

3、导航树：

AdvancedDataGrid控件中可以将数据显示为树形结构，也因为该控件的第一列使用一个可缩放数来选择行的显示而被称作tree datagrid，唯一要记住的规则是该树总是显示在有列的最左边。

尽管在AdvancedDataGrid控件您可以所任意组织列而不管数据是如何组织的。并且您可以通过拖动列来对AdvancedDataGrid控件上的列进行重新定位，但是导航树总是出现在列的最左边。

数据表格的第一列通常与该控件的数据源的某一字段关联。该数据字段用于为树节点标签命名。

 

4、显示分层数据：

分层数据是数据被分层组织的结构化数据。要在AdvancedDataGrid控件中显示分层数据，您需要将控件的数据源设置为Hierarchica。数据源中的lData类的实例数据结构定义了AdvancedDataGrid控件对数据的如何显示。

在下面的示例中展示了AdvancedDataGrid控件的分层数据显示。

该数据的顶层数据包含一个Region字段和多个第二层子对象，每个第二层子对象也包含一个Region字段和多个其他的子对象。

该示例中的AdvancedDataGrid控件定义了四列来显示数据：Region、Territory Rep、 Actual和Estimate。

 

（1）使用ArrayCollection定义分层数据：使用ArrayCollection是创建分层数据的常用方式。

下面为本示例代码：

<?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]
			private var dpHierarchy:ArrayCollection = new ArrayCollection([
				{Region:"Southwest", children: [
					{Region:"Arizona", children: [ 
						{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
						{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},  
					{Region:"Central California", children: [ 
						{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},  
					{Region:"Nevada", children: [ 
						{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
					{Region:"Northern California", children: [ 
						{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
						{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},  
					{Region:"Southern California", children: [ 
						{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
						{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
				]}
			]);
			
		]]>
	</fx:Script>
	<mx:AdvancedDataGrid width="50%" height="50%"> 
		<mx:dataProvider>
			<mx:HierarchicalData source="{dpHierarchy}"/>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
									   headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="Actual"/>
			<mx:AdvancedDataGridColumn dataField="Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>    

	
</s:Application>

以下图片为上述示例创建的AdvancedDataGrid控件。该控件使用文件夹图标表示数据分支节点，使用文件图标代表叶子节点。控件的第一列和数据源的Region相关联。所以标签显示的是Region字段的值。

 

注意：

该示例在ArrayCollection定义中使用children关键字来定义数据的层次。children关键字是HierarchicalData类用来定义层次的缺省关键字。

您也可以使用使用其他的关键字来定义层次。以下示例，其使用的是categories关键字来定义数据的层次：只需要

在指定HierarchicalData类的childrenField属性为categories即可。

<?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]
			private var dpHierarchy:ArrayCollection = new ArrayCollection([
				{Region:"Southwest", categories: [
					{Region:"Arizona", categories: [ 
						{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
						{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},  
					{Region:"Central California", categories: [ 
						{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},  
					{Region:"Nevada", categories: [ 
						{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
					{Region:"Northern California", categories: [ 
						{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
						{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},  
					{Region:"Southern California", categories: [ 
						{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
						{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
				]}
			]);
		]]>
	</fx:Script>
	<mx:AdvancedDataGrid width="50%" height="50%"> 
		<mx:dataProvider>
			<mx:HierarchicalData source="{dpHierarchy}"
								 childrenField="categories"/>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
									   headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="Actual"/>
			<mx:AdvancedDataGridColumn dataField="Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>    

	
</s:Application>

结果如下图所示：

 

（2）使用XML定义分层数据

当然也可以使用XML作为AdvancedDataGrid的数据源：同样要通过实例化HierarchicalData类来进行。

如下示例：

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleHierarchicalADGXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	
	<mx:Script>
		<![CDATA[
			import mx.collections.HierarchicalData;
			import mx.collections.XMLListCollection;
		]]>
	</mx:Script>
	
	<mx:XMLList id="dpHierarchyXML" >
		<Region Region="Southwest">
			<Region Region="Arizona">
				<Territory_Rep Territory_Rep="Barbara Jennings" 
							   Actual="38865" Estimate="40000"/>
				<Territory_Rep Territory_Rep="Dana Binn" 
							   Actual="29885" Estimate="30000"/>
			</Region>
			<Region Region="Central California">
				<Territory_Rep Territory_Rep="Joe Smith" 
							   Actual="29134" Estimate="30000"/>
			</Region>
			<Region Region="Nevada">
				<Territory_Rep Territory_Rep="Bethany Pittman" 
							   Actual="52888" Estimate="45000"/>
			</Region>
			<Region Region="Northern California">
				<Territory_Rep Territory_Rep="Lauren Ipsum" 
							   Actual="38805" Estimate="40000"/>
				<Territory_Rep Territory_Rep="T.R. Smith" 
							   Actual="55498" Estimate="40000"/>
			</Region>
			<Region Region="Southern California">
				<Territory_Rep Territory_Rep="Alice Treu" 
							   Actual="44985" Estimate="45000"/>
				<Territory_Rep Territory_Rep="Jane Grove" 
							   Actual="44913" Estimate="45000"/>
			</Region>
		</Region>  
	</mx:XMLList>
	
	<mx:AdvancedDataGrid width="50%" height="50%" 
						 dataProvider="{new HierarchicalData(dpHierarchyXML)}">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="@Region" 
									   headerText="Region"/>
			<mx:AdvancedDataGridColumn dataField="@Territory_Rep"
									   headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="@Actual" 
									   headerText="Actual"/>
			<mx:AdvancedDataGridColumn dataField="@Estimate" 
									   headerText="Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>    
</mx:Application>

结果如下图：

 

5、显示分组数据：

 要想显示分组数据，必须传递给AdvancedDataGrid控件的dataprovider属性以GroupingCollection类的实例，如下：

<mx:dataProvider>
			<mx:GroupingCollection id="gc" source="{dpFlat}">
				<mx:grouping>
					<mx:Grouping>
						<mx:GroupingField name="Region"/>
						<mx:GroupingField name="Territory"/>
					</mx:Grouping>
				</mx:grouping>
			</mx:GroupingCollection>
		</mx:dataProvider> 

GroupingCollection的source属性必须为前面定义的数据源，同时使用GroupingField指定分组字段，可以指定一个或者多个分组字段。

注意：必须在AdvancedDataGrid控件的initialize方法中调用GroupingCollection类的refresh方法。

如下示例：

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleHierarchicalADGXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.HierarchicalData;
			import mx.collections.XMLListCollection;
			[Bindable]
			private var dpFlat:ArrayCollection = new ArrayCollection([
				{Region:"Southwest", Territory:"Arizona", 
					Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
				{Region:"Southwest", Territory:"Arizona", 
					Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
				{Region:"Southwest", Territory:"Central California", 
					Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
				{Region:"Southwest", Territory:"Nevada", 
					Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
				{Region:"Southwest", Territory:"Northern California", 
					Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
				{Region:"Southwest", Territory:"Northern California", 
					Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
				{Region:"Southwest", Territory:"Southern California", 
					Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
				{Region:"Southwest", Territory:"Southern California", 
					Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
			]);
			

		]]>
	</mx:Script>
	
	<mx:AdvancedDataGrid id="myADG" 
						 width="100%" height="100%" 
						 initialize="gc.refresh();">        
		<mx:dataProvider>
			<mx:GroupingCollection id="gc" source="{dpFlat}">
				<mx:grouping>
					<mx:Grouping>
						<mx:GroupingField name="Region"/>
						<mx:GroupingField name="Territory"/>
					</mx:Grouping>
				</mx:grouping>
			</mx:GroupingCollection>
		</mx:dataProvider>        
		
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn dataField="Territory"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
									   headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="Actual"/>
			<mx:AdvancedDataGridColumn dataField="Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
  
</mx:Application>

示例结果如下图：

6、设置导航树图标和标签

导航树可以让您控制分支和叶子节点的图标和标签。您可显示一个有标签无图标的树、一个只有分支图标的树、一个所有都没有标签的树或者一个不与任何数据字段相关的自由列数。

以下表描述了AdvancedDataGrid控件用于设置树图标的样式属性：

样式属性描述：

defaultLeafIcon指定叶子节点图标

disclosureClosedIcon指定显示在封闭的分支节点前面的图标，缺省是一个黑三角形。

disclosureOpenIcon指定显示在展开的分支节点前面的图标，缺省是一个黑三角形。

folderClosedIcon为分支节点指定一个文件夹关闭图标

folderOpenIcon为分支节点指定一个文件夹打开图标