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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值