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爲分支節點指定一個文件夾打開圖標