Flex使用<mx:Tree>控件創建樹(可添加和刪除節點)


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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章