Operation of the Flex4 tree

Source file Layout

Source:

1, TreeData.xml

   <?xml version= "1.0" encoding= "UTF-8"?>
<tree id= "" name= "GJ" value= "Country" >
 <data id= "0101" Name= "ZG" value= "China" >
  <data id= "010101" name= "BJ" value= "Beijing" ></data>
 </data>
 < Data id= "0102" name= "MG" value= "us" >
  <data id= "010201" name= "NY" value= "New York" ></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" XM lns:mx= "Library://ns.adobe.com/flex/mx" minwidth= "955" minheight= ">" <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 (); Grid Data/* start */protected function Application1_creationcompletehandler (event:flexevent): void {hs.send (); /Call Httpservice to load the XML tree}/* Load tree Regression event */Private Function Treeload (event:resultevent): void {d = Event.resul
  T as XML;  T.dataprovider = D; Add data for each to the grid (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);
     }}/* Add tree node operation */Private Function AddNode (event:mouseevent): void {if (T.selectedindex = =-1) {
    Alert.show ("Please select a parent node", "prompt message");
     } 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 ("Add node succeeded.
    "," prompt Information ");
     }/* Delete node operation for tree */Private Function Delnode (event:mouseevent): void {if (T.selectedindex = =-1) {
    Alert.show ("Please select a node to delete", "prompt message"); } else {alert.show ("Are you sure you want to delete this node?").
    "," hint message ", 1|2, this, delhandler);
   }
     
   }
   /* Delete tree node confirmation action */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 ("Delete node succeeded.
    "," prompt Information "); }/* Convert arraycollection to xml*/private function Arrtoxml (event:mouseevent): void {var root:xml = <r
    oot/>;
     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 ());
    }/* Converts XML to arraycollection*/private function Xmltoarr (event:mouseevent): void {datagrid.removeall ();Hs.send (); ]]> </fx:Script> <fx:Declarations> <!--place non-visual elements (such as services, value objects) here--<s:httpservice ID = "HS" url= "Data/treedata.xml" resultformat= "e4x" result= "Treeload (event)"/> </fx:Declarations> <mx:d Atagrid height= "186" id= "DG" dataprovider= "{DataGrid}" > <mx:columns> <mx:datagridcolumn headertext= "number" D  atafield= "id"/> <mx:datagridcolumn headertext= "name" datafield= "names"/> <mx:datagridcolumn headerText= "value" datafield= "value"/> </mx:columns> </mx:DataGrid> <mx:tree id= "T" width= "322" height= "224" Labelfi Eld= "@value" ></mx:Tree> <s:hgroup width= "530" height= "page" > <s:textinput id= "nodetext"/> <s:b Utton label= "Add" click= "AddNode (event)" enabled= "{nodeText.text.replace (/^\s*|\s*$/g,"). Split ("). Join (') = = '?
  False:true} "/> <s:button label=" delete "click=" Delnode (event) "enabled=" {t.selectedindex==-1?false:true} "/> <s:button label= "Convert XML to AC" CLIck= "Xmltoarr (event);" /> <s:button label= "converts AC to xml" click= "Arrtoxml (event);


 /> </s:HGroup> </s:Application>

Run Effect diagram: