flex 3: 使用 tree 控件（一） (

本文链接：https://blog.csdn.net/cruelchen/article/details/9308269

flex 3: 使用 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>