Flex AdvancedDataGrid组件中HierarchicalData的使用

HierarchicalData顾名思义就是层次结构数据。Flex中的AdvancedDataGrid主要也是用来处理这样的一个问题。在本文中我们抛开AdvancedDataGrid和DataGrid的使用细节不谈,单从数据源的结构上来分析下HierarchicalData。

 

首先请看我需要实现的效果:                2010081714162165.jpg

 

总体上我是要实现一个数据集并处理有区域下钻的问题。下面来看下我的数据源配置:

   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中的高级组件编写部分。

转载于:https://www.cnblogs.com/jacku/articles/1801481.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值