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

Homepage » 程序人生 » Flex 3 发现之旅:AdvancedDataGrid的使用(第三部分)

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

By feiy + 6月 23rd, 2007 + Tags:AdvancedDataGrid, Flex, Flex3, Moxie

继续第二部分，我们继续来讲AdvancedDataGrid的使用。您可以使用GroupingField类的summaries属性来创建分组数据的汇总数据，然后您可以将汇总数据与原来数据显示同一行中，也可以将其显示在单独一行中…

继续第二部分，我们继续来讲AdvancedDataGrid的使用。

创建汇总行

您可以使用GroupingField类的summaries属性来创建分组数据的汇总数据，然后您可以将汇总数据与原来数据显示同一行中，也可以将其显示在单独一行中。

以下示例中，AdvancedDataGrid控件显示了两个汇总字段，Min Actual和Max Actual：

顶部行的Min Actual和Max Actual字段对应分组中所有行的汇总，而每个Territory的Min Actual和Max Actual字段对应该Territory子组中所有行的汇总。

以下是实际代码：

[xml]
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.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:GroupingField name="Region">
						<mx:summaries>
							<mx:SummaryRow summaryPlacement="group">
								<mx:fields>
									<mx:SummaryField dataField="Actual"
										label="Min Actual" operation="MIN"/>
									<mx:SummaryField dataField="Actual"
										label="Max Actual" operation="MAX"/>
								</mx:fields>
							</mx:SummaryRow>
						</mx:summaries>
					</mx:GroupingField>
					<mx:GroupingField name="Territory">
						<mx:summaries>
							<mx:SummaryRow summaryPlacement="group">
								<mx:fields>
									<mx:SummaryField dataField="Actual"
										label="Min Actual" operation="MIN"/>
									<mx:SummaryField dataField="Actual"
										label="Max Actual" operation="MAX"/>
								</mx:fields>
							</mx:SummaryRow>
						</mx:summaries>
					</mx:GroupingField>
				</mx:Grouping>
			</mx:GroupingCollection>
		</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:AdvancedDataGridColumn dataField="Min Actual"/>
			<mx:AdvancedDataGridColumn dataField="Max Actual"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

运行示例

注意在该示例中，我们将GroupingField.summaries属性指定为SummaryRow实例。SummaryRow包含数据汇总的所有信息。例如，我们使用SummaryRow的summaryPlacement属性来将汇总数据添加到分组数据中。可选的，您也可以增加一个新行来存放汇总数据。更多信息请查看“指定汇总数据存放位置“。

每个SummaryRow实例指定一个或多个用来创建数据汇总的SummayField实例。例如，您可以使用SummayField的dataField属性来指定对Actual数据字段进行汇总,label属性用于指明存放汇总数据的数据字段的名称，而operation属性用于指定如何对数值字段几行汇总，您可以使用以下任一值：SUM、MIN、 MAX、AVG或COUNT。

加上了新的合计数据字段，在组件内部，代表分组数据的GroupingCollection其内容如下所示：

[java]
[{GroupLabel:"Southwest", Max Actual:55498, Min Actual:29134, children:[
	{GroupLabel:"Arizona", Max Actual:38865, Min Actual:29885, children:[
		{Region:"Southwest", Territory:"Arizona",
			Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
		{Region:"Southwest", Territory:"Arizona",
			Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]}
	{GroupLabel:"Central California", Max Actual:29134, Min Actual:29134,children:[
		{Region:"Southwest", Territory:"Central California",
			Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]}
	{GroupLabel:"Nevada", Max Actual:52888, Min Actual:52888, children:[
		{Region:"Southwest", Territory:"Nevada",
			Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]}
	{GroupLabel:"Northern California", Max Actual:55498, Min Actual:38805,children:[
		{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}]}
	{GroupLabel:"Southern California", Max Actual:44985, Min Actual:44913,children:[
		{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}]}
]}]

使用GroupingField和SummaryRow类的缺省属性

GroupingField.summaries属性是GroupingField的缺省属性，而SummaryRow.fields属性是 SummaryRow类的缺省属性；因此，您可以在您的代码中省略这些属性而重写前面的示例，如下所示：

[xml]
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.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:GroupingField name="Region">
						<mx:SummaryRow summaryPlacement="group">
							<mx:SummaryField operation="MIN"
								dataField="Actual" label="Min Actual"/>
							<mx:SummaryField operation="MAX"
								dataField="Actual" label="Max Actual"/>
							</mx:SummaryRow>
						</mx:GroupingField>
						<mx:GroupingField name="Territory">
							<mx:SummaryRow summaryPlacement="group">
								<mx:SummaryField operation="MIN"
									dataField="Actual" label="Min Actual"/>
								<mx:SummaryField operation="MAX"
									dataField="Actual" label="Max Actual"/>
							</mx:SummaryRow>
						</mx:GroupingField>
				</mx:Grouping>
			</mx:GroupingCollection>
		</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:AdvancedDataGridColumn dataField="Min Actual"/>
			<mx:AdvancedDataGridColumn dataField="Max Actual"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

指定汇总数据存放位置

SummaryRow类包含一个summaryPlacement属性用于决定在AdvancedDataGrid控件的那里显示汇总数据。summaryPlacement属性允许的值如下：

first 在分组的第一行创建汇总行。
last 在分组的最后一行创建汇总行。
group 将合计数据添加到对应的分组中。

在前面的“创建汇总中”小节中的示例已经演示了通过指定summaryPlacement属性值为group来将汇总数据添加到分组中。以下示例，使用相同的分组数据但是其summaryPlacement属性设置的是last：

您可以指定多个值给summaryPlacement属性，通过空格分隔，例如，指定“last group”这样的值表示同时在分组级别和分组的末行显示汇总数据。

这样，加上了新的合计数据字段，在组件内部，代表分组数据的GroupingCollection其内容如下所示：

[java]
[{GroupLabel:"Southwest", children:[
	{GroupLabel:"Arizona", children:[
		{Region:"Southwest", Territory:"Arizona",
			Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
		{Region:"Southwest", Territory:"Arizona",
			Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
		{Max Actual:38865, Min Actual:29885}]}
	{GroupLabel:"Central California", children:[
		{Region:"Southwest", Territory:"Central California",
			Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
		{Max Actual:29134, Min Actual:29134}]}
	{GroupLabel:"Nevada", children:[
		{Region:"Southwest", Territory:"Nevada",
			Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
		{Max Actual:52888, Min Actual:52888}]}
	{GroupLabel:"Northern California", children:[
		{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},
		{Max Actual:55498, Min Actual:38805}]}
	{GroupLabel:"Southern California", children:[
		{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},
		{Max Actual:44985, Min Actual:44913}]}
	{Max Actual:55498, Min Actual:29134}
]}]

注意，在整个组中添加了一个新行用于存放汇总数据，而且每个子组都添加了一个新行用于存放子组的汇总数据。

创建多个汇总

您可以在单个GroupingField实例中指定多个SummaryRow实例。在下面的示例中，我们定义如下字段为Region组创建汇总数据：Min Actual、Max
Actual、Min Estimate和Max Estimate：

[xml]
<?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 "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:GroupingField name="Region">
						<mx:SummaryRow summaryPlacement="group">
							<mx:SummaryField operation="MIN"
								dataField="Actual" label="Min Actual"/>
							<mx:SummaryField operation="MAX"
								dataField="Actual" label="Max Actual"/>
						</mx:SummaryRow>
						<mx:SummaryRow summaryPlacement="group">
							<mx:SummaryField operation="MIN"
								dataField="Estimate" label="Min Estimate"/>
							<mx:SummaryField operation="MAX"
								dataField="Estimate" label="Max Estimate"/>
						</mx:SummaryRow>
					</mx:GroupingField>
					<mx:GroupingField name="Territory"/>
				</mx:Grouping>
			</mx:GroupingCollection>
		</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:AdvancedDataGridColumn dataField="Min Actual"/>
			<mx:AdvancedDataGridColumn dataField="Max Actual"/>
			<mx:AdvancedDataGridColumn dataField="Min Estimate"/>
			<mx:AdvancedDataGridColumn dataField="Max Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

运行示例

创建列分组

您可以使用列分组将多列归集到一个单一列表头下，如下所示：

在该示例中，您可以提供给数据表格以扁平数据，然后对Actual和Estimate列归组到一个单一的名称为Revenues的列中。

要在一个AdvancedDataGrid控件中进行列分组，您必须如下做：

使用AdvancedDataGrid.groupedColumns属性而不是AdvancedDataGrid.columns属性来标识列。
使用AdvancedDataGridColumnGroup来指定分组。

下面是前面示意图中的AdvancedDataGrid控件的代码实现：

[xml]
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			include "SimpleFlatData.as";
		]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="myADG"
		dataProvider="{dpFlat}"
		width="100%" height="100%">
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn dataField="Territory"/>
			<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>

运行示例

groupedColumns属性包括AdvancedDataGridColumn类和AdvancedDataGridColumnGroup类的实例。AdvancedDataGridColumn类的实例在控件中显示为单独的一列。而所有在AdvancedDataGridColumnGroup实例中指定的列将作为已分组的列显示在一起。

您可以给控件添加多个分组，下面的示例增加名称为Area和Revenue的两个分组：

[xml]
<?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 "SimpleFlatData.as";
		]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="myADG"
		dataProvider="{dpFlat}"
		width="100%" height="100%">
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
				headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumnGroup headerText="Area">
				<mx:AdvancedDataGridColumn dataField="Region"/>
				<mx:AdvancedDataGridColumn dataField="Territory"/>
			</mx:AdvancedDataGridColumnGroup>
			<mx:AdvancedDataGridColumnGroup headerText="Revenues">
				<mx:AdvancedDataGridColumn dataField="Actual"/>
				<mx:AdvancedDataGridColumn dataField="Estimate"/>
			</mx:AdvancedDataGridColumnGroup>
		</mx:groupedColumns>
	</mx:AdvancedDataGrid>
</mx:Application>

运行示例

您还可以将分组嵌套以让一个分组列包含多个分组，如下所示：

[xml]
<?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 "SimpleFlatData.as";
		]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="myADG"
		dataProvider="{dpFlat}"
		width="100%" height="100%">
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
			headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumnGroup headerText="All Groups">
				<mx:AdvancedDataGridColumnGroup headerText="Area">
					<mx:AdvancedDataGridColumn dataField="Region"/>
					<mx:AdvancedDataGridColumn dataField="Territory"/>
				</mx:AdvancedDataGridColumnGroup>
				<mx:AdvancedDataGridColumnGroup headerText="Revenues">
					<mx:AdvancedDataGridColumn dataField="Actual"/>
					<mx:AdvancedDataGridColumn dataField="Estimate"/>
				</mx:AdvancedDataGridColumnGroup>
			</mx:AdvancedDataGridColumnGroup>
		</mx:groupedColumns>
	</mx:AdvancedDataGrid>
</mx:Application>

运行示例

在分组中拖放列

By default, you can drag the columns in a group within the group to reposition them. You can
also drag the entire group to reposition it in the AdvancedDataGrid control.

默认情况下，您可以拖动分组中的各列以在分组中重新放置它们。您也可以拖动整个分组以在AdvancedDataGrid控件中重新放置它们。

要禁用某一分组中所有列的拖动，设置AdvancedDataGridColumnGroup.childrenDragEnabled属性为false。要禁用单个列的拖动，设置AdvancedDataGridColumn.dragEnabled属性为false。

对分层数据进行列分组

和扁平数据一样，您使用分层数据进行列分组，以下例子修改自“为导航树创建单独的列“章节中的示例以将Actual和Estimates列归组到Revenues组列中：

[xml]
<?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：

[java]
[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]
<?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>

运行示例

未完待续…

O comments at "Flex 3 发现之旅:AdvancedDataGrid的使用(第三部分)"

Be the first commenter!

Comment Now!

Advertising:

Latest Posts

10月 7th, 2008
feiy

今天我们终于领证了

今天我们终于领证,今天是九九重阳节,正好我们的证结尾的号码也是99,嘿嘿,再也不用无证驾驶了! （猪头了�[...] Read the rest »

Woobuntu:一个漂亮的GDM Theme
10月 6th, 2008 | feiy
宝贝计划：我要做爸爸了
9月 27th, 2008 | feiy
两句妙语
9月 19th, 2008 | admin
AutoQueryTextInput：几个有用的Flex组件
9月 13th, 2008 | feiy
Baidu、Dict.cn和Flex Community Help搜索的Ubiquity命令
9月 9th, 2008 | feiy

闲云孤鹤 - 清冷香中抱膝吟 Labs