[zt]Flex 3: 构建高级用户界面 使用 Tree 控件2

在运行时增加和删除叶子节点

你可以在运行时为Tree控件增加或删除叶子节点。下边的例子包含的代码来实现这种改变。这个程序使用预定义的枝和叶来初始化，表现公司部门和员工。你可以向任意枝节点增加叶节点在运行时。你也可以删除预定义的叶节点和你在运行时增加的节点。

在这个例子中的XML包含两种不同的元素名字，department和employee。Tree控件的label函数，决定根据元素的类型应该显示那些文本。它使用了E4X语法来返回department的title，或者employee的name。然后，这些语法在addEmployee()和removeEmployee()中会用到。

为了增加员工到业务部门，addEmployee()方法使用E4X语法，通过title属性的值获得业务部门的节点，并把它保存到XMLList类型的变量dept中。然后，通过调用dept.appendChild()方法向操作节点添加子结点。remove方法保存当前被选择的元素到变量node中，node的类型是XML。调用node.localName()方法确定被选择的元素是否是employee节点。如果是employee节点，删除它。

例子

   
                    [Bindable]
            private var company:XML =
             
               
                   
                   
               
               
                   
                   
                                  
               
                   
                   
                                              
              ;
            [Bindable]
            private var companyData:XMLListCollection = new XMLListCollection(company.department);
            private function treeLabel(item:Object):String
            {
                var node:XML = XML(item);
                if( node.localName() == "department" )
                    return node.@title;
                else
                    return node.@name;
            }
            private function addEmployee():void
            {
                var newNode:XML = ;
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];
                    }
                }
            }
        ]]>
   
            labelFunction="treeLabel"
         height="224" width="179"/>