将ArrayCollection作为Flex Tree的数据源

最新推荐文章于 2019-08-02 12:20:46 发布

原创最新推荐文章于 2019-08-02 12:20:46 发布 · 190 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Flex #Tree #ArrayCollection #JSON

Flex 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何通过ArrayCollection和JSON将数据源赋予Tree控件，详细展示了数据结构和代码实现过程，包括labelField的使用、children属性的正确配置以及Tree操作的基本方法。

[url=http://43451125.blog.163.com/blog/static/4479446720103102140858/]http://43451125.blog.163.com/blog/static/4479446720103102140858/[/url]文中将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>