<?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
不多解释,一般人都能看懂。好了,这是我学习了半个下午的成果,用了更多的时间给写下来...
- 大小: 9.5 KB
- 大小: 1.5 KB
- 大小: 9.5 KB
- 大小: 1.8 KB
- 大小: 2.7 KB
- 大小: 3 KB
- 大小: 3.3 KB
- 大小: 5.3 KB
分享到:
相关推荐
Flex应用3D饼图,柱图线图,仪表盘,AdvancedDataGrid表头皮肤,分数较高,不建议下载,仅自己保留
功能:主要根据用户自定义的宾栏,也就是HeaderTitle部份是多层分组的,当用户预览后,点击导出,所见即所得。(备注:包括表头部份,和表尾部份)
非常好用的 felx AdvancedDataGrid 多选框 单选框支持渲染器,不需改到AdvancedDataGrid 代码; 支持 xml 数据源的网上可查到一些, 但这个可是 支持 Array 类型数据源的。
将复杂表头的AdvancedDataGrid导出EXCEL
flex AdvancedDataGrid 动态添加一行 动态为控制树添加一个节点
AdvancedDataGrid或datagrid导出到excel.rar AdvancedDataGrid或datagrid导出到excel.rar AdvancedDataGrid或datagrid导出到excel.rar
最新的AdvancedDataGrid行嵌套AdvancedDataGrid实现,该例子只是实现AdvancedDataGrid利用AdvancedDataGridRendererProvider在行中渲染另外一个AdvancedDataGrid,当然也可以渲染其它任何想渲染的界面或者组件,价值...
AdvancedDataGrid综合应用
AdvancedDataGrid导出复杂表头excel
Flex技术中AdvancedDataGrid使用方法
flex advancedDataGrid 中如何实现带checkbox的树
AdvancedDataGrid控制具体某个单元格可编辑的例子,里面实现了原理,具体如何实现可视判断条件而定,因为自己也是很辛苦实现的,所以分就高点了,别介意,哈哈
带多选框的DataGrid(AdvancedDataGrid) 表头有全选CheckBox,三种状态:全选、部分选择、无选择 如果改变目录结构,需要在CustomCheckBox.mxml中更改inner.png的路径 使用方法参考“示例参考.txt” --------------...
NULL 博文链接:https://guangqiang.iteye.com/blog/835316
flex datavisualization.swc flex 3 AdvancedDataGrid
advancedDataGrid单击逐级展开的例子,单击advanceddatagrid的某一级,就会展开该节点。
flex-datagrid-advancedDataGrid-demo,做的datagrid及advanceddatagrid的例子,希望大家喜欢