Flex4之Tree开发【一】

最新推荐文章于 2019-08-08 23:10:00 发布

夜路人

最新推荐文章于 2019-08-08 23:10:00 发布

阅读量1.5k

点赞数

分类专栏： GIS开发

GIS开发专栏收录该内容

60 篇文章

订阅专栏

本文介绍如何使用Flex4中的树(Tree)组件进行开发。主要讲解了两种方式：一种是读取本地或远程XML文件来构建树结构；另一种是直接在MXML中定义XML数据。此外还介绍了树组件的基本配置及交互事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flex4之Tree开发【一】

 * 博客分类： RIA-Flex4专栏

XMLFlexAdobe数据结构

1.首先得明白一点，FLEX4的TREE接受的是XML类型的数据，所以无论以何种方式获得XML数据，TREE通过dataProvider=XMLDATA和labelField=@viewname都可以显示出来一棵树

第一种方式，读取本地或远程XML文件

XML文件的格式，大致如下
Xml代码收藏代码

 1. <?xml version="1.0" encoding="UTF-8"?>
 2. <node label='所有分类'>
 3. <node label='中国' value="http://www.baidu.com">
 4. <node label='河南' value="http://www.youdao.com" >
 5. <node label='信阳' />
 6. <node label='南阳'/>
 7. </node>
 8. <node label='河北'>
 9. <node label='保定'/>
10. <node label='衡水'/>
11. </node>
12. <node label='湖南' >
13. <node label='长沙'/>
14. <node label='湘潭'/>
15. </node>
16. <node label='湖北'>
17. <node label='武汉'/>
18. <node label='仙桃'/>
19. </node>
20. </node>
21. </node>

<?xml version="1.0" encoding="UTF-8"?>
<node label='所有分类'>
<node label='中国' value="http://www.baidu.com">
<node label='河南' value="http://www.youdao.com" >
<node label='信阳' />
<node label='南阳'/>
</node>
<node label='河北'>
<node label='保定'/>
<node label='衡水'/>
</node>
<node label='湖南' >
<node label='长沙'/>
<node label='湘潭'/>
</node>
<node label='湖北'>
<node label='武汉'/>
<node label='仙桃'/>
</node>
</node>
</node>

针对上面这个XML格式的文件，Flex4的TREE解析后显示的话会从第二个节点开始解析也即中国那个节点
这种方式的代码我贴出来，大家看下
Xml代码收藏代码

 1. <?xml version="1.0" encoding="utf-8"?>
 2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 3. xmlns:s="library://ns.adobe.com/flex/spark"
 4. xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
 5. creationComplete="SrvTreeList.send();init()">
 6. <fx:Style>
 7. Tree {
 8. folderClosedIcon: ClassReference(null);
 9. folderOpenIcon: ClassReference(null);
10. }
11. </fx:Style>
12.
13. <fx:Script>
14. <![CDATA[
15. import mx.collections.ArrayCollection;
16. import mx.rpc.events.ResultEvent;
17.
18. var XMLTreeList:XML;
19. protected function treeService_resultHandler(event:ResultEvent):void
20. {
21. //先把数据取出来交给XML,再交给dataProvider，因为dataProvider不能直接解析String为XML
22. XMLTreeList=XML(SrvTreeList.lastResult.toString());
23. MusicTypeTree.dataProvider=XMLTreeList;
24.
25. }
26. //这里我写了一个右键菜单
27. public function init():void{
28.
29. var item: ContextMenuItem=new ContextMenuItem("添加");
30. var menu:ContextMenu=new ContextMenu();
31. menu.customItems.push(item);
32. MusicTypeTree.contextMenu=menu;
33. }
34.
35.
36.
37. protected function tree1_clickHandler(event:MouseEvent):void
38. {
39. if(MusicTypeTree.selectedItem.hasOwnProperty("@value" ))
40.
41. { //如果某节点中含有VALUE属性，那么就是先跳转页面
42. navigateToURL(new URLRequest(MusicTypeTree.selectedItem.@value));
43. } else
44. {
45. //没有那就展开，如果展开了就收缩
46. MusicTypeTree.expandItem(MusicTypeTree.selectedItem,!MusicTypeTree.isItemOpen(MusicTypeTree.selectedItem),true);
47. }
48. }
49.
50. ]]>
51. </fx:Script>
52. <fx:Declarations>
53. 
54. <s:HTTPService id="SrvTreeList" url="data/tree.xml" result="treeService_resultHandler(event)" useProxy="false" resultFormat="xml" />
55. </fx:Declarations>
56. 
57. <mx:Tree x="20" y="10" click="tree1_clickHandler(event)" id="MusicTypeTree"
58. left="5" right="5"
59. showRoot="false"
60. labelField="@label"
61. bottom="5" top="40"
62.
63. ></mx:Tree>
64.
65. </s:Application>
66. 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
 creationComplete="SrvTreeList.send();init()">
 <fx:Style>
 Tree {
 folderClosedIcon: ClassReference(null);
 folderOpenIcon: ClassReference(null);
 }
 </fx:Style>

 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 import mx.rpc.events.ResultEvent;

 var XMLTreeList:XML;
 protected function treeService_resultHandler(event:ResultEvent):void
 {
 //先把数据取出来交给XML,再交给dataProvider，因为dataProvider不能直接解析String为XML
 XMLTreeList=XML(SrvTreeList.lastResult.toString());
 MusicTypeTree.dataProvider=XMLTreeList;

 }
 //这里我写了一个右键菜单
 public function init():void{

 var item: ContextMenuItem=new ContextMenuItem("添加");
 var menu:ContextMenu=new ContextMenu();
 menu.customItems.push(item);
 MusicTypeTree.contextMenu=menu;
 }

 protected function tree1_clickHandler(event:MouseEvent):void
 {
 if(MusicTypeTree.selectedItem.hasOwnProperty("@value" ))

 { //如果某节点中含有VALUE属性，那么就是先跳转页面
 navigateToURL(new URLRequest(MusicTypeTree.selectedItem.@value));
 } else
 {
 //没有那就展开，如果展开了就收缩
 MusicTypeTree.expandItem(MusicTypeTree.selectedItem,!MusicTypeTree.isItemOpen(MusicTypeTree.selectedItem),true);
 }
 }

 ]]>
 </fx:Script>
 <fx:Declarations>
 
 <s:HTTPService id="SrvTreeList" url="data/tree.xml" result="treeService_resultHandler(event)" useProxy="false" resultFormat="xml" />
 </fx:Declarations>
 
 <mx:Tree x="20" y="10" click="tree1_clickHandler(event)" id="MusicTypeTree"
 left="5" right="5"
 showRoot="false"
 labelField="@label"
 bottom="5" top="40"

 ></mx:Tree>

</s:Application>

第二种方式:将XML内容写到<fx:mxl>标签里面
这种方式我们来看看
Xml代码收藏代码

 1. <?xml version="1.0" encoding="utf-8"?>
 2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 3. xmlns:s="library://ns.adobe.com/flex/spark"
 4. xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
 5. creationComplete="init()">
 6. <fx:Declarations>
 7. 
 8. </fx:Declarations>
 9. <fx:Script>
10. <![CDATA[
11. import mx.collections.ICollectionView;
12. import mx.events.ListEvent;
13. private function tree_itemClick(evt:ListEvent):void {
14. var item:Object = Tree(evt.currentTarget).selectedItem;
15. if (tree.dataDescriptor.isBranch(item)) {
16. tree.expandItem(item, !tree.isItemOpen(item), true);
17. }
18. }
19. private function tree_labelFunc(item:XML):String {
20. var children:ICollectionView;
21. var suffix:String = "";
22. if (tree.dataDescriptor.isBranch(item)) {
23. children = tree.dataDescriptor.getChildren(item);
24. suffix = " (" + children.length + ")";
25. }
26. return item[tree.labelField] + suffix;
27. }
28.
29.
30. ]]>
31. </fx:Script>
32. <fx:Declarations>
33.
34.
35. <fx:XML id="dp">
36. <root>
37. <folder label="One">
38. <folder label="One.A">
39. <item label="One.A.1" />
40. <item label="One.A.2" />
41. <item label="One.A.3" />
42. <item label="One.A.4" />
43. <item label="One.A.5" />
44. </folder>
45. <item label="One.1" />
46. <item label="One.2" />
47. </folder>
48. <folder label="Two">
49. <item label="Two.1" />
50. <folder label="Two.A">
51. <item label="Two.A.1" />
52. <item label="Two.A.2" />
53. </folder>
54. </folder>
55. </root>
56. </fx:XML>
57. </fx:Declarations>
58. <mx:Tree id="tree"
59. dataProvider="{dp}"
60. showRoot="false"
61. labelField="@label"
62. labelFunction="tree_labelFunc"
63. width="742"
64. rowCount="6"
65. itemClick="tree_itemClick(event);" x="14" y="12" height="359"/>
66.
67. </s:Application>
68.
69. 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
 creationComplete="init()">
 <fx:Declarations>
 
 </fx:Declarations>
<fx:Script>
 <![CDATA[
 import mx.collections.ICollectionView;
 import mx.events.ListEvent;
 private function tree_itemClick(evt:ListEvent):void {
 var item:Object = Tree(evt.currentTarget).selectedItem;
 if (tree.dataDescriptor.isBranch(item)) {
 tree.expandItem(item, !tree.isItemOpen(item), true);
 }
 }
 private function tree_labelFunc(item:XML):String {
 var children:ICollectionView;
 var suffix:String = "";
 if (tree.dataDescriptor.isBranch(item)) {
 children = tree.dataDescriptor.getChildren(item);
 suffix = " (" + children.length + ")";
 }
 return item[tree.labelField] + suffix;
 }


 ]]>
</fx:Script>
 <fx:Declarations>


 <fx:XML id="dp">
 <root>
 <folder label="One">
 <folder label="One.A">
 <item label="One.A.1" />
 <item label="One.A.2" />
 <item label="One.A.3" />
 <item label="One.A.4" />
 <item label="One.A.5" />
 </folder>
 <item label="One.1" />
 <item label="One.2" />
 </folder>
 <folder label="Two">
 <item label="Two.1" />
 <folder label="Two.A">
 <item label="Two.A.1" />
 <item label="Two.A.2" />
 </folder>
 </folder>
 </root>
 </fx:XML>
 </fx:Declarations>
 <mx:Tree id="tree"
 dataProvider="{dp}"
 showRoot="false"
 labelField="@label"
 labelFunction="tree_labelFunc"
 width="742"
 rowCount="6"
 itemClick="tree_itemClick(event);" x="14" y="12" height="359"/>

</s:Application>

itemClick方法可以和labelFuntion可以不写，正常的话不写方法就能显示TREE的树形结构了

第三：再看一个例子
Xml代码收藏代码

 1. <?xml version="1.0" encoding="utf-8"?>
 2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 3. xmlns:s="library://ns.adobe.com/flex/spark"
 4. xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 5. <fx:Declarations>
 6. 
 7. <fx:XMLList id="treeData">
 8. <node label="Mail Box">
 9. <node label="Inbox">
10. <node label="Marketing"/>
11. <node label="Product Management"/>
12. <node label="Personal"/>
13. </node>
14. <node label="Outbox">
15. <node label="Professional"/>
16. <node label="Personal"/>
17. </node>
18. <node label="Spam"/>
19. <node label="Sent"/>
20. </node>
21. </fx:XMLList>
22. </fx:Declarations>
23. <fx:Script>
24. <![CDATA[
25. [Bindable]
26. public var selectedNode:XML;
27.
28. // Event handler for the Tree control change event.
29. public function treeChanged(event:Event):void {
30. selectedNode=Tree(event.target).selectedItem as XML;
31. }
32. ]]>
33. </fx:Script>
34. <mx:Panel title="Tree Control Example" height="75%" width="75%"
35. paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
36.
37. <mx:Label width="100%" color="blue"
38. text="Select a node in the Tree control."/>
39.
40. <mx:HDividedBox width="100%" height="100%">
41. <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
42. showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
43. <mx:TextArea height="100%" width="50%"
44. text="Selected Item: {selectedNode.@label}"/>
45. </mx:HDividedBox>
46.
47. </mx:Panel>
48. </s:Application>

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 <fx:Declarations>
 
 <fx:XMLList id="treeData">
 <node label="Mail Box">
 <node label="Inbox">
 <node label="Marketing"/>
 <node label="Product Management"/>
 <node label="Personal"/>
 </node>
 <node label="Outbox">
 <node label="Professional"/>
 <node label="Personal"/>
 </node>
 <node label="Spam"/>
 <node label="Sent"/>
 </node>
 </fx:XMLList>
 </fx:Declarations>
 <fx:Script>
 <![CDATA[
 [Bindable]
 public var selectedNode:XML;

 // Event handler for the Tree control change event.
 public function treeChanged(event:Event):void {
 selectedNode=Tree(event.target).selectedItem as XML;
 }
 ]]>
 </fx:Script>
 <mx:Panel title="Tree Control Example" height="75%" width="75%"
 paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

 <mx:Label width="100%" color="blue"
 text="Select a node in the Tree control."/>

 <mx:HDividedBox width="100%" height="100%">
 <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
 showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
 <mx:TextArea height="100%" width="50%"
 text="Selected Item: {selectedNode.@label}"/>
 </mx:HDividedBox>

 </mx:Panel>
</s:Application>

第四，到目前为止，应该可以看出来了XML的显示格式了，如果获取XML文件那么结果要转换成为
var xmlList:XML=XML(event.result.toString());
mytree.dataProvider=xmlList;
要么就是<mx:Tree dataProvider="{xmlList}" >
那么就是
<fx:xml id="xmlid"></fx:xml>
<mx:Tree dataProvider="{xmlid}">

这么多的方式都可以把数据填充到TREE中去

第五：来一个增删拖拽展开，收缩的示例，这里先不涉及到后台，下一篇文章会讲到TREE与JAVA后台数据库的交互操作
Xml代码收藏代码

 1. <?xml version="1.0" encoding="utf-8"?>
 2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 3. xmlns:s="library://ns.adobe.com/flex/spark"
 4. xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
 5. creationComplete="SrvTreeList.send();init()">
 6. <fx:Style>
 7. Tree {
 8. folderClosedIcon: ClassReference(null);
 9. folderOpenIcon: ClassReference(null);
10. }
11. </fx:Style>
12.
13. <fx:Script>
14. <![CDATA[
15. import mx.collections.ArrayCollection;
16. import mx.controls.Alert;
17. import mx.core.DragSource;
18. import mx.core.UIComponent;
19. import mx.events.DragEvent;
20. import mx.managers.DragManager;
21. import mx.rpc.events.ResultEvent;
22.
23. var XMLTreeList:XML;
24. protected function treeService_resultHandler(event:ResultEvent):void
25. {
26. //先把数据取出来交给XML,再交给dataProvider，因为dataProvider不能直接解析String为XML
27. XMLTreeList=XML(SrvTreeList.lastResult.toString());
28. MusicTypeTree.dataProvider=XMLTreeList;
29.
30. }
31.
32. public function init():void{
33.
34. var item: ContextMenuItem=new ContextMenuItem("添加");
35. var menu:ContextMenu=new ContextMenu();
36. menu.customItems.push(item);
37. MusicTypeTree.contextMenu=menu;
38. }
39.
40.
41.
42. protected function tree1_clickHandler(event:MouseEvent):void
43. {
44. if(MusicTypeTree.selectedItem.hasOwnProperty("@value" ))
45. {
46.
47. var u:URLRequest=new URLRequest(MusicTypeTree.selectedItem.@value);
48. //navigateToURL(new URLRequest(MusicTypeTree.selectedItem.@value));
49. navigateToURL(u);
50. } else
51. {
52. //没有那就展开，如果展开了就收缩
53. MusicTypeTree.expandItem(MusicTypeTree.selectedItem,!MusicTypeTree.isItemOpen(MusicTypeTree.selectedItem),true);
54. }
55. }
56.
57. //添加兄弟节点
58. protected function addBefore():void
59. {
60. var xml:XML=MusicTypeTree.selectedItem as XML;
61. var text:String=nextName.text;
62. if(xml!=null && text.length>0) {
63. var parent:XML=xml.parent();
64. if(parent!=null) {
65. var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\" parentid=\"\" />");
66. child.@foddersortName=text;
67. parent.insertChildBefore(xml,child);
68. } else {
69. Alert.show("不能选中根节点");
70. }
71. } else {
72. Alert.show("需要先选中节点和填入文字");
73. }
74. }
75.
76. protected function addAfter():void
77. {
78. var xml:XML=MusicTypeTree.selectedItem as XML;
79. var text:String=nextName.text;
80. if(xml!=null && text.length>0) {
81. var parent:XML=xml.parent();
82. if(parent!=null) {
83. var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\" parentid=\"\" />");
84. child.@foddersortName=text;
85. parent.insertChildAfter(xml,child);
86. } else {
87. Alert.show("不能选中根节点");
88. }
89. } else {
90. Alert.show("需要先选中节点和填入文字");
91. }
92. }
93.
94. protected function addSon():void
95. {
96. var xml:XML=MusicTypeTree.selectedItem as XML;
97. var text:String=nextName.text;
98. if(xml!=null && text.length>0) {
99. var parent:XML=xml.parent();
100. var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\" parentid=\"\" />");
101. child.@foddersortName=text;
102. xml.appendChild(child);
103. MusicTypeTree.expandChildrenOf(xml,true);
104. } else {
105. Alert.show("需要先选中节点和填入文字");
106. }
107. }
108. protected function editNode():void
109. {
110. var xml:XML=MusicTypeTree.selectedItem as XML;
111. var text:String=nextName.text;
112. if(xml!=null && text.length>0) {
113. xml.@foddersortName=text;
114. } else {
115. Alert.show("需要先选中节点和填入文字");
116. }
117. }
118. protected function deleteNode():void
119. {
120. var xml:XML=MusicTypeTree.selectedItem as XML;
121. if(xml!=null) {
122. var list:Array=MusicTypeTree.selectedItems as Array;
123. for(var k:int=0;k<list.length;k++) {
124. xml=list[k] as XML;
125. var parent:XML=xml.parent();
126. if(parent!=null) {
127. var children:XMLList=parent.children();
128. for(var i:int=0;i<children.length();i++) {
129. if(children[i]==xml) {
130. delete children[i];
131. break;
132. }
133. }
134. } else {
135. Alert.show("不能选中根节点");
136. }
137. }
138. } else {
139. Alert.show("需要先选中节点");
140. }
141. }
142. protected function selectNode():void
143. {
144. var text:String=nextName.text;
145. if(text.length>0) {
146. var items:Array=[];
147. var list:XMLList=new XMLList();
148. list[0]=MusicTypeTree.dataProvider[0];
149. searchItems(list,text,items);
150. MusicTypeTree.selectedItems=items;
151. } else {
152. Alert.show("输入查找的文字");
153. }
154. }
155. private function searchItems(list:XMLList,find:String,items:Array):void {
156. for(var i:int=0;i<list.length();i++) {
157. var one:XML=list[i];
158. var label:String=one.@foddersortName;
159. if(label!=null && label.indexOf(find)>=0) {
160. items.push(one);
161. }
162. searchItems(one.children(),find,items);
163. }
164. }
165.
166.
167.
168. protected function closeAll():void{
169. MusicTypeTree.openItems=[];
170.
171. }
172.
173. protected function openAll():void{
174.
175.
176. MusicTypeTree.expandChildrenOf(MusicTypeTree.selectedItem,true);
177. }
178.
179.
180. protected function MusicTypeTree_dragEnterHandler(event:DragEvent):void
181. {
182. Alert.show(event.target.@foddersortName);
183. DragManager.acceptDragDrop(UIComponent(event.currentTarget));
184. }
185.
186.
187. protected function MusicTypeTree_dragOverHandler(event:DragEvent):void
188. {
189.
190. // r is the visible index in the tree
191. var dropTarget:Tree = Tree(event.currentTarget);
192.
193. var r:int = dropTarget.calculateDropIndex(event);
194. MusicTypeTree.selectedIndex = r;
195.
196. // retrieving the newly selected node, you can examine it and decide to tell
197. // the user the drop is invalid by changing the feedback.
198. var node:XML = MusicTypeTree.selectedItem as XML;
199. if( node.@foddersortName == "中国" ) {
200. DragManager.showFeedback(DragManager.NONE);
201. return;
202. }
203. // the type of drop - copy, link, or move can be reflected in the feedback as well.
204. // Here the control and shift keys determine that action.
205. if (event.ctrlKey)
206. DragManager.showFeedback(DragManager.COPY);
207. else if (event.shiftKey)
208. DragManager.showFeedback(DragManager.LINK);
209. else {
210. DragManager.showFeedback(DragManager.MOVE);
211. }
212.
213. }
214.
215.
216. protected function MusicTypeTree_dragDropHandler(event:DragEvent):void
217. {
218. var xml:XML=MusicTypeTree.selectedItem as XML;
219. Alert.show(xml.@foddersortName);
220. // var ds:DragSource = event.dragSource;
221. // var dropTarget:Tree = Tree(event.currentTarget);
222. // // retrieve the data associated with the "items" format. This will be the data that
223. // // the dragInitiator has copied into the DragSource.
224. // var items:Array = ds.dataForFormat("items") as Array;
225. // // determine where in the tree the drop occurs and select that node by the index; followed by
226. // // retrieving the node itself.
227. // var r:int = MusicTypeTree.calculateDropIndex(event);
228. // MusicTypeTree.selectedIndex = r;
229. // var node:XML = MusicTypeTree.selectedItem as XML;
230. // var p:*;
231. // // if the selected node has children (it is type==city),
232. // // then add the items at the beginning
233. // if( MusicTypeTree.dataDescriptor.hasChildren(node) ) {
234. // p = node;
235. // r = 0;
236. // } else {
237. // p = node.parent();
238. // }
239. // // taking all of the items in the DragSouce, insert them into the
240. // // tree using parent p.
241. // for(var i:Number=0; i < items.length; i++) {
242. // var insert:XML = <node />;
243. // insert.@foddersortName= items[i];
244. // //insert.@type = "restaurant";
245. // MusicTypeTree.dataDescriptor.addChildAt(p, insert, r+i);
246. // }
247. }
248.
249.
250. protected function MusicTypeTree_dragCompleteHandler(event:DragEvent):void
251. {
252. MusicTypeTree.selectedIndex = -1;
253.
254. }
255.
256. ]]>
257. </fx:Script>
258. <fx:Declarations>
259. 
260. <s:HTTPService id="SrvTreeList" url="data/tree.xml" result="treeService_resultHandler(event)" useProxy="false" resultFormat="xml" />
261. </fx:Declarations>
262. 
263. <mx:Tree click="tree1_clickHandler(event)" id="MusicTypeTree"
264. left="5" right="845"
265. showRoot="false"
266. labelField="@foddersortName"
267. bottom="243" top="40"
268. dragEnabled="true"
269. dropEnabled="true"
270. allowMultipleSelection="true"
271. allowDragSelection="true"
272. dragDrop="MusicTypeTree_dragDropHandler(event)"
273. dragEnter="MusicTypeTree_dragEnterHandler(event)"
274. ></mx:Tree>
275. <s:TextInput id="nextName" x="432" y="40"/>
276. <s:Button x="443" y="82" label="增加为哥" click="addBefore()"/>
277. <s:Button x="443" y="111" label="增加为弟" click="addAfter()"/>
278. <s:Button x="444" y="144" click="addSon()" label="增加为孩子"/>
279. <s:Button x="444" y="178" click="editNode()" label="修改节点"/>
280. <s:Button x="444" y="211" click="deleteNode()" label="删除节点"/>
281. <s:Button x="443" y="244" click="selectNode()" label="选择节点"/>
282. <s:Button x="443" y="277" click="closeAll()" label="全部收缩"/>
283. <s:Button x="443" y="306" click="openAll()" label="全部展开"/>
284.
285. </s:Application>
286. 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
 creationComplete="SrvTreeList.send();init()">
 <fx:Style>
 Tree {
 folderClosedIcon: ClassReference(null);
 folderOpenIcon: ClassReference(null);
 }
 </fx:Style>

 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 import mx.controls.Alert;
 import mx.core.DragSource;
 import mx.core.UIComponent;
 import mx.events.DragEvent;
 import mx.managers.DragManager;
 import mx.rpc.events.ResultEvent;

 var XMLTreeList:XML;
 protected function treeService_resultHandler(event:ResultEvent):void
 {
 //先把数据取出来交给XML,再交给dataProvider，因为dataProvider不能直接解析String为XML
 XMLTreeList=XML(SrvTreeList.lastResult.toString());
 MusicTypeTree.dataProvider=XMLTreeList;

 }

 public function init():void{

 var item: ContextMenuItem=new ContextMenuItem("添加");
 var menu:ContextMenu=new ContextMenu();
 menu.customItems.push(item);
 MusicTypeTree.contextMenu=menu;
 }

 protected function tree1_clickHandler(event:MouseEvent):void
 {
 if(MusicTypeTree.selectedItem.hasOwnProperty("@value" ))
 {

 var u:URLRequest=new URLRequest(MusicTypeTree.selectedItem.@value);
 //navigateToURL(new URLRequest(MusicTypeTree.selectedItem.@value));
 navigateToURL(u);
 } else
 {
 //没有那就展开，如果展开了就收缩
 MusicTypeTree.expandItem(MusicTypeTree.selectedItem,!MusicTypeTree.isItemOpen(MusicTypeTree.selectedItem),true);
 }
 }

 //添加兄弟节点
 protected function addBefore():void
 {
 var xml:XML=MusicTypeTree.selectedItem as XML;
 var text:String=nextName.text;
 if(xml!=null && text.length>0) {
 var parent:XML=xml.parent();
 if(parent!=null) {
 var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\" parentid=\"\" />");
 child.@foddersortName=text;
 parent.insertChildBefore(xml,child);
 } else {
 Alert.show("不能选中根节点");
 }
 } else {
 Alert.show("需要先选中节点和填入文字");
 }
 }

 protected function addAfter():void
 {
 var xml:XML=MusicTypeTree.selectedItem as XML;
 var text:String=nextName.text;
 if(xml!=null && text.length>0) {
 var parent:XML=xml.parent();
 if(parent!=null) {
 var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\" parentid=\"\" />");
 child.@foddersortName=text;
 parent.insertChildAfter(xml,child);
 } else {
 Alert.show("不能选中根节点");
 }
 } else {
 Alert.show("需要先选中节点和填入文字");
 }
 }

 protected function addSon():void
 {
 var xml:XML=MusicTypeTree.selectedItem as XML;
 var text:String=nextName.text;
 if(xml!=null && text.length>0) {
 var parent:XML=xml.parent();
 var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\" parentid=\"\" />");
 child.@foddersortName=text;
 xml.appendChild(child);
 MusicTypeTree.expandChildrenOf(xml,true);
 } else {
 Alert.show("需要先选中节点和填入文字");
 }
 }
 protected function editNode():void
 {
 var xml:XML=MusicTypeTree.selectedItem as XML;
 var text:String=nextName.text;
 if(xml!=null && text.length>0) {
 xml.@foddersortName=text;
 } else {
 Alert.show("需要先选中节点和填入文字");
 }
 }
 protected function deleteNode():void
 {
 var xml:XML=MusicTypeTree.selectedItem as XML;
 if(xml!=null) {
 var list:Array=MusicTypeTree.selectedItems as Array;
 for(var k:int=0;k<list.length;k++) {
 xml=list[k] as XML;
 var parent:XML=xml.parent();
 if(parent!=null) {
 var children:XMLList=parent.children();
 for(var i:int=0;i<children.length();i++) {
 if(children[i]==xml) {
 delete children[i];
 break;
 }
 }
 } else {
 Alert.show("不能选中根节点");
 }
 }
 } else {
 Alert.show("需要先选中节点");
 }
 }
 protected function selectNode():void
 {
 var text:String=nextName.text;
 if(text.length>0) {
 var items:Array=[];
 var list:XMLList=new XMLList();
 list[0]=MusicTypeTree.dataProvider[0];
 searchItems(list,text,items);
 MusicTypeTree.selectedItems=items;
 } else {
 Alert.show("输入查找的文字");
 }
 }
 private function searchItems(list:XMLList,find:String,items:Array):void {
 for(var i:int=0;i<list.length();i++) {
 var one:XML=list[i];
 var label:String=one.@foddersortName;
 if(label!=null && label.indexOf(find)>=0) {
 items.push(one);
 }
 searchItems(one.children(),find,items);
 }
 }



 protected function closeAll():void{
 MusicTypeTree.openItems=[];

 }

 protected function openAll():void{


 MusicTypeTree.expandChildrenOf(MusicTypeTree.selectedItem,true);
 }

 protected function MusicTypeTree_dragEnterHandler(event:DragEvent):void
 {
 Alert.show(event.target.@foddersortName);
 DragManager.acceptDragDrop(UIComponent(event.currentTarget));
 }

 protected function MusicTypeTree_dragOverHandler(event:DragEvent):void
 {

 // r is the visible index in the tree
 var dropTarget:Tree = Tree(event.currentTarget);

 var r:int = dropTarget.calculateDropIndex(event);
 MusicTypeTree.selectedIndex = r;

 // retrieving the newly selected node, you can examine it and decide to tell
 // the user the drop is invalid by changing the feedback.
 var node:XML = MusicTypeTree.selectedItem as XML;
 if( node.@foddersortName == "中国" ) {
 DragManager.showFeedback(DragManager.NONE);
 return;
 }
 // the type of drop - copy, link, or move can be reflected in the feedback as well.
 // Here the control and shift keys determine that action.
 if (event.ctrlKey)
 DragManager.showFeedback(DragManager.COPY);
 else if (event.shiftKey)
 DragManager.showFeedback(DragManager.LINK);
 else {
 DragManager.showFeedback(DragManager.MOVE);
 }

 }

 protected function MusicTypeTree_dragDropHandler(event:DragEvent):void
 {
 var xml:XML=MusicTypeTree.selectedItem as XML;
 Alert.show(xml.@foddersortName);
// var ds:DragSource = event.dragSource;
// var dropTarget:Tree = Tree(event.currentTarget);
// // retrieve the data associated with the "items" format. This will be the data that
// // the dragInitiator has copied into the DragSource.
// var items:Array = ds.dataForFormat("items") as Array;
// // determine where in the tree the drop occurs and select that node by the index; followed by
// // retrieving the node itself.
// var r:int = MusicTypeTree.calculateDropIndex(event);
// MusicTypeTree.selectedIndex = r;
// var node:XML = MusicTypeTree.selectedItem as XML;
// var p:*;
// // if the selected node has children (it is type==city),
// // then add the items at the beginning
// if( MusicTypeTree.dataDescriptor.hasChildren(node) ) {
// p = node;
// r = 0;
// } else {
// p = node.parent();
// }
// // taking all of the items in the DragSouce, insert them into the
// // tree using parent p.
// for(var i:Number=0; i < items.length; i++) {
// var insert:XML = <node />;
// insert.@foddersortName= items[i];
// //insert.@type = "restaurant";
// MusicTypeTree.dataDescriptor.addChildAt(p, insert, r+i);
// }
 }

 protected function MusicTypeTree_dragCompleteHandler(event:DragEvent):void
 {
 MusicTypeTree.selectedIndex = -1;

 }

 ]]>
 </fx:Script>
 <fx:Declarations>
 
 <s:HTTPService id="SrvTreeList" url="data/tree.xml" result="treeService_resultHandler(event)" useProxy="false" resultFormat="xml" />
 </fx:Declarations>
 
 <mx:Tree click="tree1_clickHandler(event)" id="MusicTypeTree"
 left="5" right="845"
 showRoot="false"
 labelField="@foddersortName"
 bottom="243" top="40"
 dragEnabled="true"
 dropEnabled="true"
 allowMultipleSelection="true"
 allowDragSelection="true"
 dragDrop="MusicTypeTree_dragDropHandler(event)"
 dragEnter="MusicTypeTree_dragEnterHandler(event)"
 ></mx:Tree>
 <s:TextInput id="nextName" x="432" y="40"/>
 <s:Button x="443" y="82" label="增加为哥" click="addBefore()"/>
 <s:Button x="443" y="111" label="增加为弟" click="addAfter()"/>
 <s:Button x="444" y="144" click="addSon()" label="增加为孩子"/>
 <s:Button x="444" y="178" click="editNode()" label="修改节点"/>
 <s:Button x="444" y="211" click="deleteNode()" label="删除节点"/>
 <s:Button x="443" y="244" click="selectNode()" label="选择节点"/>
 <s:Button x="443" y="277" click="closeAll()" label="全部收缩"/>
 <s:Button x="443" y="306" click="openAll()" label="全部展开"/>

</s:Application>

 * [点击查看原始大小图片]
 * 大小: 15.1 KB

 * [点击查看原始大小图片]
 * 大小: 3.8 KB

 * [点击查看原始大小图片]
 * 大小: 8.7 KB

 * 查看图片附件

11
顶
3
踩
分享到：
Flex4之Tree开发【二】 | Flex4之与后台服务器通信方式：WebService

 * 2010-07-06 09:43
 * 浏览 11099
 * 评论(8)
 * 分类:Web前端
 * 相关推荐

评论
8 楼 JavaCrazyer 2012-12-18
bcabchappy 写道
非常感谢楼主，雪中送汤啊

不用客气哈
7 楼 bcabchappy 2012-12-17
非常感谢楼主，雪中送汤啊
6 楼 caiqi7073you 2012-09-11

caiqi7073you 写道
太好了，正需要……

不错
5 楼 caiqi7073you 2012-09-11
太好了，正需要……
4 楼舍予先生 2012-02-23

3 楼坚强的核桃 2012-01-15
受用了大哥多谢
2 楼 jackshanjack 2011-12-05
正好最近做项目要用到！总结的很好！
1 楼游其是你 2011-07-13
哥们，你讲的太好了！
发表评论

您还没有登录,请您登录后再发表评论
JavaCrazyer的博客
JavaCrazyer

 * 浏览: 756209 次
 * 性别: Icon_minigender_1
 * 来自: 河南
 *

最近访客更多访客>>
zb89757的博客
zb89757
cst_qiuqiu的博客
cst_qiuqiu
dylinshi126的博客
dylinshi126
thrillerzw的博客
thrillerzw
文章分类

 * 全部博客 (338)
 * Java综合 (24)
 * 程序人生 (54)
 * RIA-ExtJS专栏 (18)
 * RIA-mxGraph专栏 (4)
 * RIA-Flex4专栏 (43)
 * 框架-Spring专栏 (16)
 * 框架-持久化专栏 (22)
 * 框架-Struts2专栏 (11)
 * 框架-Struts专栏 (12)
 * SQL/NOSQL (12)
 * 报表/图表 (2)
 * 工作流 (5)
 * XML专栏 (4)
 * 日常报错解决方案 (5)
 * Web前端-综合 (12)
 * Web/JSP (14)
 * Web前端-ajax专栏 (14)
 * Web前端-JQuery专栏 (9)
 * IDE技巧 (6)
 * FILE/IO (14)
 * 远程服务调用 (2)
 * SSO单点登录 (2)
 * 资源分享 (22)
 * 云计算 (1)
 * 项目管理 (3)
 * php专栏 (1)
 * Python专栏 (2)
 * Linux (1)
 * 缓存系统 (1)
 * 队列服务器 (1)
 * 网络编程 (0)

社区版块

 * 我的资讯 (0)
 * 我的论坛 (7)
 * 我的问答 (4)

存档分类

 * 2013-04 (8)
 * 2013-01 (1)
 * 2012-12 (3)
 * 更多存档...

评论排行榜

 * Netty使用实例
 * Eclipse远程调试（远程服务器端监听)
 * windows下配置PHP+Nginx+MySQL完整流程
 * 我的ItEye技术博客历程
 * 2013,又一个新的开始

最新评论

 * wuzhihui001： 受教了，谢谢
 Hibernate温习(7)--JPA回顾
 * yinsuxiaokucha：
 JNDI全面总结
 * 小笨笨->多多：是楼主没写明白这个啦 private final Channe ...
 Netty使用实例
 * JavaCrazyer：蓝风逝写道非常感谢楼主的无私奉献
 《Spring in Action》完整中文版分享下载
 * 蓝风逝：非常感谢楼主的无私奉献
 《Spring in Action》完整中文版分享下载

声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。若作者同意转载，必须以超链接形式标明文章原始出处和作者。
© 2003-2012 ITeye.com. All rights reserved. [ 京ICP证110151号京公网安备110105010620 ]