Flex4树的操作

源文件布局

     

 

源代码：

1、treeData.xml

    

   <?xml version="1.0" encoding="UTF-8"?><tree id="01" name="GJ" value="国家"> <data id="0101" name="ZG" value="中国">  <data id="010101" name="BJ" value="北京"></data> </data> <data id="0102" name="MG" value="美国">  <data id="010201" name="NY" value="纽约"></data> </data></tree> 

2、demo_tree.mxml

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="application1_creationCompleteHandler(event)"      xmlns:s="library://ns.adobe.com/flex/spark"       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <s:layout>  <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/> </s:layout>  <fx:Script>  <![CDATA[   import mx.collections.ArrayCollection;   import mx.controls.Alert;   import mx.events.CloseEvent;   import mx.events.FlexEvent;   import mx.rpc.events.ResultEvent;      [Bindable]   private var d:XML;      [Bindable]   private var dataGrid:ArrayCollection = new ArrayCollection(); //网格数据      /*启动*/   protected function application1_creationCompleteHandler(event:FlexEvent):void   {    hs.send();//调用HttpService加载XML树   }      /*加载树回归事件*/   private function treeLoad(event:ResultEvent):void   {    d = event.result as XML;    t.dataProvider = d;    //给网格加入数据    for each(var xml:XML in event.result..data)    {     var o:Object = new Object();     o.id = xml.@id;     o.name = xml.@name;     o.value = xml.@value;     dataGrid.addItem(o);    }   }      /*添加树结点操作*/   private function addNode(event:MouseEvent):void   {    if(t.selectedIndex == -1)    {     Alert.show("请选择一个父结点", "提示信息");    }    else    {     var newNode:XML = <node/>;     newNode.@value = nodeText.text;          var node:XML = XML(t.selectedItem);     if(node.@isBranch == true)     {      node.parent().appendChild(newNode);     }     else     {      node.appendChild(newNode);      }     nodeText.text = "";     Alert.show("添加结点成功！",　"提示信息");    }   }      /*删除树的结点操作*/   private function delNode(event:MouseEvent):void   {    if(t.selectedIndex == -1)    {     Alert.show("请选择一个需要删除的结点", "提示信息");    }    else    {     Alert.show("你确定要删除该结点吗？", "提示信息", 1|2, this, delHandler);    }        }      /*删除树结点确认操作*/   private function delHandler(event:CloseEvent):void   {    if(event.detail == Alert.YES)    {     var node:XML = XML(t.selectedItem);     var nodeList:XMLList = XMLList(node.parent()).children();     for(var i:int = 0; i < nodeList.length(); i++)     {      if(nodeList[i].@value == node.@value && (nodeList[i].@isBranch = true))      {       delete nodeList[i];      }           }     Alert.show("删除结点成功！", "提示信息");    }   }      /*将ArrayCollection转换成XML*/   private function arrToXML(event:MouseEvent):void   {    var root:XML = <root/>;    for(var i:int = 0; i < dataGrid.length; i++)    {     var node:XML = new XML(<node/>);     node.id = dataGrid[i].id;     node.name = dataGrid[i].name;     node.value = dataGrid[i].value;     root.appendChild(node);    }    Alert.show(root.toXMLString());   }      /*将XML转换成ArrayCollection*/   private function XMLToArr(event:MouseEvent):void   {    dataGrid.removeAll();    hs.send();   }     ]]> </fx:Script>  <fx:Declarations>  <!-- 将非可视元素（例如服务、值对象）放在此处 -->  <s:HTTPService id="hs" url="data/treeData.xml" resultFormat="e4x" result="treeLoad(event)"/> </fx:Declarations> <mx:DataGrid height="186" id="dg" dataProvider="{dataGrid}">  <mx:columns>   <mx:DataGridColumn headerText="编号" dataField="id"/>   <mx:DataGridColumn headerText="名称" dataField="name"/>   <mx:DataGridColumn headerText="值" dataField="value"/>  </mx:columns> </mx:DataGrid>  <mx:Tree id="t" width="322" height="224" labelField="@value"></mx:Tree> <s:HGroup width="530" height="57">  <s:TextInput id="nodeText"/>  <s:Button label="增加" click="addNode(event)" enabled="{nodeText.text.replace(/^\s*|\s*$/g,'').split(' ').join('')==''?false:true}"/>  <s:Button label="删除" click="delNode(event)" enabled="{t.selectedIndex==-1?false:true}"/>  <s:Button label="将XML转换成AC" click="XMLToArr(event);"/>  <s:Button label="将AC转换成XML" click="arrToXML(event);"/>    </s:HGroup></s:Application>

 

运行效果图：