Flex 3入门教程: 使用 Tree 控件

Tree控件是一个枝和叶节点分层次的机构。树中没每一个条目叫做节点，节点既可以作为枝也可以作为叶。枝节点可以包含叶或枝节点，或者为空。一个叶节点就是一个树的末梢。本快速指南包含一些开发者在使用Treecontrols经常会遇到的一些挑战。

使用XMLLISTCOLLECTION 和ARRAYCOLLECTION对象的对比。

你也许想知道，在运行时从远程或本地得来的数据被动态修改的时候，应该使用XMLListCollection对象还是ArrayCollection对象作为Tree空间的数据提供者。

如果你使用的数据源提供成形的XML，并且，你想在Tree控件中操作 XML数据。你应该使用XMLListCollection对象作为数据提供者。当使用MXML标记时，如果数据源是XMLList对象，你应该把它绑定到XMLLsitCollection对象的source属性上，然后把 XMLListCollection对象绑定到Tree控件的dataProvider属性上。

当你想要动态改变对象值时，不要使用XMLList或XML对象直接绑定到Tree控件的dataProvider属性上。当数据源是RPC(远程过程调用)服务的lastResult属性，并且你想使用XML数据，确保RPC组件的resultFormat属性被设置成e4x，当你使用e4x结果格式，最总结果就是XMLList，可以绑定在XMLListCollection对象上。

这里有一个例子。为例数据被动态改变，使用ArrayCollection对象作为Tree控件的数据提供器。当使用MXML标记时，如果你期望动态的改变Arrayl，你不应该把Array对象直接绑定到Tree控件的dataProvider属性上。作为代替，你应该绑定Array到一个ArrayCollection对象的source属性上，然后再把ArrayCollection对象绑定到Tree控件的dataProvider属性上。

当数据源是RPC(远程过程调用)服务的lastResult对象，并且RPC组件的resultFormat属性被成object，你应该使用ArrayUtil.toArray()方法来确保对象是一个Array。然后绑定到ArrayCollection对象上，就像下边的例子所示：

1. <mx:ArrayCollection
2. id="employeeAC"
3. source="{ArrayUtil.toArray(employeeSrv.lastResult.employees.employee)}"/>

在运行时增加和删除叶子节点

你可以在运行时为Tree控件增加或删除叶子节点。下边的例子包含的代码来实现这种改变。这个程序使用预定义的枝和叶来初始化，表现公司部门和员工。你可以向任意枝节点增加叶节点在运行时。你也可以删除预定义的叶节点和你在运行时增加的节点。

在这个例子中的XML包含两种不同的元素名字，department和employee。Tree控件的label函数，决定根据元素的类型应该显示那些文本。它使用了E4X语法来返回department的title，或者employee的name。然后，这些语法在addEmployee()和removeEmployee()中会用到。

为了增加员工到业务部门，addEmployee()方法使用E4X语法，通过title属性的值获得业务部门的节点，并把它保存到XMLList类型的变量dept中。然后，通过调用dept.appendChild()方法向操作节点添加子结点。remove方法保存当前被选择的元素到变量node中，node的类型是XML。调用node.localName()方法确定被选择的元素是否是employee节点。如果是employee节点，删除它。

例子

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"viewSourceURL="src/index.html">
4. <mx:Script>
5. <![CDATA[importmx.collections.XMLListCollection;
7. [Bindable]
8. privatevarcompany:XML=
9. <list>
10. <departmenttitle="Finance"code="200">
11. <employeename="JohnH"/>
12. <employeename="SamK"/>
13. </department>
14. <departmenttitle="Operations"code="400">
15. <employeename="BillC"/>
16. <employeename="JillW"/>
17. </department>
18. <departmenttitle="Engineering"code="300">
19. <employeename="ErinM"/>
20. <employeename="AnnB"/>
21. </department>
22. </list>;
24. [Bindable]
25. privatevarcompanyData:XMLListCollection=newXMLListCollection(company.department);
27. privatefunctiontreeLabel(item:Object):String
28. {
29. varnode:XML=XML(item);
30. if(node.localName()=="department")
31. returnnode.@title;
32. else
33. returnnode.@name;
34. }
35. privatefunctionaddEmployee():void
36. {
37. varnewNode:XML=<employee/>;
38. newNode.@name=empName.text;
39. vardept:XMLList=company.department.(@title=="Operations");
40. if(dept.length()>0){
41. dept[0].appendChild(newNode);
42. empName.text="";
43. }
44. }
45. privatefunctionremoveEmployee():void
46. {
47. varnode:XML=XML(tree.selectedItem);
48. if(node==null)return;
49. if(node.localName()!="employee")return;
51. varchildren:XMLList=XMLList(node.parent()).children();
52. for(vari:Number=0;i<children.length();i++){
53. if(children[i].@name==node.@name){
54. deletechildren[i];
55. }
56. }
57. }
58. ]]>
59. </mx:Script>
61. <mx:Treeid="tree"top="72"left="50"dataProvider="{companyData}"
62. labelFunction="treeLabel"
63. height="224"width="179"/>
64. <mx:HBox>
65. <mx:Buttonlabel="AddOperationsEmployee"click="addEmployee()"/><mx:TextInputid="empName"/>
66. </mx:HBox>
67. <mx:Buttonlabel="RemoveSelectedEmployee"click="removeEmployee()"/>
68. </mx:Application>

提示：可以通过右键flash查看官方源文件

在运行时添加一个空的枝节点

可以在运行时向Tree控件添加空的枝节点。下边的例子展示了通过数据提供器(data provider)API和数据描述器(data descriptor )API添加枝节点。通常，添加枝节点的首选途径是通过数据提供器(data provider)API。

addEmptyBranthDP()方法通过数据提供器API向使用XML数据提供器的Tree组件增加一个空节点，这个方法为新节点创建一个XML类型的变量，并且设置这个节点的isBranch属性为true来创建一个枝节点。然后这个方法调用Tree控件的dataProvider.addItemAt()方法来向Tree控件的数据提供器增加新的元素。

addEmptyBranchDP2()方法通过数据提供器API向使用对象数据提供器的Tree组件增加一个空节点，这个方法使用children属性创建一个新的对象，使用children属性能够确保isBranch()方法返回true。然后，这个方法调用Tree控件的dataProvider.addItemAt()方法来向Tree控件的数据提供器增加新的对象。

addEmptyBranchDD()方法通过数据描述器(data descripter)API。这个方法创建一个XML类型的变量，并且设置isBranch属性为true来创建一个枝节点。然后，这个方法调用Tree控件的dataDescriptor.addChildAt()方法来向Tree控件的数据描述器添加一个新的子节点。

例子

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"viewSourceURL="src/index.html"><mx:Script>
3. <![CDATA[
4. [Bindable]
5. privatevardataX:XML=
6. <itemlabel="Top">
7. <itemlabel="ChildOne"/>
8. <itemlabel="ChildTwo"/>
9. </item>;
11. [Bindable]
12. privatevardataObj:Object=
13. [{label:"Top",children:
14. [
15. {label:"ChildOne"},{label:"ChildTwo"}
16. ]
17. }];
19. //AddingabranchbygoingthroughtheTreecontrol'sdataProvider.Thisis
20. //thepreferredmethod.
21. //TogglingtheisBranchattributetotruecausesDefaultDataDescriptor.isBranch()
22. //toreturntrueandtheTreetreatsthenodeasabranch.
23. privatefunctionaddEmptyBranchDP():void
24. {
25. varnewNode:XML=<itemlabel='Middle'isBranch="true"></item>;
26. xmlBound2Tree.dataProvider.addItemAt(newNode,1);
27. }
29. //Foranobjectgraph,thekeypointisthatthechildrenpropertyneedstobedefined,
30. //evenifitisempty.
31. //ThiscausesisBranch()toreturntrueandtheTreetreatsthenewnodeasabranch.
32. privatefunctionaddEmptyBranchDP2():void
33. {
34. varnewObj:Object={label:"Middle",children:[]};
35. objGraphBound2Tree.dataProvider.addItemAt(newObj,1);
36. }
38. //AddingabranchbygoingthroughtheTreecontrol'sdataDescriptor.
39. privatefunctionaddEmptyBranchDD():void
40. {
41. varnewNode:XML=<itemlabel='Child4'isBranch="true"></item>;
42. xmlBound2Tree.dataDescriptor.addChildAt(dataX,newNode,2,dataX);
43. }
44. ]]>
45. </mx:Script>
46. <mx:Labeltext="TreewithXMLdata"/>
47. <mx:Treeid="xmlBound2Tree"dataProvider="{dataX}"labelField="@label"showRoot="true"width="200"/>
48. <mx:Buttonlabel="AddEmptyBranchthroughthedataProvider"click="addEmptyBranchDP();"/>
49. <mx:Buttonlabel="AddEmptyBranchthroughthedataDescriptor"click="addEmptyBranchDD();"/>
50. <mx:Spacerheight="10"/>
51. <mx:Labeltext="Treewithobjectdata"/>
52. <mx:Treeid="objGraphBound2Tree"dataProvider="{dataObj}"width="200"/>
53. <mx:Buttonlabel="AddEmptyBranchthroughthedataProvider"click="addEmptyBranchDP2();"/>
54. </mx:Application>

结果

打开树到指定的节点

默认的，Tree控件在初始化后是收缩的，你也许不确定如何初始化控件时展开数，并且选定指定的节点。下边的例子，展示了如何实现它。在这个程序中，initTree()方法，在Tree控件被创建后调用。这个方法展开Tree控件的根节点，并且设置selectedIndex属性为指定节点的索引号。

1. <?xmlversion="1.0"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"viewSourceURL="src/index.html"><mx:Script>
3. <![CDATA[
4. importFlash.events.*;
5. importmx.events.*;
6. importmx.controls.*;
7. privatefunctioninitTree():void{
8. XMLTree1.expandItem(MailBox.getItemAt(0),true);
9. XMLTree1.selectedIndex=2;
10. }
11. ]]>
12. </mx:Script>
13. <mx:Treeid="XMLTree1"width="150"height="170"
14. labelField="@label"creationComplete="initTree();">
15. <mx:XMLListCollectionid="MailBox">
16. <mx:XMLList>
17. <nodelabel="Mail"data="100">
18. <nodelabel="Inbox"data="70"/>
19. <nodelabel="PersonalFolder"data="10">
20. <nodelabel="Business"data="2"/>
21. <nodelabel="Demo"data="3"/>
22. <nodelabel="SavedMail"data="5"/>
23. </node>
24. <nodelabel="Sent"data="15"/>
25. <nodelabel="Trash"data="5"/>
26. </node>
27. </mx:XMLList>
28. </mx:XMLListCollection>
29. </mx:Tree>
30. </mx:Application>

结果

读取多节点名XML文档

你可以从具有多个节点名字的XML文档中组装Tree 控件。下边的例子实现了这个功能。Tree控件的数据提供者是一个XMLListCollection，它组装自一个包含folder和Pfolder元素的XMLList。Tree控件的labelField属性被设置为label属性，不管元素叫什么名字，这个属性对XMLList中的所有属性都是公共的。

例子

1. <?xmlversion="1.0"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"viewSourceURL="src/index.html">
3. <mx:Treeid="tree1"dataProvider="{MailBox}"labelField="@label"showRoot="true"width="160"/>
4. <mx:XMLListCollectionid="MailBox"source="{Folders}"/>
5. <mx:XMLListid="Folders">
6. <folderlabel="Mail">
7. <folderlabel="INBOX"/>
8. <folderlabel="PersonalFolder">
9. <Pfolderlabel="Business"/>
10. <Pfolderlabel="Demo"/>
11. <Pfolderlabel="SavedMail"/>
12. </folder>
14. <folderlabel="Sent"/>
15. <folderlabel="Trash"/>
16. </folder>
17. </mx:XMLList>
18. </mx:Application>

结果

当数据提供器更新时保持Tree控件打开

默认地，当数据提供器更新数据时Tree控件收缩。下边的例子展示了当数据提供器更新时保持Tree控件打开的方法。
在这个应用程序中，当一个用户单击Button控件时changeProvider()方法更新数据提供器。通常，这会导致Tree控件收缩。然而，Tree控件的渲染事件处理器，renderTree()方法，放置收缩的发生。当changerProvider()方法被调用，当前状态是打开的元素被保存到对象open变量中。当数据被刷新时，被命名为refreshData的Boolean类型的变量被置为true。renderTree()方法调用Tree控件的invalidateList()方法来刷新树的行。然后置refreshDate属性为false，并且重置Tree控件的打开元素属性为open对象变量，这个变量在刷新前就包含了状态是打开的元素。

例子

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"initialize="initTree()"viewSourceURL="srcview/index.html">
4. <mx:Script>
5. <![CDATA[
6. [Bindable]
7. publicvaropen:Object=newObject();
8. [Bindable]
10. publicvarrefreshData:Boolean=false;
11. [Bindable]
12. publicvarswitchObj:Object=newObject();
13. [Bindable]
15. publicvarfirstObj:Object=newObject();
16. [Bindable]
18. publicvarfirstObj1:Object=newObject();
19. [Bindable]
21. publicvarfirstObj2:Object=newObject();
22. [Bindable]
24. publicvarprovider:String="firstObj";
26. privatefunctioninitTree():void
28. {
30. firstObj=newObject();
31. firstObj.label="Foods";
32. firstObj.children=newArray();
33. firstObj1.label="Fruits";
34. firstObj1.children=newArray();
35. firstObj2.label="Oranges";
36. firstObj1.children[0]=firstObj2;
37. firstObj.children[0]=firstObj1;
38. switchObj=firstObj;
39. }
41. publicfunctionchangeProvider():void
42. {
43. open=SampleTree.openItems;
44. refreshData=true;
45. if(provider=="firstObj")
47. {
48. provider="switchObj";
49. SampleTree.dataProvider=switchObj;
50. }
51. else
53. {
54. provider="firstObj";
55. SampleTree.dataProvider=firstObj;
56. }
57. }
59. publicfunctionrenderTree():void{
60. if(refreshData){
62. //Refreshallrowsonnextupdate.
63. SampleTree.invalidateList();
64. refreshData=false;
65. SampleTree.openItems=open;
66. //Validateandupdatethepropertiesandlayout
67. //ofthisobjectandredrawit,ifnecessary.
68. SampleTree.validateNow();
69. }
71. }
72. ]]>
73. </mx:Script>
74. <mx:Treeid="SampleTree"render="renderTree()"width="250"dataProvider="{firstObj}"labelField="label"/>
76. <mx:Buttonlabel="ChangeDataProvider"click="changeProvider()"/>
77. </mx:Application>

结果

项和一个树控件拖放

拖拽元素到Tree控件，和从Tree控件拖拽出元素创建一个应用程序，实现拖拽元素从Tree控件中，或到Tree控件是令人畏惧的，很明显，因为需要大量的事件处理逻辑。本节提供2个例子，来示范实现这2种功能的技术。从Tree控件中拖拽出元素下边的例子展示如何从Tree控件中拖拽元素到DataGrid控件中。Tree控件的数据提供器是XML对象。通过拖拽事件处理方法前的注释可以使你读懂整个应用程序。

例子

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
4. <mx:Script>
5. <![CDATA[
6. importmx.controls.Alert;
7. importmx.controls.Label;
8. importmx.controls.List;
9. importmx.collections.ArrayCollection;
10. importmx.core.DragSource;
11. importmx.controls.Tree;
12. importmx.controls.DataGrid;
13. importmx.controls.listClasses.ListBase;
14. importmx.events.DragEvent;
15. importmx.containers.Canvas;
16. importmx.managers.DragManager;
17. importmx.core.UIComponent;
19. [Bindable]
21. privatevardataGridProvider:ArrayCollection=newArrayCollection();
22. /**
23. *HandlesthedragEntereventontheDataGridcontrol.
24. *IfthedragInitiatoristheTreecontrol,thenonlynodesoftype"restaurant"
25. *arepermittedtobedropped.
26. *HereyoucanseethatbyexaminingthedragSourceyoucandetermineif
27. *thecontrolshouldacceptthedrop.TheDataGridcontrolwouldnot
28. *knowhowtotreatabranch+childrenfromtheTreecontrol,soonlyleaf(restaurant)
29. *nodesareaccepted.
30. */
32. privatefunctiononDragEnter(event:DragEvent):void
34. {
35. if(event.dragInitiatorisTree){
36. vards:DragSource=event.dragSource;
37. if(!ds.hasFormat("treeItems"))return;//nousefuldata
39. varitems:Array=ds.dataForFormat("treeItems")asArray;
40. for(vari:Number=0;i<items.length;i++){
42. varitem:XML=XML(items[i]);
43. if(item.@type!="restaurant")return;//notwhatwewant
45. }
46. }
47. //IftheTreecontrolpassesorthedragInitiatorisnotaTreecontrol,
48. //acceptthedrop.
49. DragManager.acceptDragDrop(UIComponent(event.currentTarget));
50. }
51. /**
52. *HandlesthedragOvereventontheDataGridcontrol.
53. *IfthedragInitiatoristheTreecontrol,onlycopyisallowed.Otherwise,amove
54. *orlinkcantakeplacefromtheListcontrol.
55. */
57. privatefunctiononDragOver(event:DragEvent):void
59. {
60. if(event.dragInitiatorisTree){
61. DragManager.showFeedback(DragManager.COPY);
62. }else{
64. if(event.ctrlKey)
65. DragManager.showFeedback(DragManager.COPY);
66. elseif(event.shiftKey)
68. DragManager.showFeedback(DragManager.LINK);
69. else{
70. DragManager.showFeedback(DragManager.MOVE);
71. }
73. }
74. }
75. /**
76. *HandlesthedragExiteventonthedroptargetandjusthidesthe
77. *thedropfeedback.
78. */
79. privatefunctiononDragExit(event:DragEvent):void
81. {
82. vardropTarget:ListBase=ListBase(event.currentTarget);
83. dropTarget.hideDropFeedback(event);
84. }
86. /**
87. *HandlesthedragDropeventontheDataGridwhenthe
88. *dragproxyisreleased.
89. */
90. privatefunctiononGridDragDrop(event:DragEvent):void
92. {
93. vards:DragSource=event.dragSource;
94. vardropTarget:DataGrid=DataGrid(event.currentTarget);
95. vararr:Array;
96. if(ds.hasFormat("items")){
98. arr=ds.dataForFormat("items")asArray;
99. }elseif(ds.hasFormat("treeItems")){
101. arr=ds.dataForFormat("treeItems")asArray;
102. }
103. for(vari:Number=0;i<arr.length;i++){
105. varnode:XML=XML(arr[i]);
106. varitem:Object=newObject();
107. item.label=node.@label;
108. item.type=node.@type;
109. dataGridProvider.addItem(item);
110. }
112. onDragExit(event);
113. }
114. /**
115. *InterceptsthedragCompleteeventontheTreecontrol
116. *andpreventsthedefaultbehaviorfromhappening.Thisisnecessary
117. *iftheitembeingdraggedfromtheTreecontrolisdroppedonanon-Tree
118. *object,suchastheDataGrid.
119. */
120. privatefunctiononTreeDragComplete(event:DragEvent):void{
122. event.preventDefault();
123. }
124. /**
125. *SelectsalloftheitemsintheListifCtrl+AispickedwhentheListcontrol
126. *hasfocus.
127. */
128. privatefunctionselectAllMaybe(event:KeyboardEvent):void
130. {
131. if(event.ctrlKey&&event.keyCode==65){
133. varl:List=List(event.currentTarget);
134. varallItems:Array=newArray(l.dataProvider.length);
135. for(vari:Number=0;i<allItems.length;i++){
137. allItems[i]=i;
138. }
139. l.selectedIndices=allItems;
140. }
142. }
143. ]]>
144. </mx:Script>
145. <mx:XMLid="treeData"xmlns="">
146. <root>
148. <nodelabel="Massachusetts"type="state"data="MA">
149. <nodelabel="Boston"type="city">
150. <nodelabel="SmokeHouseGrill"type="restaurant"/>
151. <nodelabel="Equator"type="restaurant"/>
152. <nodelabel="Aquataine"type="restaurant"/>
153. <nodelabel="Grill23"type="restaurant"/>
155. </node>
156. <nodelabel="Provincetown"type="city">
157. <nodelabel="LobsterPot"type="restaurant"/>
158. <nodelabel="TheMews"type="restaurant"/>
159. </node>
160. </node>
162. <nodelabel="California"type="state"data="CA">
163. <nodelabel="SanFrancisco"type="city">
164. <nodelabel="FrogLane"type="restaurant"/>
165. </node>
166. </node>
167. </root>
169. </mx:XML>
171. <mx:Labelx="34"y="40"text="DragitemsfromthisTree"/>
172. <mx:Labelx="34"y="55"text="(itemsarecopied)"/>
174. <mx:Treex="34"y="81"width="181"height="189"
175. dataProvider="{treeData.node}"
176. labelField="@label"
177. dropEnabled="false"
178. dragEnabled="true"
179. dragComplete="onTreeDragComplete(event)"
180. dragMoveEnabled="false"
181. />
183. <mx:Labelx="291"y="55"text="DropitemsfromTreehere"/>
184. <mx:DataGridx="291"y="81"height="189"
185. dragEnabled="true"
186. dataProvider="{dataGridProvider}"
187. dragEnter="onDragEnter(event)"
188. dragOver="onDragOver(event)"
189. dragDrop="onGridDragDrop(event)"
190. dragExit="onDragExit(event)">
192. <mx:columns>
193. <mx:DataGridColumnheaderText="Label"dataField="label"/>
194. <mx:DataGridColumnheaderText="Type"dataField="type"/>
196. </mx:columns>
197. </mx:DataGrid>
198. </mx:Application>

树控件拖放

下面的示例演示如何将项从列表控件拖到树控件。 树数据提供程序是XML对象。

例子

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
3. <mx:Script>
4. <![CDATA[
6. importmx.events.DragEvent;
7. importmx.managers.DragManager;
8. importmx.core.DragSource;
9. importmx.core.UIComponent;
10. importmx.controls.Tree;
11. /**
12. *CalledassoonasthedragProxyentersthetarget.Youcanaddlogic
13. *todetermineifthetargetwillacceptthedropbasedonthe
14. *dragInitiator,thedataavailableinthedragSource.
15. *Herethedropisblindlyaccepted.
16. */
18. privatefunctiononDragEnter(event:DragEvent):void
20. {
21. DragManager.acceptDragDrop(UIComponent(event.currentTarget));
22. }
23. /**
24. *CalledwhilethedragProxyisoverthedroptarget.Youcan
25. *usethisfunctiontodeterminethetypeoffeedbacktoshow.
26. *SincetheListissettoallowMOVE(theitemisdeleted
27. *oncedropped),differentfeedbackpossibilitiesaregiven.
28. *
29. *Also,forthisapplication,theTreecontrolnodethedragProxyis
30. *overisselected.AsthedragProxymoves,theTreecontrol's
31. *selectionchanges.
32. *
33. *Forabitmorecomplication,thedropisbeingallowed
34. *onlyovernodeswhosetypeisNOT'state'.
35. *Thefeedbackisremoved.
36. */
37. privatefunctiononDragOver(event:DragEvent):void
39. {
40. vardropTarget:Tree=Tree(event.currentTarget);
41. varr:int=dropTarget.calculateDropIndex(event);
42. tree.selectedIndex=r;
43. varnode:XML=tree.selectedItemasXML;
44. if(node.@type=="state"){
46. DragManager.showFeedback(DragManager.NONE);
47. return;
48. }
49. if(event.ctrlKey)
51. DragManager.showFeedback(DragManager.COPY);
52. elseif(event.shiftKey)
53. DragManager.showFeedback(DragManager.LINK);
54. else{
56. DragManager.showFeedback(DragManager.MOVE);
57. }
58. }
59. /**
60. *CalledwhenthedragProxyisreleased
61. *overthedroptarget.TheinformationinthedragSource
62. *isextractedandprocessed.
63. *
64. *Thetargetnodeisdeterminedand
65. *allofthedataselected(theListhasallowMultipleSection
66. *set)isadded.
67. */
68. privatefunctiononDragDrop(event:DragEvent):void
70. {
71. vards:DragSource=event.dragSource;
72. vardropTarget:Tree=Tree(event.currentTarget);
73. varitems:Array=ds.dataForFormat("items")asArray;
74. varr:int=tree.calculateDropIndex(event);
75. tree.selectedIndex=r;
76. varnode:XML=tree.selectedItemasXML;
77. varp:*;
78. //iftheselectednodehaschildren(itistype==city),
80. //thenaddtheitemsatthebeginning
81. if(tree.dataDescriptor.hasChildren(node)){
82. p=node;
83. r=0;
84. }else{
86. p=node.parent();
87. }
88. for(vari:Number=0;i<items.length;i++){
90. varinsert:XML=<node/>;
91. insert.@label=items[i];
92. insert.@type="restaurant";
93. tree.dataDescriptor.addChildAt(p,insert,r+i);
94. }
96. }
97. /**
98. *Calledwhenthedragoperationcompletes,whether
99. *successfullyornot.Thetreeisclearedofits
100. *selection.
101. */
102. privatefunctiononDragComplete(event:DragEvent):void
104. {
105. tree.selectedIndex=-1;
106. }
107. ]]>
108. </mx:Script>
109. <mx:XMLid="treeData"xmlns="">
111. <root>
112. <nodelabel="Massachusetts"type="state"data="MA">
113. <nodelabel="Boston"type="city">
114. <nodelabel="SmokeHouseGrill"type="restaurant"/>
115. <nodelabel="Equator"type="restaurant"/>
116. <nodelabel="Aquataine"type="restaurant"/>
118. <nodelabel="Grill23"type="restaurant"/>
119. </node>
120. <nodelabel="Provincetown"type="city">
121. <nodelabel="LobsterPot"type="restaurant"/>
122. <nodelabel="TheMews"type="restaurant"/>
123. </node>
125. </node>
126. <nodelabel="California"type="state"data="CA">
127. <nodelabel="SanFrancisco"type="city">
128. <nodelabel="FrogLane"type="restaurant"/>
129. </node>
130. </node>
132. </root>
133. </mx:XML>
134. <mx:Arrayid="listData">
135. <mx:String>JohnnyRocket's</mx:String>
137. <mx:String>JetPizza</mx:String>
138. <mx:String>Steve'sGreek</mx:String>
139. <mx:String>Sonsie</mx:String>
140. <mx:String>TheBorderCafe</mx:String>
142. </mx:Array>
143. <mx:Panelx="48"y="125"width="447"height="351"layout="absolute"title="DragontoTree">
144. <mx:Treewidth="186"left="10"top="10"bottom="10"id="tree"
145. labelField="@label"
146. dataProvider="{treeData.node}"
147. dropEnabled="false"
148. dragMoveEnabled="false"
149. dragEnter="onDragEnter(event)"
150. dragOver="onDragOver(event)"
151. dragDrop="onDragDrop(event)">
153. </mx:Tree>
154. <mx:Listwidth="188"height="206"right="10"bottom="10"id="list"
155. allowMultipleSelection="true"
156. dataProvider="{listData}"
157. dragEnabled="true"
158. dragMoveEnabled="true"
159. dragComplete="onDragComplete(event)">
161. </mx:List>
162. <mx:Textx="229"y="10"text="Dragfromthelistbelowtothetree"width="188"height="39"/>
164. <mx:Labelx="229"y="69"text="restaurants"/>
165. </mx:Panel>
166. </mx:Application>

结果