嗯,在布局里,添入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="添加>"/>
<s:Spacer width="67" height="41"/>
<s:Button label="<删除"/>
</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 中。
这样解释很清晰的吧。还是那句老话,自己敲代码,自己理解,举一反三~!好了,今天到这里~对了。。运行结果图。。
图: