将ArrayCollection作为Flex Tree的数据源

http://43451125.blog.163.com/blog/static/4479446720103102140858/文中将ArrayCollection作为Tree的数据源,根据作者的思路,可以将JSON赋予ArrayCollection,以达到将JSON作为数据源的目的。
[align=left][/align]如下代码所示:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="white" layout="vertical" verticalAlign="middle"
    viewSourceURL="srcview/index.html">
 <mx:Script>
  <![CDATA[
  import mx.collections.ArrayCollection;
  import com.esri.ags.utils.JSON;
  
  import mx.controls.Alert;
  import mx.events.ListEvent;
 
  
  protected function tree_itemClickHandler(event:ListEvent):void
  {
   Alert.show(Tree(event.currentTarget).selectedItem.name);
  }
  [Bindable]
  public var expenses:ArrayCollection = new ArrayCollection([
   {id:"node1", name:"node1name",
    children:[{id:"n11", name:"n11name"},{id:"n12", name:"n12name"},{id:"n13", name:"n13name"}]},
   {id:"node2", name:"node2name",
    children:[{id:"n21", name:"n2name"},{id:"n22", name:"n22name",
     children:[{id:"n231", name:"n231name"},{id:"n232", name:"n232name"}]}]},
   {id:"node3", name:"node3name"}
  ]);
   
   protected function dd_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
    tree.openItems = expenses.getItemAt(0);
   }
   
  ]]>
 </mx:Script>
 
 <mx:Tree id="tree" width="320" dataProvider="{expenses}" itemClick="tree_itemClickHandler(event)"
    labelField="id" rowCount="9" showRoot="true"/>
 <mx:Button  id="dd" click="dd_clickHandler(event)"/>
</mx:Application>


需要注意的是:
1.labelField可以指定json的属性如id或name,该属性需要所有子节点均包含之。
2.子节点需要使用children属性,一定是children属性才能被Tree识别为子节点。
3.在对Tree进行操作时,可以使用额外的JSON包

你可能感兴趣的:(json,Flex,tree,arrayCollection)