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>