Flex 3 发现之旅:AdvancedDataGrid的使用(第一部分)

Flex 3 已经开始公测，其带来了诸多变化，所以由今天开始，我们将陆续和大家一起来学习其中的新特性，进行我们的Flex 3发现之旅。

今天我们要说的是官方文档中用了整章介绍的AdvancedDataGrid，AdvancedDataGrid是DataGrid的高级版本，Flex 3 SDK并不包含它，其和Charting Enhancements一起构成了Flex Data Visualization package，TNND，也就是说这是收费组件，ADOBE的生财机器。所以官方提供的SDK中并没有这个组件，不过FlexBuilder 3 Beta1内置的SDK包含了Flex Data Visualization package，这个我已经将FlexBuilder 3 Beta1内置的SDK剥离出来了，需要的朋友可以从这里下载。

相对DataGrid组件，AdvancedDataGrid主要有以下几个高级之处：

• 多列排序：按住Control键在点击某一列的表头来实现多列排序。
• 自定义行和列样式：通过设置行和列的styleFunction指向一个函数来样式化行列
• 显示分层数据：在组件的第一列显示一个可缩放的导航数来控制表格行的显示。
• 创建多列分组：将多列汇聚到同一列表头下。
• 使用单元渲染器（renderers）：跨越多栏使用同一渲染器或者一列使用多个渲染器。

多列排序

缺省的情况下，AdvancedDataGrid是按数据添加到它的DataProvider的顺序显示数据，和DataGrid组件一样，AdvancedDataGrid也允许您在数据显示后对数据进行排序。不同的是DataGrid只能基于单列排序，而AdvancedDataGrid支持基于多列的排序。

以下是多列排序的示例：

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
                  
         [Bindable]
         private var dpADG:ArrayCollection = new ArrayCollection([
           {Artist:'Pavement', Album:'Slanted and Enchanted', Price:12.99},
           {Artist:'Pavement', Album:'Brighten the Corners', Price:13.99},
           {Artist:'Saner', Album:'A Child Once', Price:14.99},
           {Artist:'Saner', Album:'Helium Wings', Price:12.99},
           {Artist:'The Doors', Album:'The Doors', Price:10.99},
           {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
           {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
           {Artist:'Grateful Dead', Album:'In the Dark', Price:17.99},
           {Artist:'Grateful Dead', Album:'Shakedown Street', Price:13.99},
           {Artist:'The Doors', Album:'Strange Days', Price:12.99},
           {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
         ]);                   
      ]]>
    </mx:Script>
 
    <mx:AdvancedDataGrid width="100%" height="100%"
        dataProvider="{dpADG}">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Artist" />
            <mx:AdvancedDataGridColumn dataField="Album" />
            <mx:AdvancedDataGridColumn dataField="Price" />
        </mx:columns>
    </mx:AdvancedDataGrid> 
</mx:Application>

运行示例

运行以上示例，如下进行排序：

1. 点击AdvancedDataGrid组件的任意列表头对任意列进行排序，例如点击Artist列的列表头Artist列将升序进行排序，再次点击的话将按降序排序。
2. 按住Control键，点击其他任意的列头，例如点击Price列头，将在保持Artist列降序排列的情况下，将Price列按升序排列。现在你可以从中发现某一艺术家最便宜的专辑。
3. 再次点击Price列头，Price列将按降序排列
4. 按住Control键，点击任意其他列，将其加入排序条件中。

自定义行列样式

通过使用AdvancedDataGrid组件的回调(callback)函数来自定义表格行列的样式，要控制某一行的样式，使用AdvancedDataGrid.styleFunction属性，要自定义某一列的样式，使用AdvancedDataGridColumn.styleFunction属性，AdvancedDataGrid.styleFunction指定的回调函数先执行，接着才执行AdvancedDataGridColumn.styleFunction属性指定的函数。

回调函数必须要有如下声明：

public function myStyleFunction(data:Object,column:SuperDataGridColumn):Object

该函数返回一个包含用于表示样式设置的styleName:value对的完整对象，或者null。styleName为样式属性的名称，如Color，而value为样式属性的值，如0x00FF00。

AdvancedDataGrid会在更新显示时调用回调函数，如应用启动时该组件第一次会绘制的时候，或者在您调用invalidateList()来刷新组件所有行的显示时。

本节的示例将使用回调函数来定义AdvancedDataGrid的样式，本节中所有的示例都使用以下StyleData.as文件中的数据：

[Bindable]
 private var dpADG:ArrayCollection = new ArrayCollection([
   {Artist:'Pavement', Album:'Slanted and Enchanted', Price:12.99},
   {Artist:'Pavement', Album:'Brighten the Corners', Price:13.99},
   {Artist:'Saner', Album:'A Child Once', Price:14.99},
   {Artist:'Saner', Album:'Helium Wings', Price:12.99},
   {Artist:'The Doors', Album:'The Doors', Price:10.99},
   {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
   {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
   {Artist:'Grateful Dead', Album:'In the Dark', Price:17.99},
   {Artist:'Grateful Dead', Album:'Shakedown Street', Price:13.99},
   {Artist:'The Doors', Album:'Strange Days', Price:12.99},
   {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
 ]);

定义行样式

以下示例使用AdvancedDataGrid.styleFunction属性指定一个回调函数来定义表格行样式。在该示例中，您可以使用Button控件来选择AdvancedDataGrid.styleFunction中的artist，然后回调函数将会红色高亮显示所有被选择的行。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
			// Include the data for the AdvancedDataGrid control.
			include "StyleData.as"
			// Artist name to highlight.
			protected var artistName:String;
			// Event handler to set the selected artist's name
			// based on the selected Button control.
			public function setArtistName(event:Event):void
			{
				artistName=Button(event.currentTarget).label;
				// Refresh row display.
				myADG.invalidateList();
			}
			// Callback function that hightlights in red
			// all rows for the selected artist.
			public function myStyleFunc(data:Object,
				col:AdvancedDataGridColumn):Object
			{
				if (data["Artist"] == artistName)
				return {color:0xFF0000};
				// Return null if the Artist name does not match.
				return null;
			}
		]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="myADG"
	width="100%" height="100%"
	dataProvider="{dpADG}"
	styleFunction="myStyleFunc">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist"/>
			<mx:AdvancedDataGridColumn dataField="Album"/>
			<mx:AdvancedDataGridColumn dataField="Price"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<mx:HBox>
		<mx:Button label="Pavement" click="setArtistName(event);"/>
		<mx:Button label="Saner" click="setArtistName(event);"/>
		<mx:Button label="The Doors" click="setArtistName(event);"/>
	</mx:HBox>
</mx:Application>

运行示例

定义列样式

以下示例修改上节的示例来定义AdvancedDataGrid的行和列样式。在该示例中，所有价格小于$11.00的单元都将显示为绿色。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
			// Include the data for the AdvancedDataGrid control.
			include "StyleData.as"
			// Artist name to highlight.
			protected var artistName:String;
			// Event handler to set the selected artist's name
			// based on the selected Button control.
			public function setArtistName(event:Event):void
			{
				artistName=Button(event.currentTarget).label;
				// Refresh row display.
				myADG.invalidateList();
			}
			// Callback function that hightlights in red
			// all rows for the selected artist.
			public function myStyleFunc(data:Object,
				col:AdvancedDataGridColumn):Object
			{
				if (data["Artist"] == artistName)
				return {color:0xFF0000};
				// Return null if the Artist name does not match.
				return null;
			}
			// Callback function that hightlights in green
			// all entries in the Price column
			// with a value less than $11.00.
			public function myColStyleFunc(data:Object,
				col:AdvancedDataGridColumn):Object
			{
				if(data["Price"] <= 11.00)
					return {color:0x00FF00};
				return null;
			}
		]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		dataProvider="{dpADG}"
		styleFunction="myStyleFunc">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist"/>
			<mx:AdvancedDataGridColumn dataField="Album"/>
			<mx:AdvancedDataGridColumn dataField="Price"
				styleFunction="myColStyleFunc"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<mx:HBox>
		<mx:Button label="Pavement" click="setArtistName(event);"/>
		<mx:Button label="Saner" click="setArtistName(event);"/>
		<mx:Button label="The Doors" click="setArtistName(event);"/>
	</mx:HBox>
</mx:Application>

运行示例

在列中使用数据格式器（formatter）

AdvancedDataGridColumn有一个formatter属性，通过它，您可以向列传递一个Formatter类，或者Formatter子类的实例。格式器类可以将数据转换为自定义的字符串。例如您可以使用CurrencyFormatter类在Price列值的加上美元符($)前缀。

格式器类可以和labelFunction属性或styleFunction属性设定的回调函数一起使用，如果您指定了一个回调函数，Flex在回调函数值返回后调用格式器类。

以下示例在修改自自定义行样式章节示例，在Price列增加了一个货币格式器以在价格前显示$前缀：

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
			// Include the data for the AdvancedDataGrid control.
			include "StyleData.as"
			// Artist name to highlight.
			protected var artistName:String;
			// Event handler to set the selected artist's name
			// based on the selected Button control.
			public function setArtistName(event:Event):void
			{
				artistName=Button(event.currentTarget).label;
				// Refresh row display.
				myADG.invalidateList();
			}
			// Callback function that hightlights in red
			// all rows for the selected artist.
			public function myStyleFunc(data:Object,
				col:AdvancedDataGridColumn):Object
			{
				if (data["Artist"] == artistName)
				return {color:0xFF0000};
				// Return null if the Artist name does not match.
				return null;
			}
		]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		dataProvider="{dpADG}"
		styleFunction="myStyleFunc">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist"/>
			<mx:AdvancedDataGridColumn dataField="Album"/>
			<mx:AdvancedDataGridColumn  width="75" dataField="Price">
				<mx:formatter>
					<mx:CurrencyFormatter/>
				</mx:formatter>
			</mx:AdvancedDataGridColumn>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<mx:HBox>
		<mx:Button label="Pavement" click="setArtistName(event);"/>
		<mx:Button label="Saner" click="setArtistName(event);"/>
		<mx:Button label="The Doors" click="setArtistName(event);"/>
	</mx:HBox>
</mx:Application>

运行示例

选择多个单元格及多行

所有基于List的控件都支持allowMultipleSelection属性。将allowMultipleSelection属性设置为True可以使得您在控件中一次选择不止一个条目。例如，DataGrid控件可以让您选择多行这样您就可以将他们拖放到另一个DataGrid中。

AdvancedDataGrid增加了可以让您选择多个单元格的新的特性，一旦已选择，您就可以将其拖放到另一个AdvancedDataGrid控件中、将它们拷贝到剪切板中或者在单元格数据进行某些其他的处理。

您可以使用AdvancedDataGrid控件的selectionMode和allowMultipleSelection配置多重选择。selectionMode的缺省属性是singleRow，这就是说您一次只能选择单行。要多重选择，需要将selectionMode属性设置为multipleRows或者multipleCells。

多个单元格的选择方式和表格处理软件中的用法相似，连续的使用Shift键，非连续的使用Control建。

选择控件中邻近的单元

1. 点击第一个单元，在某行或某列，选择它。
2. 在选择其他的单元时按下Shift键。如果selectionMode设置为multipleRows，点击任何其他行的单元格来选择多个时，将选择邻近的行。如果selectionMode设置为multipleCells，点击任何单元格，将选择邻近的单元格

选择控件中非邻近的单元

1. 点击第一个单元，在某行或某列，选择它。
2. 在选择其他的单元时按下Control键。如果selectionMode设置为multipleRows，点击任何其他行的单元格来选择多个时，将选择该单独的行。如果selectionMode设置为multipleCells，点击任何单元格，将选择该单独的单元格

一旦选择了AdvancedDataGrid控件的某行或列时，该控件将更新selectedCells属性来记录您的选择信息。selectedCells是一个对象数组，它包含的每个对象都有一个rowIndex和columnIndex属性来表示您选择的单元格在控件中的行列的位置。

selectionMode属性的值决定了rowIndex和columnIndex属性的值，如下表所示：

selectionMode属性	rowIndex和columnIndex属性值
none	控件不允许选择，并且selectedCells为null
singleRow	点击某行的任意单元来选择该行。 在选择后，selectedCells包含一个单独对象： [{rowIndex:selectedRowIndex, columnIndex: -1}]
multipleRows	点击某行的任意单元来选择该行。 对于非邻近行，按下Control键时，点击其他行的单元格来选择其他行。 对于邻近行，按下Shfit键时，点击其他行的单元格来选择多个连续的行。 选择后，每行在selectedCells保存为一个对象： [ {rowIndex: selectedRowIndex1, columnIndex: -1}, {rowIndex: selectedRowIndex2, columnIndex: -1}, ... {rowIndex: selectedRowIndexN, columnIndex: -1} ]
singleCell	点击任意单元来选择该单元格。 在选择后，selectedCells包含一个单独对象： [{rowIndex: selectedRowIndex, columnIndex:selectedColIndex}]
multipleCells	点击任意单元来选择该单元格。 对于非邻近单元，按下Control键时，点击任意单元格来选择多个非连续的单元格。 对于邻近单元，按下Shfit键时，点击任意单元格来选择多个连续的单元格。 选择后，每行在selectedCells保存为一个对象： [ {rowIndex: selectedRowIndex1, columnIndex: selectedColIndex1}, {rowIndex: selectedRowIndex2, columnIndex: selectedColIndex2}, ... {rowIndex: selectedRowIndexN, columnIndex: selectedColIndexN} ]

以下示例设置selectionMode属性为multipleCells使得您可以选择表格中的多个单元。该应用使用KeyUp事件处理器来识别Control-C组合键，如果监听到，将选择的多个单元格从AdvancedDataGrid控件复制到系统剪贴板中。

在拷贝单元格后，您可以将这些单元格粘贴到Flex应用的其他位置中，或者将它们粘贴到其他应用如微软Excel。您可以将它们粘贴到应用底部的TextArea中去。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import flash.events.KeyboardEvent;
			import flash.system.System;
			include "StyleData.as"
			// Event handler to recognize when Ctrl-C is pressed,
			// and copy the selected cells to the system clipboard.
			private function myKeyUpHandler(event:KeyboardEvent):void
			{
				var keycode_c:uint = 67;
				if (event.ctrlKey && event.keyCode == keycode_c)
				{
					// Separator used between Strings sent to clipboard
					// to separate selected cells.
					var separator:String = ",";
					// The String sent to the clipboard
					var dataString:String = "";
					// Loop over the selectedCells property.
					// Data in selectedCells is ordered so that
					// the last selected cell is at the head of the list.
					// Process the data in reverse so
					// that it appears in the correct order in the clipboard.
					var n:int = event.currentTarget.selectedCells.length;
					for (var i:int = 0; i < n; i++)
					{
						var cell:Object = event.currentTarget.selectedCells[i];
						// Get the row for the selected cell.
						var data:Object =
						event.currentTarget.dataProvider[cell.rowIndex];
						// Get the name of the field for the selected cell.
						var dataField:String =
						event.currentTarget.columns[cell.columnIndex].dataField;
						// Get the cell data using the field name.
						dataString = data[dataField] + separator + dataString;
					}
					// Remove trailing separator.
					dataString =
					dataString.substr(0, dataString.length - separator.length);
					// Write dataString to the clipboard.
					System.setClipboard(dataString);
				}
			}
		]]>
	</mx:Script>
	<mx:AdvancedDataGrid width="100%" height="100%"
		dataProvider="{dpADG}"
		selectionMode="multipleCells"
		allowMultipleSelection="true"
		keyUp="myKeyUpHandler(event);">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist"/>
			<mx:AdvancedDataGridColumn dataField="Album"/>
			<mx:AdvancedDataGridColumn dataField="Price"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<mx:TextArea id="myTA"/>
</mx:Application>

运行示例

分层和分组数据显示

AdvancedDataGrid支持分级和分组数据的显示，为了支持这样的显示，AdvancedDataGrid在第一列显示一个导航树以让您分级浏览数据。

分层数据（Hierarchical data）是一种以父子项目结构分层的数据，分组数据（Grouped data）是一开始就为平面的而无内在层次关系的数据。在将该数据传递给AdvancedDataGrid前，您可以指定一个或更多的数据字段将一组数据归组为同一层次。

以下文件中的代码演示分级数据示例：

//SimpleHierarchicalData.as:
 
[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}]}
	]}
]);

注意该数据的顶层数据包含一个Region字段和多个第二层子对象，每个第二层子对象也包含一个Region字段和多个其他的子对象，以下示例演示AdvancedDataGrid控件对该数据的显示效果：

该示例的代码在“控制导航树”章节中。

要显示扁平数据，在将其传递给AdvancedDataGrid前您首先要对数据进行归组。以下代码包含的是前面示例中分层数据的变异版本，其将数据组织为以平面结构：

[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}
]);

在该示例中，数据只包含一个层面没有内在的层次的单独纪录,要归组该数据，您可以指定一个或更多的数据字段将该数据归组为同一层次。以下示例演示AdvancedDataGrid控件对平面数据通过Region字段进行的分组。

该示例代码在“显示分组数据“章节中

设置分层数据的数据源

要配置AdvancedDataGrid显示分级数据和导航树，您传递给dataProvider属性以HierarchicalData类或者GroupingCollection类的实例，当您的数据以层次组织时使用HierarchicalData类。更多信息请查看“显示分层数据”。

当您的数据以平面结构组织时使用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实例。

控制导航树

AdvancedDataGrid控件有时候因为该控件的第一列使用一个可缩放数来选择行的显示而被称作tree datagrid，唯一要记住的规则是该树总是显示在所有列的最左边。尽管在AdvancedDataGrid控件您可以任意组织列而不管数据是如何组织的。并且您可以通过拖动列来对AdvancedDataGrid控件上的列进行重新定位，但是导航树总是出现在列的最左边。

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

在以下示例中，想您展示了“分层和分组数据显示”章节提到的AdvancedDataGrid控件分层结构数据的显示。该数据的顶层数据包含一个Region字段和多个第二层子对象，每个第二层子对象也包含一个Region字段和多个其他的子对象。

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<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: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>
</mx:Application>

运行示例

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

注意树的叶子图标没有显示标签。这是因为每个territory都没包含Region字段。下一章我们将描述怎样控制导航树的图标显示。

设置导航树图标和标签

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

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

样式属性	描述
defaultLeafIcon	指定叶子节点图标
disclosureClosedIcon	指定显示在封闭的分支节点前面的图标，缺省是一个黑三角形。
disclosureOpenIcon	指定显示在展开的分支节点前面的图标，缺省是一个黑三角形。
folderClosedIcon	为分支节点指定一个文件夹关闭图标
folderOpenIcon	为分支节点指定一个文件夹打开图标

以下示例设置缺省叶子图标为null以隐藏它，并且使用自定义的文件夹打开和关闭图标：

<?xml version="1.0"?>
<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%"
		defaultLeafIcon="{null}"
		folderOpenIcon="@Embed(source='assets/folderOpenIcon.jpg')"
		folderClosedIcon="@Embed(source='assets/folderClosedIcon.jpg')">
		<mx:dataProvider>
			<mx:HierarchicalData source="{myHCollAC}"/>
		</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>
</mx:Application>

您也可以使用setStyle()方法和<mx:Style>标签指定样式。如下所示：

<mx:Style>
  AdvancedDataGrid {
    defaultLeafIcon:ClassReference(null);
    folderOpenIcon:Embed(source='assets/folderOpenIcon.jpg');
    folderClosedIcon:Embed(source='assets/folderClosedIcon.jpg');
  }
</mx:Style>

为导航树创建单独的列

在“分层和分组数据显示”章节的示例中，第一列同时显示数据的Region字段值。因此，当年展开导航树节点时，每个树节点标签与对应数据行中的Region字段值一致。对于树的叶子节点，数据源没有包含Region字段值。所有叶子节点标签为空。

您可以将导航树独自放置在单独的列中，该列不和任意数据字段对应。如下所示：

该示例没有任何数据字段与将包含数列对应，所有树图标显示为无标签。该示例同时设置folderClosedIcon、folderOpenIcon、和defaultLeafIcon属性为null，但是disclosure图标被显示以使得用户可以打开或关闭树节点。

以下代码实现该示例：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			include "SimpleHierarchicalData.as";
		]]>
	</mx:Script>
	<mx:AdvancedDataGrid width="100%" height="100%"
		folderClosedIcon="{null}"
		folderOpenIcon="{null}"
		defaultLeafIcon="{null}">
		<mx:dataProvider>
			<mx:HierarchicalData