Tree范例

Tree实例

<?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="600"   minHeight="300"><mx:Tree labelField="@label" top="10" bottom="10" left="10" right="10"><fx:XMLList><node label="部门"><node label="人事部"><node label="张三"/></node><node label="技术部"><node label="李四"/><node label="王五"/></node><node label="市场部"  isBranch="true"/></node></fx:XMLList></mx:Tree></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="600"   minHeight="300"><mx:Tree labelField="label" top="10" bottom="10" left="10" right="10"><s:ArrayCollection><fx:Object label="部门"><fx:children><fx:Object label="人事部"><fx:children><fx:Object label="张三"/></fx:children></fx:Object><fx:Object label="技术部"><fx:children><fx:Object label="李四"/><fx:Object label="王五"/></fx:children></fx:Object><fx:Object label="市场部"   children="{[]}"/></fx:children></fx:Object></s:ArrayCollection></mx:Tree></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="600"   minHeight="300"   creationComplete="creationCompleteHandler(event)"><fx:Declarations><fx:XML id="treeData"><node label="部门"><node label="人事部"><node label="张三"/></node><node label="技术部"><node label="李四"/><node label="王五"/></node><node label="市场部"  isBranch="true"/></node></fx:XML></fx:Declarations><fx:Script><![CDATA[import mx.controls.Tree;import mx.events.FlexEvent;protected function creationCompleteHandler(event:FlexEvent):void{var tree:Tree=new Tree();tree.labelField="@label";tree.percentWidth=100;tree.percentHeight=100;tree.setStyle("borderVisible", false);tree.dataProvider=treeData;addElement(tree);}]]></fx:Script></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="600"   minHeight="300"><fx:Declarations><fx:XMLList id="treeData"><node label="部门"><node label="人事部"><node label="张三"/></node><node label="技术部"><node label="李四"/><node label="王五"/></node><node label="市场部"  isBranch="true"/></node></fx:XMLList></fx:Declarations><mx:Tree labelField="@label" dataProvider="{treeData}" defaultLeafIcon="@Embed(source='assets/leaf.gif')" folderClosedIcon="@Embed(source='assets/closed.gif')" folderOpenIcon="@Embed(source='assets/open.gif')" top="10" bottom="10" left="10" right="10"></mx:Tree></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="600"   minHeight="300"><fx:Script><![CDATA[private function expandTree(isExpand:Boolean):void{tree.validateNow();tree.expandChildrenOf(treeData, isExpand);}]]></fx:Script><fx:Declarations><fx:XML id="treeData"><node label="部门"><node label="人事部"><node label="张三"/></node><node label="技术部"><node label="李四"/><node label="王五"/></node><node label="市场部"  isBranch="true"/></node></fx:XML></fx:Declarations><mx:Tree id="tree" dataProvider="{treeData}" labelField="@label" top="40" bottom="10" left="10" right="10"></mx:Tree><s:Button id="expandBtn"  x="10"  y="10"  label="全部展开"  click="expandTree(true)"/><s:Button id="collapseBtn"  x="90"  y="10"  label="全部收起"  click="expandTree(false)"/></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="600"   minHeight="300"><fx:Script><![CDATA[private function expandTree(isExpand:Boolean):void{tree.validateNow();tree.expandChildrenOf(treeData.getItemAt(0), isExpand);}]]></fx:Script><fx:Declarations><s:ArrayCollection id="treeData"><fx:Object label="部门"><fx:children><fx:Object label="人事部"><fx:children><fx:Object label="张三"/></fx:children></fx:Object><fx:Object label="技术部"><fx:children><fx:Object label="李四"/><fx:Object label="王五"/></fx:children></fx:Object><fx:Object label="市场部"/></fx:children></fx:Object></s:ArrayCollection></fx:Declarations><mx:Tree id="tree" dataProvider="{treeData}" labelField="label" top="40" bottom="10" left="10" right="10"></mx:Tree><s:Button id="expandBtn"  x="10"  y="10"  label="全部展开"  click="expandTree(true)"/><s:Button id="collapseBtn"  x="90"  y="10"  label="全部收起"  click="expandTree(false)"/></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="600"   minHeight="300"><fx:Declarations><fx:XMLList id="treeData"><node id="00"  pid="root"  label="部门"  isBranch="true"/><node id="0001"  pid="00"  label="人事部"  isBranch="true"/><node id="000101"  pid="0001"  label="张三"/><node id="0002"  pid="00"  label="技术部"  isBranch="true"/><node id="000201"  pid="0002"  label="李四"/><node id="000202"  pid="0002"  label="王五"/><node id="0003"  pid="00"  label="市场部"/></fx:XMLList></fx:Declarations><fx:Script><![CDATA[import mx.events.TreeEvent;protected function getChildren(id:String):XMLList{return treeData.(@pid == id);}protected function asyncTree_itemOpeningHandler(event:TreeEvent):void{if (event.opening && ((event.item as XML).children().length() == 0)){var children:XMLList=getChildren(event.item.@id);event.item.appendChild(children);}}]]></fx:Script><mx:Tree id="asyncTree" labelField="@label" dataProvider="{getChildren('root')}" itemOpening="asyncTree_itemOpeningHandler(event)" top="10" bottom="10" left="10" right="10"></mx:Tree></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="600"   minHeight="300"><fx:Declarations><fx:Array id="treeData"><fx:Object uid="00"   pid="root"   label="部门"   children="{[]}"></fx:Object><fx:Object uid="0001"   pid="00"   label="人事部"   children="{[]}"/><fx:Object uid="000101"   pid="0001"   label="张三"/><fx:Object uid="0002"   pid="00"   label="技术部"   children="{[]}"/><fx:Object uid="000201"   pid="0002"   label="李四"/><fx:Object uid="000202"   pid="0002"   label="王五"/><fx:Object uid="0003"   pid="00"   label="市场部"/></fx:Array></fx:Declarations><fx:Script><![CDATA[import mx.events.TreeEvent;protected function getChildren(uid:String):Array{return treeData.filter(function(item:*, index:int, arr:Array):Boolean{return (item.pid == uid) ? true : false;});}protected function asyncTree_itemOpeningHandler(event:TreeEvent):void{if (event.opening && (event.item.children.length == 0)){var children:Array=getChildren(event.item.uid);event.item.children=children;}}]]></fx:Script><mx:Tree id="asyncTree" labelField="label" dataProvider="{getChildren('root')}" itemOpening="asyncTree_itemOpeningHandler(event)" top="10" bottom="10" left="10" right="10"></mx:Tree></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="600"   minHeight="300"><fx:Script><![CDATA[private function addNode():void{(tree.selectedItem as XML).appendChild(<node label="新节点"/>);}private function deleteNode():void{tree.dataDescriptor.removeChildAt(tree.selectedItem.parent(), tree.selectedItem, tree.selectedItem.childIndex(), tree.dataProvider);}]]></fx:Script><fx:Declarations><fx:XML id="treeData"><node label="部门"><node label="人事部"><node label="张三"/></node><node label="技术部"><node label="李四"/><node label="王五"/></node><node label="市场部"  isBranch="true"/></node></fx:XML></fx:Declarations><mx:Tree id="tree" dataProvider="{treeData}" labelField="@label" showRoot="false" top="40" bottom="10" left="10" right="10"></mx:Tree><s:Button id="addBtn"  x="10"  y="10"  label="添加节点"  click="addNode()"/><s:Button id="deleteBtn"  x="90"  y="10"  label="删除节点"  click="deleteNode()"/></s:Application>