Flex 3 发现之旅:AdvancedDataGrid的使用

Flex 3 发现之旅:AdvancedDataGrid的使用
选择多个单元格及多行
所有基于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中去。
<?xmlversion="1.0"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
importmx.collections.ArrayCollection;
import flash.events.KeyboardEvent;
importflash.system.System;
include "StyleData.as"
// Eventhandler to recognize when Ctrl-C is pressed,
// and copythe selected cells to the system clipboard.
privatefunction myKeyUpHandler(event:KeyboardEvent):void
{
varkeycode_c:uint =
67;
if
(event.ctrlKey && event.keyCode== keycode_c)
{
// Separatorused between Strings sent to clipboard
// toseparate selected cells.
var separator:String=
",";
// TheString sent to the clipboard
var dataString:String=
"";
// Loop overthe selectedCells property.
// Data inselectedCells is ordered so that
// the lastselected cell is at the head of the list.
// Processthe data in reverse so
// that itappears in the correct order in the clipboard.
var n:int= event.currentTarget.selectedCells.length;

for (var i:int =
0; i < n; i++)

{
varcell:Object = event.currentTarget.selectedCells[i];
// Get the row for the selected cell.
vardata:Object =
event.currentTarget.dataProvider[cell.rowIndex];
// Get the name of the field for the selected cell.
vardataField:String =
event.currentTarget.columns[cell.columnIndex].dataField;
// Get the cell data using the field name.
dataString= data[dataField]+ separator + dataString;

}
// Removetrailing separator.
dataString =
dataString.substr(0, dataString.length - separator.length);
// WritedataString 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:TextAreaid="myTA"/>
</mx:Application>
运行示例

分层和分组数据显示
AdvancedDataGrid支持分级和分组数据的显示，为了支持这样的显示，AdvancedDataGrid在第一列显示一个导航树以让您分级浏览数据。
分层数据（Hierarchicaldata）是一种以父子项目结构分层的数据，分组数据（Groupeddata）是一开始就为平面的而无内在层次关系的数据。在将该数据传递给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:"CentralCalifornia", children:
[
{Territory_Rep:"Joe Smith", Actual:29134,Estimate:30000}]},
{Region:"Nevada",children:
[
{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
{Region:"NorthernCalifornia", children:
[
{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
{Region:"SouthernCalifornia", 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 = newArrayCollection([
{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控件有时候因为该控件的第一列使用一个可缩放数来选择行的显示而被称作treedatagrid，唯一要记住的规则是该树总是显示在所有列的最左边。尽管在AdvancedDataGrid控件您可以任意组织列而不管数据是如何组织的。并且您可以通过拖动列来对AdvancedDataGrid控件上的列进行重新定位，但是导航树总是出现在列的最左边。
数据表格的第一列通常与该控件的数据源的某一字段关联。该数据字段用于为树节点标签命名。
在以下示例中，想您展示了“分层和分组数据显示”章节提到的AdvancedDataGrid控件分层结构数据的显示。该数据的顶层数据包含一个Region字段和多个第二层子对象，每个第二层子对象也包含一个Region字段和多个其他的子对象。
该示例中的AdvancedDataGrid控件定义了四列来显示数据：Region、TerritoryRep、 Actual和Estimate。
<?xmlversion="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical">
<mx:Script>
<![CDATA[
importmx.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="TerritoryRep"/>
<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以隐藏它，并且使用自定义的文件夹打开和关闭图标：
<?xmlversion="1.0"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
importmx.collections.ArrayCollection;
include"SimpleHierarchicalData.as";
]]>
</mx:Script>
<mx:AdvancedDataGridwidth="100%"height="100%"
defaultLeafIcon="{null}"
folderOpenIcon="@Embed(source='assets/folderOpenIcon.jpg')"
folderClosedIcon="@Embed(source='assets/folderClosedIcon.jpg')">
<mx:dataProvider>
<mx:HierarchicalDatasource="{myHCollAC}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumndataField="Region"/>
<mx:AdvancedDataGridColumndataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumndataField="Actual"/>
<mx:AdvancedDataGridColumndataField="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图标被显示以使得用户可以打开或关闭树节点。
以下代码实现该示例：
<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical">
<mx:Script>
<![CDATA[
importmx.collections.ArrayCollection;
include"SimpleHierarchicalData.as";
]]>
</mx:Script>
<mx:AdvancedDataGridwidth="100%"height="100%"
folderClosedIcon="{null}"
folderOpenIcon="{null}"
defaultLeafIcon="{null}">
<mx:dataProvider>
<mx:HierarchicalDatasource="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumnheaderText=""width="50"/>
<mx:AdvancedDataGridColumndataField="Region"/>
<mx:AdvancedDataGridColumndataField="Territory_Rep"

headerText="Territory Rep"/>
<mx:AdvancedDataGridColumndataField="Actual"/>
<mx:AdvancedDataGridColumndataField="Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
显示分层数据
分层数据是数据被分层组织的结构化数据。要在AdvancedDataGrid控件中显示分层数据，您需要将控件的数据源设置为HierarchicalData类的实例。数据源中的数据结构定义了AdvancedDataGrid控件对数据的如何显示。
使用ArrayCollection定义分层数据
正如下面示例中SimpleHierarchicalData.as文件显示的，使用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:"CentralCalifornia", children:
[
{Territory_Rep:"Joe Smith", Actual:29134,Estimate:30000}]},
{Region:"Nevada",children:
[
{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
{Region:"NorthernCalifornia", children:
[
{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
{Region:"SouthernCalifornia", children:
[
{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}
]);
该示例在ArrayCollection定义中使用children关键字来定义数据的层次。children关键字是HierarchicalData类用来定义层次的缺省关键字。
您也可以使用使用其他的关键字来定义层次。以下示例显示HierarchicalDataCategories.as文件内容，其使用的是categories关键字：
[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:"CentralCalifornia", categories:
[
{Territory_Rep:"Joe Smith", Actual:29134,Estimate:30000}]},
{Region:"Nevada",categories:
[
{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
{Region:"NorthernCalifornia", categories:
[
{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
{Region:"SouthernCalifornia", categories:
[
{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}
]);
如下所示，使用HierarchicalData.childrenField属性来指定定义层级的字段名：
<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
include"HierarchicalDataCategories.as";
]]>
</mx:Script>
<mx:AdvancedDataGridwidth="100%"height="100%">
<mx:dataProvider>
<mx:HierarchicalDatasource="{dpHierarchy}"

childrenField="categories"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumndataField="Region"/>
<mx:AdvancedDataGridColumndataField="Territory_Rep"

headerText="Territory Rep"/>
<mx:AdvancedDataGridColumndataField="Actual"/>
<mx:AdvancedDataGridColumndataField="Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
运行示例

显示分层XML数据
前面章节的示例中使用ArrayCollection来创建AdvancedDataGrid控件。您也可以使用分层XML数据来创建AdvancedDataGrid控件。以下示例修改前面章节的数据格式化为XML，然后将数据传递给AdvancedDataGrid控件：
<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
importmx.collections.HierarchicalData;
importmx.collections.XMLListCollection;
]]>
</mx:Script>
<mx:XMLListid="dpHierarchyXML">
<RegionRegion="Southwest">
<RegionRegion="Arizona">
<Territory_RepTerritory_Rep="Barbara Jennings"

Actual="38865"Estimate="40000"/>
<Territory_RepTerritory_Rep="Dana Binn"

Actual="29885"Estimate="30000"/>
</Region>
<RegionRegion="CentralCalifornia">
<Territory_RepTerritory_Rep="Joe Smith"

Actual="29134"Estimate="30000"/>
</Region>
<RegionRegion="Nevada">
<Territory_RepTerritory_Rep="Bethany Pittman"

Actual="52888"Estimate="45000"/>
</Region>
<RegionRegion="NorthernCalifornia">
<Territory_RepTerritory_Rep="Lauren Ipsum"

Actual="38805"Estimate="40000"/>
<Territory_RepTerritory_Rep="T.R. Smith"

Actual="55498"Estimate="40000"/>
</Region>
<RegionRegion="SouthernCalifornia">
<Territory_RepTerritory_Rep="Alice Treu"

Actual="44985"Estimate="45000"/>
<Territory_RepTerritory_Rep="Jane Grove"

Actual="44913"Estimate="45000"/>
</Region>
</Region>
</mx:XMLList>
<mx:AdvancedDataGridwidth="100%"height="100%"
dataProvider="{new HierarchicalData(dpHierarchyXML)}">
<mx:columns>
<mx:AdvancedDataGridColumndataField="@Region"

headerText="Region"/>
<mx:AdvancedDataGridColumndataField="@Territory_Rep"

headerText="Territory Rep"/>
<mx:AdvancedDataGridColumndataField="@Actual"

headerText="Actual"/>
<mx:AdvancedDataGridColumndataField="@Estimate"

headerText="Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
运行示例
显示分组数据
分组数据是组织为同一层次以在AdvancedDataGrid控件中显示的扁平数据。要分组您的数据，您要指定一个更多的字段来将数据归集为同一层次下。
要使用分组数据来生成AdvancedDataGrid控件，您需要从您的扁平数据中创建一个GroupingCollection类的实例，然后将该GroupingCollection实例作为数据源传递给AdvancedDataGrid控件。当年从扁平数据创建一个GroupingCollection类的实例时，您需要指定数据中的那些字段用于创建层次。
本节中大部份示例使用如下扁平数据来创建GroupingCollection类的实例：
[Bindable]
private var dpFlat:ArrayCollection = newArrayCollection([
{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}
]);
以下示例使用该数据：
<?xmlversion="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
importmx.collections.ArrayCollection;
include "SimpleFlatData.as"
]]>
</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>
运行示例

上面的示例中使用俩个字段来分组数据：Region和Territory。
GroupingCollection实例实际上基于这些字段重新格式化数据以作为GroupingCollection实例的内部数据表示，如下所示：
[{GroupLabel:"Southwest",children:[
{GroupLabel:"Arizona", children:[
{Region:"Southwest",Territory:"Arizona",
Territory_Rep:"BarbaraJennings", Actual:38865,Estimate:40000},
{Region:"Southwest",Territory:"Arizona",
Territory_Rep:"DanaBinn", Actual:29885, Estimate:30000}]}
{GroupLabel:"Central California", children:[
{Region:"Southwest",Territory:"Central California",
Territory_Rep:"JoeSmith", Actual:29134, Estimate:30000}]}
{GroupLabel:"Nevada", children:[
{Region:"Southwest",Territory:"Nevada",
Territory_Rep:"BethanyPittman", Actual:52888,Estimate:45000}]}
{GroupLabel:"Northern California", children:[
{Region:"Southwest",Territory:"Northern California",
Territory_Rep:"LaurenIpsum", Actual:38805, Estimate:40000},
{Region:"Southwest",Territory:"Northern California",
Territory_Rep:"T.R.Smith", Actual:55498, Estimate:40000}]}
{GroupLabel:"Southern California", children:[
{Region:"Southwest",Territory:"Southern California",
Territory_Rep:"AliceTreu", Actual:44985, Estimate:45000},
{Region:"Southwest",Territory:"Southern California",
Territory_Rep:"JaneGrove", Actual:44913, Estimate:45000}]}
]}]
注意该表示的为基于扁平数据的Region和Territory字段的数据分层结构，该GroupingCollection实例同样包含输入的扁平数据的原始行，但是这些行被基于分组字段组织为分层结构。缺省的被用来从扁平数据创建层次结构的数据字段名是GroupLabel。您可以使用Grouping.label属性来指定不同的名字。
AdvancedDataGrid控件使用GroupLabel字段定义导航树分支节点的标签。AdvancedDataGrid控件的第一列同样与Region字段相对应。所以导航树使用Region字段来定义树叶子节点的标签。
grouping属性是GroupingCollection类的缺省MXML属性，所以您可以如下重写前面的示例：
<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
importmx.collections.ArrayCollection;
include"SimpleFlatData.as"
]]>
</mx:Script>
<mx:AdvancedDataGridid="myADG"
width="100%"height="100%"
initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollectionid="gc"source="{dpFlat}">
<mx:grouping>
<mx:GroupingFieldname="Region"/>
<mx:GroupingFieldname="Territory"/>
</mx:grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumndataField="Region"/>
<mx:AdvancedDataGridColumndataField="Territory"/>
<mx:AdvancedDataGridColumndataField="Territory_Rep"

headerText="Territory Rep"/>
<mx:AdvancedDataGridColumndataField="Actual"/>
<mx:AdvancedDataGridColumndataField="Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
调用GroupingCollection.refresh()方法
GroupingCollection.refresh()方法将GroupingCollection类的设置应用到数据中。您必须在任何时候您通过设置GroupingCollection类的grouping、 source或summaries属性修改了GroupingCollection类时调用该方法。
为GroupLabel字段创建列
显示分组数据时可选地可以为分组字段生成的顶层条目创建一个单独列。例如，您使用Region和Territory字段来对扁平数据进行分组，这些字段被作为分支节点的标签显示在导航树上，所以您为这些列省去了单独的列，如下所示：
以下代码创建该示例。注意该示例为GroupLabel字段包含了一个AdvancedDataGridColumn实例。对于Region和Territory没有定义列：
<?xmlversion="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
importmx.collections.ArrayCollection;
include "SimpleFlatData.as";
]]>
</mx:Script>
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
defaultLeafIcon="{null}"
initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollection id="gc" source="{dpFlat}">
<mx:Grouping>
<mx:GroupingField name="Region"/>
<mx:GroupingField name="Territory"/>
</mx:Grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="GroupLabel"
headerText="Region/Territory"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
运行示例

在ActionScript中创建分组
前面章节的示例我们使用的是MXML来创建分组，然而，您可能想让用户实时定义分组。以下示例通过事件处理器在ActionScript中创建分组：
<?xmlversion="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical">
<mx:Script>
<![CDATA[
importmx.collections.GroupingField;
importmx.collections.Grouping;
importmx.collections.GroupingCollection;
importmx.collections.ArrayCollection;
include "SimpleFlatData.as";
[Bindable]
publicvar myGColl:GroupingCollection = newGroupingCollection();
privatevar myGrp:Grouping = new Grouping();
privatefunction initDG():void{
// Initialize the GroupingCollection instance.
myGColl.source = dpFlat;
// The Grouping instance defines the grouping fields
// in the collection, and the order of the groups
// in the hierarchy.
myGrp.fields =

[new GroupingField("Region"),new GroupingField("Territory")];
// The grouping property contains a Grouping instance.
myGColl.grouping = myGrp;
// Specify the GroupedCollection as the data provider for
// the AdvancedDataGrid control.
myADG.dataProvider=myGColl;
// Refresh the display.
myGColl.refresh();
}
]]>
</mx:Script>
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
creationComplete="initDG();">
<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>
运行示例