flex基础之tree组件的使用

tree组件用来将数据显示为树形结构。

下面的代码定义了一个xml对象，并将其绑定到XMLListCollection对象的source属性上，然后将它作为tree的数据源。还设置了tree组件的labelFunction属性，以便为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:Script>
<![CDATA[
import mx.collections.XMLListCollection;
[Bindable]
private var category:XML = 
<items>
<item title="Books" isBranch="true">
<book name="flex" />
<book name="java" />
</item>
<item title="Car" isBranch="true">
<book name="BMW" />
<book name="BYD" />
</item>
</items>;
[Bindable]
private var categoryData:XMLListCollection = 
new XMLListCollection(category.item);
private function treeLabelFunction(item:Object):String{
var node:XML = XML(item);
if(node.localName() == "item"){
return node.@title;
}
else{
return node.@name;
}
}

protected function addNode():void
{
// 没有选择节点直接返回
if(!tree.selectedItem) return;
var node:XML = XML(tree.selectedItem);
//没有输入节点名返回
if(tiNodeName.text == "") return;
//??????????????????????????????
var newNode:XML = <node/>;
newNode.@name = tiNodeName.text;
if(node.@isBranch==true){
//如果选择的是分支节点，则为其添加子节点
node.appendChild(newNode);

}
else{
//若果选择的是子节点，则为其父节点添加子节点
node.parent().appendChild(newNode);
}
//清空文本空
tiNodeName.text = "";

}

protected function removeNode():void
{
// TODO Auto-generated method stub
if(!tree.selectedItem) return;
var node:XML = XML(tree.selectedItem);
var children:XMLList = XMLList(node.parent()).children();
for(var i:Number = 0;i< children.length();i++){
//只删除叶子节点
if(children[i].@name == node.@name && node.@isBranch!=true){
delete children[i];
}
}
}

]]> 
</fx:Script>

<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<mx:Tree id="tree" x="65" y="44" width="230" height="261" dataProvider="{categoryData}" labelFunction="treeLabelFunction"></mx:Tree>
<s:TextInput id="tiNodeName" x="69" y="325" width="132" height="23"/>
<s:Button x="229" y="327" label="Add Node" click="addNode()"/>
<s:Button x="69" y="385" width="121" label="Remove Node" click="removeNode()"/>
</s:Application>

运行程序截图：