Flex4树的操作

 文件布局

     

 

源代码：

1、treeData.xml

    

[html] view plaincopyprint?

1.    <?xml version="1.0" encoding="UTF-8"?>  
2. <tree id="01" name="GJ" value="国家">  
3.  <data id="0101" name="ZG" value="中国">  
4.   <data id="010101" name="BJ" value="北京"></data>  
5.  </data>  
6.  <data id="0102" name="MG" value="美国">  
7.   <data id="010201" name="NY" value="纽约"></data>  
8.  </data>  
9. </tree>  
10.   
11.    

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

[html] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="application1_creationCompleteHandler(event)"  
3.       xmlns:s="library://ns.adobe.com/flex/spark"   
4.       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">  
5.  <s:layout>  
6.   <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>  
7.  </s:layout>  
8.    
9.  <fx:Script>  
10.   <![CDATA[ 
11.    import mx.collections.ArrayCollection; 
12.    import mx.controls.Alert; 
13.    import mx.events.CloseEvent; 
14.    import mx.events.FlexEvent; 
15.    import mx.rpc.events.ResultEvent; 
16.     
17.    [Bindable] 
18.    private var d:XML; 
19.     
20.    [Bindable] 
21.    private var dataGrid:ArrayCollection = new ArrayCollection(); //网格数据 
22.     
23.    /*启动*/ 
24.    protected function application1_creationCompleteHandler(event:FlexEvent):void 
25.    { 
26.     hs.send();//调用HttpService加载XML树 
27.    } 
28.     
29.    /*加载树回归事件*/ 
30.    private function treeLoad(event:ResultEvent):void 
31.    { 
32.     d = event.result as XML; 
33.     t.dataProvider = d; 
34.     //给网格加入数据 
35.     for each(var xml:XML in event.result..data) 
36.     { 
37.      var o:Object = new Object(); 
38.      o.id = xml.@id; 
39.      o.name = xml.@name; 
40.      o.value = xml.@value; 
41.      dataGrid.addItem(o); 
42.     } 
43.    } 
44.     
45.    /*添加树结点操作*/ 
46.    private function addNode(event:MouseEvent):void 
47.    { 
48.     if(t.selectedIndex == -1) 
49.     { 
50.      Alert.show("请选择一个父结点", "提示信息"); 
51.     } 
52.     else 
53.     { 
54.      var newNode:XML = <node/>; 
55.      newNode.@value = nodeText.text; 
56.       
57.      var node:XML = XML(t.selectedItem); 
58.      if(node.@isBranch == true) 
59.      { 
60.       node.parent().appendChild(newNode); 
61.      } 
62.      else 
63.      { 
64.       node.appendChild(newNode);  
65.      } 
66.      nodeText.text = ""; 
67.      Alert.show("添加结点成功！",　"提示信息"); 
68.     } 
69.    } 
70.     
71.    /*删除树的结点操作*/ 
72.    private function delNode(event:MouseEvent):void 
73.    { 
74.     if(t.selectedIndex == -1) 
75.     { 
76.      Alert.show("请选择一个需要删除的结点", "提示信息"); 
77.     } 
78.     else 
79.     { 
80.      Alert.show("你确定要删除该结点吗？", "提示信息", 1|2, this, delHandler); 
81.     } 
82.       
83.    } 
84.     
85.    /*删除树结点确认操作*/ 
86.    private function delHandler(event:CloseEvent):void 
87.    { 
88.     if(event.detail == Alert.YES) 
89.     { 
90.      var node:XML = XML(t.selectedItem); 
91.      var nodeList:XMLList = XMLList(node.parent()).children(); 
92.      for(var i:int = 0; i < nodeList.length(); i++) 
93.      { 
94.       if(nodeList[i].@value == node.@value && (nodeList[i].@isBranch = true)) 
95.       { 
96.        delete nodeList[i]; 
97.       } 
98.        
99.      } 
100.      Alert.show("删除结点成功！", "提示信息"); 
101.     } 
102.    } 
103.     
104.    /*将ArrayCollection转换成XML*/ 
105.    private function arrToXML(event:MouseEvent):void 
106.    { 
107.     var root:XML = <root/>; 
108.     for(var i:int = 0; i < dataGrid.length; i++) 
109.     { 
110.      var node:XML = new XML(<node/>); 
111.      node.id = dataGrid[i].id; 
112.      node.name = dataGrid[i].name; 
113.      node.value = dataGrid[i].value; 
114.      root.appendChild(node); 
115.     } 
116.     Alert.show(root.toXMLString()); 
117.    } 
118.     
119.    /*将XML转换成ArrayCollection*/ 
120.    private function XMLToArr(event:MouseEvent):void 
121.    { 
122.     dataGrid.removeAll(); 
123.     hs.send(); 
124.    } 
125.     
126.   ]]>  
127.  </fx:Script>  
128.    
129.  <fx:Declarations>  
130.   <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
131.   <s:HTTPService id="hs" url="data/treeData.xml" resultFormat="e4x" result="treeLoad(event)"/>  
132.  </fx:Declarations>  
133.  <mx:DataGrid height="186" id="dg" dataProvider="{dataGrid}">  
134.   <mx:columns>  
135.    <mx:DataGridColumn headerText="编号" dataField="id"/>  
136.    <mx:DataGridColumn headerText="名称" dataField="name"/>  
137.    <mx:DataGridColumn headerText="值" dataField="value"/>  
138.   </mx:columns>  
139.  </mx:DataGrid>  
140.    
141.  <mx:Tree id="t" width="322" height="224" labelField="@value"></mx:Tree>  
142.  <s:HGroup width="530" height="57">  
143.   <s:TextInput id="nodeText"/>  
144.   <s:Button label="增加" click="addNode(event)" enabled="{nodeText.text.replace(/^\s*|\s*$/g,'').split(' ').join('')==''?false:true}"/>  
145.   <s:Button label="删除" click="delNode(event)" enabled="{t.selectedIndex==-1?false:true}"/>  
146.   <s:Button label="将XML转换成AC" click="XMLToArr(event);"/>  
147.   <s:Button label="将AC转换成XML" click="arrToXML(event);"/>  
148.      
149.  </s:HGroup>  
150. </s:Application>  

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

 

运行效果图：