FLEX TREE +右键菜单 +过滤+拖拽(待完成)

• 主页面

<?xml version="1.0" encoding="utf-8"?>
<!-- working_with_tree_controls/TreeAddRemoveNodes.mxml -->
<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"
			   xmlns:mycomponent="com.treeList.*"
			   creationComplete="app_onCreate()" 
			   >
	
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			import com.treeList.event.GetTextContentEvent;
			
			import flash.events.*;
			import flash.ui.*;
			
			import mx.collections.ArrayCollection;
			import mx.collections.XMLListCollection;
			import mx.controls.Alert;
			import mx.events.ListEvent;
			import mx.managers.PopUpManager;
			
			public static const DELETE_NODE :String = " - Del ";
			public static const ADD_NODE :String = " + Add a Ndde";
			public static const ADD_FOLDER :String = " + Add a Folder";
			public static const EDIT :String = " @ Edit";
			
			[Bindable]
			private var cm :ContextMenu ;
			[Bindable]
			private var company : XML = 
				<list>
					  <department label="Finance" code="200">
						  <manage label="Manager">
 							<employee label="John H"/>
						    <employee label="Sam K"/>
						  </manage>
						  <employee label="John H"/>
						  <employee label="Sam K"/>
					  </department>
					  <department label="Operations" code="400">
						  <employee label="Bill C"/>
						  <employee label="Jill W"/>
					  </department>                   
					  <department label="Engineering1111" code="300">
						  <employee label="Erin M11111111111111111"/>
						  <employee label="Ann B"/>
					  </department>   
				</list>;
			
			[Bindable]
			private var xmlData : XMLListCollection = new XMLListCollection (company.department);
			[Bindable]
			private var arrData : ArrayCollection = 
				new ArrayCollection ([{children:new ArrayCollection ([{children:"",label:"child1A"},{children:"cNode1B",label:"child1B"}]),label:"ROOT"}]);
			
			protected function app_onCreate():void{
				var childArrData : ArrayCollection = 
					new ArrayCollection ([{children:"NODEb1",label:"child2A"},{children:"NODEb2",label:"child2A"}]);
				arrData.getItemAt(0).children[0].children = childArrData;
				init();
			}
			
			/* protected function labelF (item:Object):String{
				var node :XML = XML (item);
				if(node.localName()=="department")
					return node.@title;
				
				return node.@name;
			} */
			
			
			//for the right-click
			// 为鼠标右键添加关闭当前浏览器窗口的菜单
			protected function init():void {
				cm= new ContextMenu();
				cm.addEventListener(ContextMenuEvent.MENU_SELECT,right_click);
				cm.hideBuiltInItems(); // 隐藏一些内建的鼠标右键菜单项
//				var contextMenuItem : ContextMenuItem = new ContextMenuItem("关闭本窗口");
//				cm.customItems.push(contextMenuItem);
//				contextMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, 
//					function(event : ContextMenuEvent) : void{
//					navigateToURL(new URLRequest("javascript:window.close()"), "_self");
//				});
//				this.contextMenu = contextMenu; 
			}
			
			protected function right_click(event:ContextMenuEvent):void {
				cm.customItems=null;
				var customItemList :Array =  new Array ();
				var isFolder :Boolean = tree.dataDescriptor.isBranch(tree.selectedItem);
				if(isFolder){
					 var addButton:ContextMenuItem= new ContextMenuItem(ADD_NODE);
					 addButton.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,add_childNode);
					 customItemList.push(addButton);
					 
					 var addFolder:ContextMenuItem=new ContextMenuItem(ADD_FOLDER);
					 addFolder.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,add_childFolder);
					 customItemList.push(addFolder);
				} 
				var delButton:ContextMenuItem=new ContextMenuItem(DELETE_NODE);
				delButton.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,del_Node);
				customItemList.push(delButton);
				
				//for edit pop-up window
				var editButton :ContextMenuItem = new ContextMenuItem (EDIT);
				editButton.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,edit_popUp);
				customItemList.push(editButton);
				
				//regist all the menu item
				cm.customItems = customItemList;
			}
			
			protected function add_childNode(event:ContextMenuEvent):void {
				var node :XML = tree.selectedItem as XML;
					node.appendChild(new XML ("<employee label='new nodes'/>"));
				expandNode();
			}
			
			protected function add_childFolder(event:ContextMenuEvent):void {
				
				var node :XML = tree.selectedItem as XML;
				if(node.localName() == "department"){
					node.appendChild(new XML ("<manager label='Manager'><employee label='employee'></employee></manager>"));
				}else{
					node.appendChild(new XML ("<employee label='Employee'><new label='New'></new></employee>"));
				}
				expandNode();
				// close all the expand node 
//				tree.openItems = [];
			}
			
			protected function del_Node(event:ContextMenuEvent):void {
				tree.dataDescriptor.removeChildAt(tree.selectedItem.parent(),tree.selectedItem,
											      tree.selectedItem.childIndex(),tree.dataProvider);
			}
			
			protected function tree_doubleClick(event:ListEvent):void {
				tree.editable = true;
				Tree(event.target).editedItemPosition= {columnIndex:0,rowIndex:event.rowIndex};
			}
			
			protected function tree_editBegining(event:ListEvent):void {
				//due to the single-click event will auto make the tree is editable
				//use this function to prevent the single-click to edit
				event.preventDefault();
			}
			
			protected function expandNode():void {
			    tree.expandItem(tree.selectedItem,true,true);	
			}
			
			private var popView :PopUpView ;
			protected function edit_popUp(event:ContextMenuEvent):void {
				popView = new PopUpView ();
				popView = PopUpManager.createPopUp(this,PopUpView,true) as PopUpView;
				popView.title = "Please input the Lable ";
				PopUpManager.centerPopUp(popView);
				
				popView.addEventListener(GetTextContentEvent.GET_INPUT_CONTENT,getInputData);
			}
			
			// events 
			public function getInputData(event:GetTextContentEvent):void{
				PopUpManager.removePopUp(popView);
				var node :XML = tree.selectedItem as XML;
				node.@label = event.inputContent;
			}
			
		]]>
	</fx:Script>
	
	<s:Scroller>
		<s:VGroup>
			<mx:Grid>
				<mx:GridRow>
					<mx:GridItem>
						<mx:Tree id="tree" 
								 dataProvider="{xmlData}" 
								 contextMenu="{cm}"
								 labelField="@label"
								 doubleClickEnabled="true" 
								 itemDoubleClick="tree_doubleClick(event)"
								 itemEditBeginning="tree_editBegining(event)" 
								 width="300" height="500"
								 horizontalScrollPolicy="auto" 
								 horizontalScrollPosition="500" 
								 dataTipField="" showDataTips="true" 
								 dragEnabled="true" 
								 dragMoveEnabled="true"
								 dropEnabled="true" 
								 >
						</mx:Tree>
					</mx:GridItem>
				</mx:GridRow>
			</mx:Grid>
			
		</s:VGroup>
	</s:Scroller>
	
</s:Application>

 

• pup window

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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"
			   close="titlewindow1_closeHandler(event)" 
			   width="300" 
			   height="100" 
			   >
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.treeList.event.GetTextContentEvent;
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;

			protected function titlewindow1_closeHandler(event:CloseEvent):void
			{	
				trace(inputData.text.length);
				if(inputData.text.length != 0){
					Alert.show("You want to save the informaition ?","Confirm",Alert.YES|Alert.NO|Alert.CANCEL,this,pop_select);	
				}else{
					PopUpManager.removePopUp(this);
				}
			}


			protected function pop_Ok_clickHandler(event:MouseEvent):void
			{
				if(inputData.text.length != 0){
					Alert.show("You want to save the informaition ?","Confirm",Alert.YES|Alert.NO|Alert.CANCEL,this,pop_select);	
				}else{
					PopUpManager.removePopUp(this);
				}
				
			}
			
			private var _getContentEvent :GetTextContentEvent = new GetTextContentEvent (GetTextContentEvent.GET_INPUT_CONTENT,true); ;
			protected function pop_select(event:CloseEvent):void{
				if(event.detail == Alert.YES){
					_getContentEvent.inputContent = inputData.text ;
					dispatchEvent(_getContentEvent);
				}else if(event.detail == Alert.NO)
				{
					PopUpManager.removePopUp(this);
				}
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout  horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	<s:Scroller>
	
		<s:VGroup>
			<mx:Grid>
				<mx:GridRow> 
						<mx:GridItem verticalAlign="middle">
							<s:Label text="Label : "/>
						</mx:GridItem>
						<mx:GridItem>
							<s:TextInput id="inputData" />
						</mx:GridItem>
				</mx:GridRow>
			</mx:Grid>
			<s:Button id="pop_Ok" label="OK" click="pop_Ok_clickHandler(event)"/>
		</s:VGroup>
		
	</s:Scroller>
</s:TitleWindow >

 

• 过滤

<?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 com.treeList.model.MyTree;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.utils.ObjectUtil;
			
			import spark.events.TextOperationEvent;
			
			[Bindable]
			private var dta:ArrayCollection = new ArrayCollection ();
			private var dtaa:ArrayCollection = new ArrayCollection ();
			
			private var dta1 :ArrayCollection = new ArrayCollection ();
			
			protected function init():void{
				for(var l:int = 0; l<350;l++){
					var d:MyTree = new MyTree ();
					d.label = "Node--"+l ;
					d.children = null;
					dta1.addItem(d);
				}
				
				//
				var dd:MyTree = new MyTree ();
				dd.label = "Node--77" ;
				dd.children = null;
				
				//
				var tem2:ArrayCollection = new ArrayCollection ();
				for(var k:int = 100; k<3500;k++){
					tem2.addItem(dta1.getItemAt(6));
					tem2.addItem(dta1.getItemAt(7));
				}
				dta1.getItemAt(2).children = tem2 ;
				//------------
				var tem0:ArrayCollection = new ArrayCollection ();
				tem0.addItem(dta1.getItemAt(2));
				tem0.addItem(dta1.getItemAt(3));
				tem0.addItem(dta1.getItemAt(4));
				dta1.getItemAt(0).children = tem0 ;
				
				dtaa.addItem(dta1.getItemAt(0));
				//-------------
				var tem1:ArrayCollection = new ArrayCollection ();
				tem1.addItem(dta1.getItemAt(5));
				tem1.addItem(dd);
				dta1.getItemAt(1).children = tem1 ;
				dtaa.addItem(dta1.getItemAt(1));
				
				//
				dtaa.addItem(dta1.getItemAt(8));
				
				//root
				var rd:MyTree = new MyTree ();
				rd.label = "" ;
				rd.children = dtaa;
				dta.addItem(rd);
			}
			
			protected function filterText_Handler(event:TextOperationEvent):void{
				var tempDataProvider :ArrayCollection = new ArrayCollection ();
				for (var k:uint = 0; k < dta.length; k++) {
					tempDataProvider.addItem(mx.utils.ObjectUtil.copy(dta.getItemAt(k)));
				}
				
				if(filterText.text.length !=0){
					/* for(var i:int= 0 ;i<tempDataProvider.length;i++){
						 if(tempDataProvider.getItemAt(i).children!=null){*/
							filterTextRecursion(tempDataProvider.source[0]);
						/* }
						
					} */
					tree1.dataProvider = tempDataProvider;
				}else{
					tree1.dataProvider = dta;
				}
				tree1.invalidateList();
			}
			
			protected function filterTextRecursion(object:Object):void{
				if(object.children!=null){
					for each (var obj:Object in object.children){
						filterTextRecursion(obj);
					}
					object.children = new ArrayCollection (object.children.source);
					object.children.filterFunction = filterData;
					object.children.refresh();
					
					//for the expand tree 
					tree1.callLater(expandTree);
				}
				
			}
			
			protected function expandTree():void{
				expandTree1(tree1.dataProvider as ArrayCollection);
			}
			
			protected function expandTree1(dtas:ArrayCollection):void{
				for each (var o:Object in dtas)
				{
					tree1.expandItem(o, true);
					if (o.children && o.children.length)
						expandTree1(o.children);
				}
			} 
			
			protected function filterData(item:Object):Boolean{
				var temLabel:String = item.label;
				if(temLabel.indexOf(filterText.text)>=0 || item.children){
					if(item.children!=null && item.children.length ==0 && temLabel.indexOf(filterText.text)<0){
						return false;
					}
					return true;
				}
				return false;
			}
			
			protected function filterData1(item:Object):Boolean{
				var temLabel:String = item.label;
				if(temLabel.indexOf(filterText.text)==-1){
					return false;
				}
				return true;
			}
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
//				expandTree(dta);
			}
		]]>
	</fx:Script>
	

	<s:VGroup>
		<s:TextInput id="filterText" change="filterText_Handler(event)"/>
		<mx:Tree id="tree1" dataProvider="{dta}" width="300" height="200"/>
		<s:Button click="button1_clickHandler(event)" label="order" />
	</s:VGroup>
		
	
</s:Application>