学习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>