FLEX 树形菜单例子（三）

针对树形菜单的相关操作，实现的大致功能如下：

1.展开所有节点

2.关闭所有节点

3.选中某个节点并展开父节点

4.添加节点

5.修改节点

6.删除节点

7.修改节点图标

7.模糊查询节点

8.同级之间的节点拖拽

<?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:XML id="treeData" xmlns="">
			<root label="监控点">
				<node id="1" label="软件园一期" icon="iconNode" pid="0">
					<node id="6" pid="1" label="望海路一" icon="iconNode"/>
					<node id="7" pid="1" label="观日路一" icon="iconNode"/>
				</node>
				<node id="2" label="软件园二期" icon="iconNode" pid="0">
					<node id="8" pid="2" label="望海路二" icon="iconNode"/>
				</node>
				<node id="3" label="软件园三期" icon="iconNode" pid="0">
					<node id="9" pid="3" label="望海路三" icon="iconNode"/>
				</node>
				<node id="4" label="软件园四期" icon="iconNode" pid="0">
					<node id="10" pid="4" label="望海路四" icon="iconNode"/>
				</node>
				<node id="5" label="软件园五期" icon="iconNode" pid="0">
					<node id="11" pid="5" label="望海路五" icon="iconNode"/>
				</node>
			</root>
		</fx:XML>
	</fx:Declarations>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		.treeStyle{
			/*去掉默认文件夹图标*/
			folderClosedIcon: ClassReference(null);
			folderOpenIcon: ClassReference(null);
			
			/*去掉叶子节点图标*/
			defaultLeafIcon: ClassReference(null);
			
			/*
			defaultLeafIcon    指定叶图标
			disclosureClosedIcon    指定的图标旁边显示一个封闭的分支节点。默认的图标是一个黑色三角形。
			disclosureOpenIcon    指定的图标旁边显示一个开放的分支节点。默认的图标是一个黑色三角形。
			folderClosedIcon    关闭指定的文件夹图标的一个分支节点。
			folderOpenIcon    指定打开的文件夹图标的一个分支节点。
			例：三角图标修改如下代码使用即可换成自己的了：
			disclosureOpenIcon:Embed(source='images/a.png');
			disclosureClosedIcon:Embed(source='images/b.png');
			*/
			disclosureOpenIcon:Embed(source='tree_open.png');
			disclosureClosedIcon:Embed(source='tree_close.png');
			folderOpenIcon:Embed(source='node.png');
			folderClosedIcon:Embed(source='node.png');
			
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			
			import mx.controls.Alert;
			import mx.core.DragSource;
			import mx.core.UIComponent;
			import mx.events.DragEvent;
			import mx.managers.DragManager;
			
			[Bindable]
			[Embed(source="node_open.png")] 
			public var iconNode:Class; 
			[Bindable]
			[Embed(source="node.png")] 
			public var uIcon:Class; 
			
			
			//添加在统计节点之前
			protected function addBefore():void
			{
				var xml:XML=tree.selectedItem as XML; //转换xml
				var text:String=nodeText.text; //获取文本框的值
				if(xml!=null && text.length>0) {
					var parent:XML=xml.parent(); //获取父xml
					if(parent!=null) {
						var pid:int = 0;
						if(parent.hasOwnProperty("@pid")){
							pid = parent.@pid;
						} 
						var child:XML=new XML("<node id=\"\" pid=\"" + pid + "\" label=\"\" icon=\"iconNode\" />");
						child.@label=text;
						parent.insertChildBefore(xml,child);
					} else {
						Alert.show("不能选中根节点");
					}
				} else {
					Alert.show("需要先选中节点和填入文字");
				}
			}
			
			//添加在同级节点之后
			protected function addAfter():void
			{
				var xml:XML=tree.selectedItem as XML;
				var text:String=nodeText.text;
				if(xml!=null && text.length>0) {
					var parent:XML=xml.parent();
					if(parent!=null) {
						var pid:int = 0;
						if(parent.hasOwnProperty("@pid")){
							pid = parent.@pid;
						} 
						var child:XML=new XML("<node id=\"\" pid=\"" + pid + "\" label=\"\" icon=\"iconNode\" />");
						child.@label=text;
						parent.insertChildAfter(xml,child);
					} else {
						Alert.show("不能选中根节点");
					}
				} else {
					Alert.show("需要先选中节点和填入文字");
				}
			}
			
			//添加子节点
			protected function addSon():void
			{
				var xml:XML=tree.selectedItem as XML;
				var text:String=nodeText.text;
				if(xml!=null && text.length>0) {
					var parent:XML=xml.parent();
					var child:XML=new XML("<node id=\"\" pid=\"" + parent.@pid + "\" label=\"\" icon=\"iconNode\" />");
					child.@label=text;
					xml.appendChild(child);
					tree.expandChildrenOf(xml,true);
				} else {
					Alert.show("需要先选中节点和填入文字");
				}			
			}
			
			//修改节点
			protected function editNode():void
			{
				var xml:XML=tree.selectedItem as XML;
				var text:String=nodeText.text;
				if(xml!=null && text.length>0) {
					xml.@label=text;
				} else {
					Alert.show("需要先选中节点和填入文字");
				}			
			}
			
			//删除节点
			protected function deleteNode():void
			{
				var xml:XML=tree.selectedItem as XML;
				if(xml!=null) {
					var list:Array=tree.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=nodeText.text;
				if(text.length>0) {
					var items:Array=[];
					var list:XMLList=new XMLList();
					list[0]=tree.dataProvider[0];				
					searchItems(list,text,items);
					tree.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.@label;
					if(label!=null && label.indexOf(find)>=0) {
						items.push(one);
					}
					searchItems(one.children(),find,items);
				}
			}
			
			
			
			protected function closeAll():void{
				tree.openItems=[];
				
			}
			
			protected function openAll():void{
				//tree.expandChildrenOf(tree.selectedItem,true);
				tree.openItems = treeData..node;
			}
			
			private function searchOpen():void 
			{
				if(nodeText.text.length>0) {
					var node:XMLList = treeData.child("node").child("node").(@label == nodeText.text);
					expandParents(node[0]);
					tree.selectedItem = node[0];
					var idx:int = tree.getItemIndex(node[0]);
					tree.scrollToIndex(idx);
				} else {
					Alert.show("输入查找的文字");
				}
				
			}
			
			private function expandParents(node:XML):void 
			{
				if (node && !tree.isItemOpen(node)) 
				{
					tree.expandItem(node, true);
					expandParents(node.parent()); 
				}
			}
			
			//根据关键字查找节点
			private function searchNode():void {
				var key:String = search.text
				var list:XMLList = treeData.child("node").child("node").(@label.indexOf(key) != -1);
				if(key.length == 0) {
					this.closeAll();
				} else {
					if(list.length() == 0) {
						Alert.show("没有找到相关信息！请重试","提示");
					} else if(list.length() == 1) {
						//展开并选中
						expandParents(list[0]); 
						tree.selectedItem = list[0];
					} else if(list.length() > 1) {
						tree.dataProvider = list;
					}
				}
			}
			
			private function exit():void{
				tree.dataProvider = treeData;
				search.text = "";
			}
			private var flag:Boolean = true;
			private function updateIcon():void{
				var xml:XML=tree.selectedItem as XML;
				var text:String=nodeText.text;
				if(flag){
					xml.@icon="uIcon";
					flag = false;
				}else{
					xml.@icon="iconNode";
					flag = true;
				}
			}
			
			private var _draggedItem:XML = null;     
			private function onDragEnter( event:DragEvent ) : void      
			{                   
				event.preventDefault();          
				event.currentTarget.hideDropFeedback(event);    
				var ds:DragSource = event.dragSource;           
				var items:Array = ds.dataForFormat("treeItems") as Array;    
				if (items != null && items.length > 0 && (items[0] is XML))       
					_draggedItem = items[0];                         
				DragManager.acceptDragDrop(UIComponent(event.currentTarget));       
			}                     
			private function onDragOver( event:DragEvent ) : void      
			{                   
				event.preventDefault();                  
				event.currentTarget.hideDropFeedback(event);          
				tree.selectedIndex = tree.calculateDropIndex(event);      
				var node:XML = tree.selectedItem as XML;                   
				// restrict drag & drop to nodes within same parent       
				if (_draggedItem.parent() != node.parent())                
				{                     
					DragManager.showFeedback(DragManager.NONE);      
					
					return;            
				}                        
				DragManager.showFeedback(DragManager.MOVE);  
			}      
			
			private function onDragDrop( event:DragEvent ) : void      
			{                  
				event.preventDefault();               
				event.currentTarget.hideDropFeedback(event);       
				tree.selectedIndex = tree.calculateDropIndex(event);   
				var node:XML = tree.selectedItem as XML;                          
				var addToIndex:int = node.childIndex();           
				if ((_draggedItem.parent() == node.parent()) && (addToIndex != _draggedItem.childIndex()))            
				{     
					tree.dataDescriptor.removeChildAt(node.parent(), _draggedItem, _draggedItem.childIndex());         
					tree.dataDescriptor.addChildAt(node.parent(), _draggedItem, addToIndex);              
				}         
			}                      
			private function onDragComplete( event:DragEvent ) : void             
			{                  
				tree.selectedIndex = -1;        
			}  
			
		]]>
	</fx:Script>

	<s:layout>
		<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	<s:BorderContainer>
		<s:TextInput x="10" y="10" id="search"/>
		<s:Button x="10" y="35" width="60" label="搜索" click="searchNode()"/>
		<s:Button x="75" y="35" width="60" label="退出" click="exit()"/>
		<mx:Tree id="tree" y="60" iconField="@icon" styleName="treeStyle"
				 dataProvider="{treeData}" borderVisible="false"
				 labelField="@label" showRoot="false" height="300" width="150" 
				 allowMultipleSelection="false"     
				 dragEnabled="true"        
				 dropEnabled="true"         
				 dragMoveEnabled="false" 
				 dragEnter="onDragEnter(event)"        
				 dragOver="onDragOver(event)"        
				 dragDrop="onDragDrop(event)"        
				 dragComplete="onDragComplete(event)"
				 />
	</s:BorderContainer>
	
	<s:VGroup>
		<s:TextInput id="nodeText" />
		<s:Button label="添加同级之前" click="addBefore()"/>
		<s:Button label="添加同级之后" click="addAfter()"/>
		<s:Button label="添加子节点" click="addSon()"/>
		<s:Button label="修改节点" click="editNode()"/>
		<s:Button label="删除节点" click="deleteNode()"/>
		<s:Button label="关闭所有" click="closeAll()"/>
		<s:Button label="展开所有" click="openAll()"/>
		<s:Button label="查询展开" click="searchOpen()"/>
		<s:Button label="修改图标" click="updateIcon()"/>
	</s:VGroup>
	
</s:Application>