Flex4.5Tree组件绑定数据

嗯，在布局里，添入Tree组件，再在Tree里面绑定数据，显示出来，这个功能应用还是很广泛的，今天只实现数据的绑定，以后会进一步实现，增删改查、全选、反选的功能。

先把代码发一下：

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import component.TreeCheckBoxRenderer;
   import mx.collections.ArrayCollection;
   
   [Bindable]
   public var collection:ArrayCollection = new ArrayCollection([
    { "name" : "后宫动画列表", "selected":false, "children":[
     { "name":"零之使魔", "selected":false },
     { "name":"To Love", "selected":false },
     { "name":"笨蛋测验召唤兽", "selected":false },
     { "name":"天降之物", "selected":false }
    ]},
    { "name":"校园恋爱列表", "selected":false, "children":[
     { "name":"未来日记", "selected":false },
     { "name":"罪恶王冠", "selected":false },
     { "name":"我的朋友很少", "selected":false }
    ]}
   ]);
   
   public var collection1:ArrayCollection = new ArrayCollection([
    { "name" : "已选动画列表", "selected":false, "children":[
     { "name":"便当", "selected":false },
     { "name":"R-15", "selected":false },
     { "name":"听爸爸的话", "selected":false },
     { "name":"夏目友人帐", "selected":false }
    ]
     
    }
   ]);
  ]]>
  
  
 </fx:Script>
 <mx:VBox x="125" y="8" width="661" height="351">
  <mx:HBox width="656">
   <s:TextInput id="asd" text="查找喜欢动画"/>
  </mx:HBox>
  <mx:HBox height="292">
   <mx:VBox width="296" height="265">
    <mx:Tree width="290" height="262"  labelField="name" itemRenderer="component.TreeCheckBoxRenderer" dataProvider="{collection}"/>
    
    
   </mx:VBox>
   <mx:VBox>
    <s:Spacer width="70" height="79"/>
    <s:Button label="添加&gt;"/>
    <s:Spacer width="67" height="41"/>
    <s:Button label="&lt;删除"/>
   </mx:VBox>
   <mx:VBox width="258" height="267">
    <mx:Tree width="254" height="260" labelField="name" itemRenderer="component.TreeCheckBoxRenderer" dataProvider="{collection1}">
     
    </mx:Tree>
   </mx:VBox>
  </mx:HBox>
 </mx:VBox>
</s:Application>
由于我是动漫迷，所以喜欢用动漫当例子，呵呵~

我们看程序有几个关键点：

首先是 【Bindable】，绑定数据，没有它的话，Tree是不能使用那几个数组里面的数据的哦。

 

itemRenderer="component.TreeCheckBoxRenderer" dataProvider="{collection}，这句是重中之重，itemRenderer是控件的自定义项呈示器。您可以指定嵌入式、内嵌或自定义项呈示器。

默认的项呈示器取决于组件类。TileList 和 HorizontalList 类使用 TileListItemRenderer；List 类使用 ListItemRenderer。DataGrid 类使用 DataGridColumn 中的 DataGridItemRenderer。

dataProvider包含要显示的数据的对象。为此属性分配值后，Tree 类将按照下列方式处理源数据对象：

• 将包含有效 XML 文本的 String 转换为 XMLListCollection。
• 将 XMLNode 转换为 XMLListCollection。
• 将 XMLList 转换为 XMLListCollection。
• 将实现 ICollectionView 接口的任何对象转换为 ICollectionView。
• 将 Array 转换为 ArrayCollection。
• 将任何其它类型的对象作为 Array 的唯一条目纳入该 Array 中。

这样解释很清晰的吧。还是那句老话，自己敲代码，自己理解，举一反三~！好了，今天到这里~对了。。运行结果图。。

图：