AdvancedDataGrid多表头与树形表格（数据统计）

<?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">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]
			private var dpData:ArrayCollection = new ArrayCollection([{Region: "Southwest",
						 Territory: "Arizona",
						 Territory_Rep: "Barbara Jennings", Estimate: 40000,
						 Actual: 38865},
					 {Region: "Southwest", Territory: "Arizona",
						 Territory_Rep: "Dana Binn", Estimate: 30000,
						 Actual: 29885},
					 {Region: "Southwest", Territory: "Central California",
						 Territory_Rep: "Joe Schmoe", Estimate: 30000,
						 Actual: 29134},
					 {Region: "Southwest", Territory: "Northern California",
						 Territory_Rep: "Lauren Ipsum", Estimate: 40000,
						 Actual: 38805},
					 {Region: "Southwest", Territory: "Northern California",
						 Territory_Rep: "T.R. Smith", Estimate: 40000,
						 Actual: 55498},
					 {Region: "Southwest", Territory: "Southern California",
						 Territory_Rep: "Jane Grove", Estimate: 45000,
						 Actual: 44913},
					 {Region: "Southwest", Territory: "Southern California",
						 Territory_Rep: "Alice Treu", Estimate: 45000,
						 Actual: 44985},
					 {Region: "Southwest", Territory: "Nevada",
						 Territory_Rep: "Bethany Pittman", Estimate: 45000,
						 Actual: 52888}]);
		]]>
	</fx:Script>
	<mx:AdvancedDataGrid id="myADG"
						 initialize="gc.refresh()"
						 width="500"
						 height="400"
						 x="10"
						 y="10">
		<mx:dataProvider>
			<mx:GroupingCollection2 id="gc"
									source="{dpData}">
				<mx:grouping>
					<mx:Grouping>
						<mx:GroupingField name="Region"/>
						<mx:GroupingField name="Territory"/>
					</mx:Grouping>
				</mx:grouping>
			</mx:GroupingCollection2>
		</mx:dataProvider>
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"/>
			<mx:AdvancedDataGridColumnGroup headerText="Sales Figures"
											textAlign="center">
				<mx:AdvancedDataGridColumn headerText="Estimate"
										   textAlign="center"
										   dataField="Estimate"
										   width="100"/>
				<mx:AdvancedDataGridColumn headerText="Actual"
										   textAlign="center"
										   dataField="Actual"
										   width="100"/>
			</mx:AdvancedDataGridColumnGroup>
		</mx:groupedColumns>
	</mx:AdvancedDataGrid>
</s:Application>

 注意：在AdvancedDataGrid的初始化回调函数里一定要刷新一下数据提供器，否则无法显示出数据（当然也可以在creationComplete里刷新）
 

以上是最基本的分组数据表格，大多数时候客户会要求我们为分组增加数据统计，我可不想自己去算，当然AdvancedDataGrid也提供了这样的功能

添加数据统计需要修改GroupingCollection对象

我们可以为全部数据添加统计

 

<mx:GroupingCollection2 id="gc" source="{dpData}">
	<mx:Grouping>
		<mx:GroupingField name="Region">
		</mx:GroupingField>
		<mx:GroupingField name="Territory">
		</mx:GroupingField>
	</mx:Grouping>
	<mx:summaries>
		<mx:SummaryRow>
			<mx:SummaryField2 dataField="Estimate"/>
			<mx:SummaryField2 dataField="Actual"/>
		</mx:SummaryRow>
	</mx:summaries>
</mx:GroupingCollection2>

 也可以为每个分组添加统计

 

<mx:GroupingCollection2 id="gc" source="{dpData}">
	<mx:Grouping>
		<mx:GroupingField name="Region"/>
		<mx:GroupingField name="Territory">
			<mx:summaries>
				<mx:SummaryRow>
					<mx:SummaryField2 dataField="Estimate"/>
					<mx:SummaryField2 dataField="Actual"/>
				</mx:SummaryRow>
			</mx:summaries>
		</mx:GroupingField>
	</mx:Grouping>
</mx:GroupingCollection2>

(⊙o⊙)…统计行没有文字说明啊，别人怎么知道这数据代表什么含义啊！！！好吧，我们在前面的空白单元格里加一个文字说明

 

<mx:SummaryRow summaryObjectFunction="{function():Object{return {Territory_Rep: 'Total >>'};}}">
	<mx:SummaryField2 dataField="Estimate"/>
	<mx:SummaryField2 dataField="Actual"/>
</mx:SummaryRow>

 恩，这样就有所区别的，在这里我为SummaryRow的summaryObjectFunction指定了一个匿名方法，当然也可以写一个实名方法，我偷个懒了，哈哈。至于为什么要这么写，之后会说到。

默认情况下统计数据被添加到分组的最后一行，当然也可以添加到其他地方，通过SummaryRow的summaryPlacement（String类型）属性指定，有效地值有："first", "last", "group"

（1）"first" 将统计数据作为分组的第一行

<mx:SummaryRow summaryPlacement="first" summaryObjectFunction="{function():Object{return {Territory_Rep: 'Total >>'};}}">
	<mx:SummaryField2 dataField="Estimate"/>
	<mx:SummaryField2 dataField="Actual"/>
</mx:SummaryRow>

（2）"last" 将统计数据作为分组的最后一行，默认值就是它

（3）"group" 将统计数据放到分组行中，(⊙o⊙)…这个该怎么表述才容易理解呢？还是自己看效果吧。

 代码自己改下吧 summaryPlacement="group"。不过郁闷的是，Total几个字不见了，好吧，暂时先无视它，一会儿再说。
（4）什么？你说数据太多，显示一个统计不够，看统计，页面还要滚来滚去？好吧，满足你，能写的都给你写上，你要是非要把统计信息显示到状态栏上，那我就没办法了。

 

<mx:SummaryRow summaryPlacement="first group last" summaryObjectFunction="{function():Object{return {Territory_Rep: 'Total >>'};}}">

 SummaryRow还有2个属性：itemCreationPolicy（项目创建时机）和itemDestructionPolicy（项目销毁时机）

（1）itemCreationPolicy
•deferred(默认) – 直至切换到包含当前组件的状态时才创建
•immediate – 立即创建组件，而不管当前的状态如何

（2）itemDestructionPolicy
•never (默认) － 组件一旦创建就不会被自动销毁
•auto – 当离开包含该组件的状态时，组件将被自动销毁
我觉着吧，用默认值挺好的，如非特殊用途，就不要改了。

（话说这两个属性不论在FlashBuilder的ASDoc还是Flex4API中都没有找到，这是什么情况）

至此，SummaryRow基本上学习完了，接下来看看它的fields子元素SummaryField吧（问：什么，你刚刚没说fields啊？答：好吧，SummaryRow有个默认MXML属性叫做fields，至于什么是默认MXML属性，这个...咱们还是看SummaryField吧）

一个SummaryField2表示一个统计列。

<mx:SummaryField2 dataField="Estimate"/>

 dataField属性指定了要统计的列名，默认情况下会显示到指定的列中

（问：什么，还能显示到别的列上？答：试试呗...）这里就要提到一个概念了，嘿嘿，我的理解而已，理解错了表打我....

SummaryRow实际上是为每个分组生成一个统计数据对象（Object），并将这个对象添加到对应分组，作为它的子节点（在初始化时我们提供的平面数据已经被转换成树形数据了，当然我们也可以直接为AdvancedDataGrid提供树形数据）。

现在来逐步分析一下这个统计对象是如何生成的。SummaryRow默认创建一个空的Object对象{}，若我们为它指定了summaryObjectFunction属性，那么就调用这个方法创建一个Object对象，在上面的例子中，这个对象是{Territory_Rep: 'Total >>'}，接下来，SummaryRow会根据它内部的每一个SummaryField生成一个键:值对，并把它们作为自己的属性。由于我们定义了2个SummaryField2，所以数据对象将变成：

{Territory_Rep: 'Total >>', Estimate:XXXXX, Actual:XXXXX}

XXXX代表计算的结果值，统计的列就是dataField值所指定了列，这个对象的数据也会根据每个属性的属性名，显示在对应列上。

在这里我们只使用了SummaryField2的dataField这一个属性，所以程序默认会以列名作为Key以便数据能正确地显示在相应列上。那么问题来了，如果我不想把数据显示在原本列上，而是想显示在一个新的列上怎么办呢（虽然我不知道这么做有什么意义，不过谁知道有没有哪个变态客户就提出这么个变态要求呢...）？ 

<mx:SummaryField2 label="EstTotal" dataField="Estimate"/>

 请注意SummaryField2有个label属性。事实上一开始我根本没看懂ASDoc上对这个属性的解释是什么含义，（好吧，我的英文真的很烂，以至于现在还没过四级，不过这并不妨碍我看全英文的Flex4Cookbook....的代码）不过经过一番试验，我就有了结论。label属性实际上就是指定这个统计值的属性名的，也就是上面说到的Key。它生成的对象将是：

{Territory_Rep: 'Total >>', EstTotal:XXXXX}

当然你会发现这个结果无法在Grid中显示出来了，那么如何让它显示出来呢？

<mx:AdvancedDataGridColumn dataField="EstTotal"/>

 只需给Grid增加一个列即可

 看吧，统计值显示出来了。

 哦，对了，最后还剩一个summaryOperation属性，代表要执行的统计操作，默认是汇总（SUM），有效值包括：

SUM, MIN, MAX, AVG, COUNT

不多解释，一般人都能看懂。好了，这是我学习了半个下午的成果，用了更多的时间给写下来... 

 

评论

6 楼 li_shou_lu 2013-07-18  

如果不是数据，该如何显示？

5 楼 li_shou_lu 2013-07-18  

是不是flex的版本不一致的问题。。还是。。。？
求解啊。。大神啊

4 楼 li_shou_lu 2013-07-18  

我刚学的。为什么我这个直接不能运行呢。。？
就文件头都报错了。

3 楼 heraleign 2012-08-21  

非常强大，并且楼主说得简明易懂！谢谢，这样的高手很多，讲得这样清楚的人不多！

2 楼 pyleaf 2012-01-11  

蓝月儿 写道

好，我初学者，想同时获取分组名和列名的组合，该怎么循环呢，例如，得到Sales Figures（Estimate）。

抱歉了，很久没来这看。
几个月没有碰Flex，基本上忘光了。我也是在学习的过程中写的文章，也并没有深入探究。

1 楼 蓝月儿 2011-11-30  

好，我初学者，想同时获取分组名和列名的组合，该怎么循环呢，例如，得到Sales Figures（Estimate）。