Flex使用<mx:Tree>控件创建树(可添加和删除节点)

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

fontSize="12">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.collections.XMLListCollection;

[Bindable]

private var company:XML=<list>

<department name="部门 A">

<employee name="小 A" />

<employee name="小 B" />

</department>

<department name="部门 B">

<employee name="小 C" />

<employee name="小 D" />

</department>

</list>;

[Bindable]

private var companyData:XMLListCollection=new XMLListCollection(company.department);

private function addNode():void

{

// 新建节点

var newNode:XML=<employee/>;

newNode.@name=empName.text;

// 添加节点

var xml:XML=XML(tree.selectedItem);

if (xml.length() > 0)

{

xml[0].appendChild(newNode);

}

}

private function removeNode():void

{

if (tree.selectedItem != null)

{

var node:XML=XML(tree.selectedItem);

// 不能删除空节点和部门A，B

if (node == null || node.localName() == "department")

{

Alert.show("不能删除空节点和部门A，B！");

return;

}

// 获取当前节点的父节点下的所有子节点

var children:XMLList=XMLList(node.parent()).children();

// 将其转换为 XMLListCollection

var childrenCol:XMLListCollection=new XMLListCollection(children);

// 获取选中节点索引，并删除该节点

var i:Number=childrenCol.getItemIndex(node);

childrenCol.removeItemAt(i);

}else{

Alert.show("请选中一个节点再进行删除！");

}

}

]]>

</mx:Script>

<mx:Panel title="实现添加和删除节点"

width="300"

height="300"

verticalAlign="middle"

horizontalAlign="center">

<mx:Tree id="tree"

dataProvider="{companyData}"

labelField="@name"

height="200"

width="230"/>

<mx:HBox>

<mx:TextInput id="empName"

width="60"

text="新节点名"/>

<mx:Button label="添加节点"

click="addNode();"/>

<mx:Button label="删除节点"

click="removeNode();"/>

</mx:HBox>

</mx:Panel>

</mx:Application>