Flex4 DataGrid、AdvancedDataGrid与Tree结合使用

Flex4中，将Tree控件插入到DataGrid中展示，可以看到非常炫的效果。其实平常看到的并不是DataGrid控件而是AdvancedDataGrid控件。使用AdvancedDataGrid将Tree控件放到其中使用，大概有两种方法，这里只介绍其中一种，还有一种方法是设置HierarchicalData为advancedDataGird的dataProvider，然后advancedDataGird.validateNow()，然后设置advancedDataGird的expandItem，这种方法还在学习当中。

参考网址：

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/AdvancedDataGrid.html

效果图如下：

 

源代码：

<?xml version="1.0"?>

<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 dpFlat:ArrayCollection = new ArrayCollection([

              {Region:"Southwest", Territory:"Arizona",

                  Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},

              {Region:"Southwest", Territory:"Arizona",

                  Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}, 

              {Region:"Southwest", Territory:"Central California",

                  Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}, 

              {Region:"Southwest", Territory:"Nevada",

                  Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}, 

              {Region:"Southwest2", Territory:"Northern California",

                  Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},

              {Region:"Southwest2", Territory:"Northern California",

                  Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}, 

              {Region:"Southwest2", Territory:"Southern California",

                  Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},

              {Region:"Southwest2", Territory:"Southern California",

                  Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}

           ]);

       ]]>

    </fx:Script>

   

    <mx:Panel title="AdvancedDataGrid Control Example"

             height="75%" width="75%" layout="horizontal"

             paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

      

       <!--treeColumn={colID}可以在AdvancedDataGrid指定tree在哪里显示，默认为第一列-->

       <mx:AdvancedDataGrid id="myADG"

                          width="100%" height="100%"                     

                          initialize="gc.refresh();">       

           <mx:dataProvider>

              <mx:GroupingCollection2 id="gc" source="{dpFlat}">

                  <mx:grouping>

                     <mx:Grouping>

                         <!--先以具有相同Region属性的对象为节点进行分组，

                         然后以具有相同Territory属性的对象为节点进行分组-->

                         <mx:GroupingField name="Region"/>

                         <mx:GroupingField name="Territory"/>

                     </mx:Grouping>

                  </mx:grouping>

              </mx:GroupingCollection2>

           </mx:dataProvider>       

          

           <mx:columns>

              <!--如果该列为tree的显示列，那么dataField为tree最后节点的值-->

              <mx:AdvancedDataGridColumn dataField="Territory_Rep"

                                      headerText="Region"/>

              <mx:AdvancedDataGridColumn dataField="Territory" />

              <mx:AdvancedDataGridColumn dataField="Territory_Rep"

                                      headerText="Territory Rep"/>

              <mx:AdvancedDataGridColumn dataField="Actual"/>

              <mx:AdvancedDataGridColumn dataField="Estimate"/>

           </mx:columns>

       </mx:AdvancedDataGrid>

    </mx:Panel>

   

</s:Application>