Flex AdvancedDataGrid组件中HierarchicalData的使用
HierarchicalData顾名思义就是层次结构数据。Flex中的AdvancedDataGrid主要也是用来处理这样的一个问题。在本文中我们抛开AdvancedDataGrid和DataGrid的使用细节不谈，单从数据源的结构上来分析下HierarchicalData。
首先请看我需要实现的效果： 
总体上我是要实现一个数据集并处理有区域下钻的问题。下面来看下我的数据源配置：
private var dp:ArrayCollection = new ArrayCollection([
{province : '上海' ,
rateOfRise : {targetValue : 300 , currentValue : 425 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:3.4,increase:15.9} , rateOfTotalUser:{currentValue:600 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])}, //此处为第一条无下钻的数据
{province : '江苏' ,
rateOfRise : {targetValue : 300 , currentValue : 307 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.4,increase:10.9} , rateOfTotalUser:{currentValue:130 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
]), //child部分为以上数据的child
child : new ArrayCollection([{province:'南京',rateOfRise : {targetValue : 300 , currentValue : 290 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.6,increase:10.4} , rateOfTotalUser:{currentValue:250 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])},
{province:'苏州',rateOfRise : {targetValue : 300 , currentValue : 325 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.6,increase:10.4} , rateOfTotalUser:{currentValue:250 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])},
{province:'无锡',rateOfRise : {targetValue : 300 , currentValue : 310 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.6,increase:10.4} , rateOfTotalUser:{currentValue:250 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])},
{province:'常州',rateOfRise : {targetValue : 300 , currentValue : 305 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.6,increase:10.4} , rateOfTotalUser:{currentValue:250 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])}])},
{province : '北京' ,
rateOfRise : {targetValue : 300 , currentValue : 379 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.0,increase:10.9} ,rateOfTotalUser:{currentValue:200 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])},
{province : '山东' ,
rateOfRise : {targetValue : 300 , currentValue : 365 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:3.0,increase:10.5} , rateOfTotalUser:{currentValue:80 , maxValue:1000} ,
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
]),
child : new ArrayCollection([{province:'青岛',rateOfRise : {targetValue : 300 , currentValue : 350 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.6,increase:10.4} , rateOfTotalUser:{currentValue:250 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])},
{province:'烟台',rateOfRise : {targetValue : 300 , currentValue : 375 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.6,increase:10.4} , rateOfTotalUser:{currentValue:250 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])},
{province:'济南',rateOfRise : {targetValue : 300 , currentValue : 380 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.6,increase:10.4} , rateOfTotalUser:{currentValue:250 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])},
{province:'淄博',rateOfRise : {targetValue : 300 , currentValue : 345 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.6,increase:10.4} , rateOfTotalUser:{currentValue:250 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])}])},
{province : '河北' ,
rateOfRise : {targetValue : 300 , currentValue : 320 , maxValue : 1000 ,ruleData : 7 , percent:[0,0.2,0.4,0.6,1],isReverse:true},
totalUser : {decrease:2.6,increase:10.4} , rateOfTotalUser:{currentValue:250 , maxValue:1000},
monthTransform : new ArrayCollection([
{ Month: "Jan", Profit: random, Expenses: random, Amount: random },
{ Month: "Feb", Profit: random, Expenses: random, Amount: random },
{ Month: "Mar", Profit: random, Expenses: random, Amount: random },
{ Month: "Apr", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
{ Month: "May", Profit: random, Expenses: random, Amount: random },
])}
]);
整体上数据格式就是一个，相信大家应该能看懂。在此其实使用单纯的DataGrid也可以实现一级显示，但是可惜的是在此数据源中有一个二级下钻的问题。所以不得不引入AdvancedDataGrid来解决这种层次结构的问题。官方列出的Grouping的确可以解决纯粹的二级下钻问题，但是还不能达到此显示效果。不知道什么原因我的AdvancedColumn中的渲染器在Grouping refresh之后就获取不到部分数据源。后来不得不重新寻找其他解决方法，当然最终就选择了HierarchicalData。至此我的二级菜单也可以正常显示。其中数据源配置部分设置如下：
<mx:AdvancedDataGrid id="myADG" width="100%" height="100%" color="0x323232">
<mx:dataProvider>
<mx:HierarchicalData id="hd" source="{dp}" childrenField="child"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="province" headerText="省份"/>
<mx:AdvancedDataGridColumn dataField="rateOfRise" itemRenderer="com.ai.test.renderer.AdvancedBulletRenderer" headerText="增长率"/>
<mx:AdvancedDataGridColumn dataField="monthTransform" itemRenderer="com.ai.test.renderer.AdvancedChangeInMonth" headerText="当月人数变化"/>
</mx:columns>
</mx:AdvancedDataGrid>
其中最重要的就是ChildrenField属性，这个是其最强大的数据处理功能。其能动态的分析你的childrenField中的数据格式，只要你的数据源格式和属性与其外层格式保持一致，其就能为你提供显示分析。关于渲染器中图表数据绑定以后准备继续写些教程，来讲一讲Flex中的高级组件编写部分。
浙公网安备 33010602011771号