Flex3 AdvancedDataGrid 树形结构展示数据

刺骨的言语ヽ痛彻心扉 2022-06-03 02:37 162阅读 0赞

代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    	xmlns:flexlib="http://code.google.com/p/flexlib/"
    	width="100%"
    	height="100%"
    	creationComplete="handleCreationComplete()">
    	<mx:Script>
            <![CDATA[
                import mx.collections.ArrayCollection;
                import mx.controls.Alert;
                
                [Bindable]
                private var dataProviderArrayCollection:ArrayCollection=new ArrayCollection([
                	{"name":"事件1","code":"1",
                	"children":new ArrayCollection([
                		{"name":"情景1","code":"情景1"},
                		{"name":"情景2","code":"情景2",
                		"children":new ArrayCollection([
                			{"name":"3情景1","code":"3情景1"},
                			{"name":"3情景2","code":"3情景2"}])}])},
                	{"name":"事件2","code":"2","children":new ArrayCollection([
                		{"name":"情景1","code":"情景1"},
                		{"name":"情景2","code":"情景2"}])}]);
                
                private function handleCreationComplete():void
                {
                    //var obj:Object={"name": "事件3", "code": "3"};
                    //obj.children=new ArrayCollection([{"name": "情景1", "flag": "true"}, {"name": "情景2", "flag": "true"}]);
                    //dataProviderArrayCollection.addItem(obj);
                    dataProviderArrayCollection.refresh();
                }
            ]]>
        </mx:Script>
        
        <mx:AdvancedDataGrid id="myADG" width="100%" height="100%" color="0x323232">  
       <mx:dataProvider>
        <mx:HierarchicalData  id="hd" source="{dataProviderArrayCollection}" childrenField="children"/>
       </mx:dataProvider>        
       <mx:columns>
        <mx:AdvancedDataGridColumn dataField="name" headerText="name"/>
        <mx:AdvancedDataGridColumn dataField="code" headerText="code"/>
       
       </mx:columns>
      </mx:AdvancedDataGrid>
    </mx:VBox>

效果图如下：

![20171215113155469][]

[20171215113155469]: /images/20220603/2f7740382b24405a949694bfa36337e0.png