Flex Collapsible DataGrid

Flex Collapsible DataGrid

Flex 3 AdvancedDataGrid 具有 Tree 與 跨欄 (columnSpan) 的功能
以下利用這兩種特性做出可收合的 DataGrid

MyDataGridGroupItemRenderer Class：

view plain |  copy to clipboard |  print |  ? | 

∙∙∙∙∙∙∙∙∙10∙∙∙∙∙∙∙∙20∙∙∙∙∙∙∙∙30∙∙∙∙∙∙∙∙40∙∙∙∙∙∙∙∙50∙∙∙∙∙∙∙∙60∙∙∙∙∙∙∙∙70∙∙∙∙∙∙∙∙80∙∙∙∙∙∙∙∙90∙∙∙∙∙∙∙∙100∙∙∙∙∙∙∙110∙∙∙∙∙∙∙120∙∙∙∙∙∙∙130∙∙∙∙∙∙∙140∙∙∙∙∙∙∙150

1. package com.ticore.uicomponents {
2.  import mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer;
3.  
4.  public class MyDataGridGroupItemRenderer extends AdvancedDataGridGroupItemRenderer {
5.    
6.   public function MyDataGridGroupItemRenderer() {
7.    super();
8.   }
9.   override protected function updateDisplayList(
10.      unscaledWidth:Number, unscaledHeight:Number):void {
11.    
12.    super.updateDisplayList(unscaledWidth, unscaledHeight);
13.    
14.    this.graphics.clear();
15.    this.graphics.lineStyle(1, 0x808080, 1, true);
16.    this.graphics.drawRect(-1, -1, unscaledWidth + 1, unscaledHeight);
17.   }
18.   
19.  }
20. }

Flex MXML Code：

view plain |  copy to clipboard |  print |  ? | 

∙∙∙∙∙∙∙∙∙10∙∙∙∙∙∙∙∙20∙∙∙∙∙∙∙∙30∙∙∙∙∙∙∙∙40∙∙∙∙∙∙∙∙50∙∙∙∙∙∙∙∙60∙∙∙∙∙∙∙∙70∙∙∙∙∙∙∙∙80∙∙∙∙∙∙∙∙90∙∙∙∙∙∙∙∙100∙∙∙∙∙∙∙110∙∙∙∙∙∙∙120∙∙∙∙∙∙∙130∙∙∙∙∙∙∙140∙∙∙∙∙∙∙150

1. <?xml version="1.0"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#E0E0E0">
3.  <mx:Script><![CDATA[
4.    import mx.controls.advancedDataGridClasses.*;
5.    import mx.collections.ArrayCollection;
6.             
7.    [Bindable]
8.    private var dpHierarchy:ArrayCollection = new ArrayCollection([
9.     {Region:"Arizona", children: [
10.      {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
11.      {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
12.     {Region:"Central California", children: [
13.      {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
14.     {Region:"Nevada", children: [
15.      {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
16.     {Region:"Northern California", children: [
17.      {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
18.      {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
19.     {Region:"Southern California", children: [
20.      {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
21.      {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
22.     ]);
23.    
24.    public function groupLabelFunction(item:Object, column:AdvancedDataGridColumn):String{
25.     if (item && item.children) {
26.      return item[column.dataField] + " (" + item.children.length + ")";
27.     } else {
28.      return item[column.dataField];
29.     }
30.    }
31.   ]]>
32.  </mx:Script><mx:AdvancedDataGrid id="myADG" width="100%" height="100%"
33.     rowHeight="24" headerHeight="24" fontSize="12" displayItemsExpanded="true"
34.     paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0"
35.     folderClosedIcon="{null}" folderOpenIcon="{null}" defaultLeafIcon="{null}" >
36.   <mx:dataProvider>
37.       <mx:HierarchicalData source="{dpHierarchy}" />
38.   </mx:dataProvider>
39.   <mx:rendererProviders>
40.       <mx:AdvancedDataGridRendererProvider columnIndex="0" columnSpan="4" dataField="Region"
41.      renderer="com.ticore.uicomponents.MyDataGridGroupItemRenderer" />
42.       <mx:AdvancedDataGridRendererProvider dataField="Territory_Rep"
43.      renderer="mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer" />
44.      </mx:rendererProviders>
45.   <mx:groupedColumns>
46.    <mx:AdvancedDataGridColumn id="col1" dataField="Region" width="20"
47.       labelFunction="groupLabelFunction" />
48.    <mx:AdvancedDataGridColumn id="col2" dataField="Territory_Rep"/>
49.    <mx:AdvancedDataGridColumn dataField="Actual"/>
50.    <mx:AdvancedDataGridColumn dataField="Estimate"/>
51.   </mx:groupedColumns>
52.  </mx:AdvancedDataGrid>
53. </mx:Application>
54. <!-- Ticore's Blog - http://ticore.blogspot.com/ -->

Online Demo：

轉載請註明出處  http://ticore.blogspot.com/2008/04/flex-collapsible-datagrid.html