学习tree 控件（基础）

学习tree 控件：http://www.cxseo.net/web/200903/20/news_contentrid229.html

一、树形控件的常用属性

1、dragMoveEnabled：是否在拖放的过程中将节点移动，而不是复制。

2、folderOpenIcon：展开节点时的节点图标

3、folderClosedIcon：关闭节点时的节点图标

4、defaultLeafIcon：叶子节点的图标

5、openItems：在初始化时展开的节点集。

6、showRoot：是否显示数据中的根节点。XML格式的数据一般包含根节点，此时该属性应为false；Array类型的数据一般不包含根节点，该属性设置无效。

7、indentation：节点层次缩进量。

8、doubleClickEnabled：节点是否支持双击事件。

9、dragEnabled：是否允许拖动节点。

10、dropEnabled：在拖动节点的过程中是否允许释放，以移动节点。

11、alternatingItemColors：节点间隔背景色。

12、labelField：作为标签显示的数据的属性。

13、labelFunction：自定义节点标签。

二、树形控件的常用事件

1、itemClick：单击节点触发该事件。

2、itemDoubleClick：双击节点触发该事件。

使用XMLLISTCOLLECTION 和ARRAYCOLLECTION对象的对比。

你也许想知道，在运行时从远程或本地得来的数据被动态修改的时候，应该使用XMLListCollection对象还是ArrayCollection对象作为Tree空间的数据提供者。

如果你使用的数据源提供成形的XML，并且，你想在Tree控件中操作 XML数据。你应该使用XMLListCollection对象作为数据提供者。当使用MXML标记时，如果数据源是XMLList对象，你应该把它绑定到XMLLsitCollection对象的source属性上，然后把 XMLListCollection对象绑定到Tree控件的dataProvider属性上。

当你想要动态改变对象值时，不要使用XMLList或XML对象直接绑定到Tree控件的dataProvider属性上。当数据源是RPC(远程过程调用)服务的lastResult属性，并且你想使用XML数据，确保RPC组件的resultFormat属性被设置成e4x，当你使用e4x结果格式，最总结果就是XMLList，可以绑定在XMLListCollection对象上。

这里有一个例子。为例数据被动态改变，使用ArrayCollection对象作为Tree控件的数据提供器。当使用MXML标记时，如果你期望动态的改变Arrayl，你不应该把Array对象直接绑定到Tree控件的dataProvider属性上。作为代替，你应该绑定Array到一个ArrayCollection对象的source属性上，然后再把ArrayCollection对象绑定到Tree控件的dataProvider属性上。

当数据源是RPC(远程过程调用)服务的lastResult对象，并且RPC组件的resultFormat属性被成object，你应该使用ArrayUtil.toArray()方法来确保对象是一个Array。然后绑定到ArrayCollection对象上，就像下边的例子所示：

<mx:ArrayCollection

id="employeeAC"

source= "{ArrayUtil.toArray(employeeSrv.lastResult.employees.employee)}"/>

例如1：

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/index.html">

<mx:Script>

<![CDATA[

import mx.collections.XMLListCollection;

[Bindable]

private var company:XML =

<list>

<department title="Finance" code="200">

<employee name="John H"/>

<employee name="Sam K"/>

</department>

<department title="Operations" code="400">

<employee name="Bill C"/>

<employee name="Jill W"/>

</department>

<department title="Engineering" code="300">

<employee name="Erin M"/>

<employee name="Ann B"/>

</department>

</list>;

[Bindable]

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

private function treeLabel(item:Object):String

{

var node:XML = XML(item);
//提供该 XML对象限定名称的本地名称部分

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

return
node.@title;

else

return
node.@name;

}

private function addEmployee():void

{

var newNode:XML = <employee/>;

newNode.@name
= empName.text;

var dept:XMLList =company.department.(@title == "Operations");

if( dept.length() > 0 ) {

dept[0].appendChild(newNode);

empName.text = "";

}

}

private function removeEmployee():void

{

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

if( node == null ) return;

if( node.localName() != "employee" ) return;

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

for(var i:Number=0; i < children.length(); i++) {

if( children[i].@name ==
node.@name
) {

delete children[i];

}

}

}

]]>

</mx:Script>

<mx:Tree id="tree" top="72" left="50" dataProvider="{companyData}"

labelFunction="treeLabel"

height="224" width="179"/>

<mx:HBox>

<mx:Button label="Add Operations Employee" click="addEmployee()"/><mx:TextInput id="empName"/>

</mx:HBox>

<mx:Button label="Remove Selected Employee" click="removeEmployee()"/>

</mx:Application>

例如2：设置tree节点图标

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

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

<mx:Script>

<![CDATA[

// 图标的相对地址 // 注意: 文件夹之间一定要用"/"分隔,而不能用"\"分隔!

[Embed(source="1.png")]

[Bindable]

public var boyIcon:Class;

[Embed(source="2.png")]

[Bindable]

public var girlIcon:Class;

// 根据结点的属性设置节点图标

private function SetIcon(item:Object):*

{

var xml:XML = item as XML;

if(xml.attribute("sex")=="男")

{

return boyIcon;

}

else

{

return girlIcon;

}

}

// Tree控件的数据源

[Bindable]

public var jpXml:XML=

<member jpname="祖先" sex="男">

<member jpname="胡迪" sex="男">

</member>

<member jpname="胡俊" sex="男">

</member>

<member jpname="胡三" sex="女">

</member>

</member>

public function AddMember():void

{

var newMember:XML =

<member jpname="胡易衡" sex="男">

</member>

//// 在根结点的第一个子结点前面加一个子第一个子结点

//jpXml.appendChild(newMember);

//// 在根结点的最后一个子结点前面加一个子第一个子结点

//jpXml.prependChild(newMember);

// 给结点添加一个子结点 // 添加子女

jpXml.member.(@jpname=="胡俊").appendChild(newMember);

// 给结点添加一个兄弟结点 // 先找到该结点父结点,然后添加给该父结点添加子结点

//jpXml.member.(@jpname=="胡俊").parent().appendChild(newMember);

// 修改结点的值

//jpXml.member.(@jpname=="胡俊").@jpname="姓名修改";

txrXml.text= jpXml.member.(@jpname=="胡俊").@jpname;
// 用于测试

}

]]>

</mx:Script>

<mx:Tree x="27" y="81" width="161" height="300" id="treeXml"

dataProvider="{jpXml}" labelField="@jpname" showDataTips="true"

iconFunction="SetIcon" horizontalScrollPolicy="on"></mx:Tree>

<mx:Button x="65" y="40" label="Button" id="btnXml" click="AddMember()" />

<mx:TextArea x="235" y="83" width="258" height="237" id="txrXml"/>

</mx:Application>