`
JavaCrazyer
  • 浏览: 2990801 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

Flex4之Tree开发【二】

FlexAdobeXMLFlashActionScript 
阅读更多

这次要说的是Flex的树组件的拖动效果，从树组件拖动到其他组件如List,DataGrid或者从其他组件拖动到Tree组件中,其实主要就是处理drag相关事件

 

第一：从Tree到List

   示例一

    

<?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="myData">
			<data>
				<item label="ActionScript">
					<item label="Flash" />
					<item label="Flex" />
				</item>
				<item label="Mirage">
				</item>
				<item label="JavaScript"/>
			</data>
		</fx:XML>
		<fx:XML id="copyData">
			<data>
				<item label="JavaScript"/>
			</data>
		</fx:XML>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Button;
			import mx.core.IUIComponent;
			import mx.core.DragSource;
			import mx.managers.DragManager;
			import mx.events.DragEvent;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			//拖动对象进入时
			private function onDragOver( event:DragEvent ) : void
			{
				var dropTarget:Tree = Tree(event.currentTarget);
				var r:int = dropTarget.calculateDropIndex(event);
				lbl.text = '当前位置：'+r.toString();//哪一个节点在鼠标下并给出相应信息
				tree2.selectedIndex = r; //显示位置
				var node:XML = sourceTree.selectedItem as XML;
				lbl2.text = '当前的拖动对象是:'+node.@label;//拖动对象的名字
				if( node.@label == "ActionScript" ) {
					DragManager.showFeedback(DragManager.NONE);
					return;
				}
				// 键盘控制 
				if (event.ctrlKey)
					DragManager.showFeedback(DragManager.COPY);//复制
				else if (event.shiftKey)
					DragManager.showFeedback(DragManager.LINK);//剪切
				else {
					DragManager.showFeedback(DragManager.MOVE);//移动
				}
			} 
			
			//拖动对象被抛出后
			private function onDragDrop( event:DragEvent ) : void
			{
				// var ds:DragSource = event.dragSource;
				var dropTarget:Tree = Tree(event.currentTarget);
				// retrieve the data associated with the "items" format.
				//var items:Array = ds.dataForFormat("items") as Array;
				var r:int = tree2.calculateDropIndex(event);
				tree2.selectedIndex = r;//当拖放完成后选定相应的节点
				var node:XML = tree2.selectedItem as XML;
				var p:*;
				//tree2.dataDescriptor.hasChildren(node)判断有没有子节点,如果有就返回true
				if( tree2.dataDescriptor.hasChildren(node) ) {
					p = node;
					r = 0;
					trace('有子节点');
				} else {
					p = node.parent();
					trace('没有子节点');
				}
				
				// taking all of the items in the DragSouce, insert them into the 
				// tree using parent p. 
				//       for(var i:Number=0; i < items.length; i++) {
				//             var insert:XML = <node/>;
				//             insert.@label = items[i];
				//             insert.@type = "restaurant";
				//             tree2.dataDescriptor.addChildAt(p, insert, r+i);
				//       }
			} 
			
			private function onDragComplete(event:DragEvent) : void
			{
				trace('stop');
				tree2.selectedIndex = 0;
			}

		]]>
	</fx:Script>

	
	<mx:Label text="Label" id="lbl" x="439" y="120"/>
	<mx:Tree dropEnabled="true" dragEnabled="true" allowMultipleSelection="true" id="sourceTree"
			 dataProvider="{myData.item}" labelField="@label" x="114" y="146"/>
	
	<mx:Tree dropEnabled="true" id="tree2" dataProvider="{copyData.item}" labelField="@label"
			 dragOver="onDragOver(event)" dragDrop="onDragDrop(event)" dragComplete="onDragComplete(event)" x="382" y="146"/>
	
	<mx:Label x="382" y="94" text="Label" width="274" id="lbl2" height="29"/>
	<mx:Label x="218" y="62" text="Tree与Tree之间的拖动" width="139" height="19"/>
</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="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<!-- 这里定义班组树的结构和内容 -->
		<fx:XMLList id="treeData">
			<node label="Mail Box">
				<node label="工区1">
					<node label="工地1">
						<node label="班组1.1" data="111"/>
						<node label="班组1.2"/>
					</node>
					<node label="工地2">
						<node label="班组2.1"/>
						<node label="班组2.2"/>
					</node>
					<node label="工地3">
						<node label="班组3.1"/>
						<node label="班组3.2"/>
					</node>
				</node>
				<node label="工区2">
					<node label="Professional"/>
					<node label="Personal"/>
				</node>
			</node>    
		</fx:XMLList>    
	</fx:Declarations>
	
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Label;
			import mx.core.IUIComponent;
			import mx.core.DragSource;
			import mx.managers.DragManager;
			import mx.events.DragEvent;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			[Bindable]
			public var list:ArrayCollection=new ArrayCollection();
			
			//拖动初始器
			private function dragSource(e:MouseEvent,format:String):void
			{
				var iu:IUIComponent = e.currentTarget as IUIComponent;
				var ds:DragSource=new DragSource();
				ds.addData(myTree.selectedItem,format);//为myTree设置一个标号forma
				var lbl:Label=new Label(); 
				lbl.text="开始拖动";
				lbl.x = e.stageX;
				lbl.y = e.stageY;
				//lbl拖动的影子，默认为自己doDrag（拖动的对象，拖动器，事件，拖动影子，x,y）
				DragManager.doDrag(iu,ds,e,lbl,e.stageX,e.stageY);//开始拖动这个物体            
			}
			
			//当拖进去时
			private function doDragEnter(e:DragEvent,format:String):void
			{
				var len:int=(mylist.dataProvider as ArrayCollection).length;//判断list中有多少个数据
				var selectnode:XML = myTree.selectedItem as XML;//选择的节点名
				for(var i:int=0;i<len;i++)
				{
					if(validateIsEqual((mylist.dataProvider as ArrayCollection).getItemAt(i),selectnode))
					{
						Alert.show("该班组已经存在！");
					}
				}
				if(e.dragSource.hasFormat(format)){//如果标号为format则接受拖来的物体
					DragManager.acceptDragDrop(IUIComponent(e.target));
				}
			}
			
			//当拖完成时
			private function onDragDrop(e:DragEvent,format:String):void{
				var row:Object=e.dragSource.dataForFormat(format);
				list.addItem(row);//list的数据源添加数据
			}
			
			//判断选中的节点是否和List中的内容一样
			private function validateIsEqual(obj1:Object,obj2:Object):Boolean
			{
				if(obj1==obj2)//条件未判断
				{
					return true;
				}
				else
				{
					return false;
				}
			}
		]]>
	</fx:Script>
	<mx:Tree id="myTree" labelField="@label" dragEnabled="true" mouseDown="dragSource(event,'stringFormat')" 
			 showRoot="true" dataProvider="{treeData}"   height="331" horizontalCenter="-120" verticalCenter="7" width="190"/>
	
	<mx:List height="331" labelField="@label" dragEnter="doDragEnter(event,'stringFormat')"
			 dataProvider="{list}" dragDrop="onDragDrop(event,'stringFormat')" width="162" id="mylist" horizontalCenter="114" verticalCenter="7"></mx:List>
	<mx:Label x="282.5" y="97" text="Tree与list的拖动" width="152"/>
</s:Application>

 

  

 

第二：从Tree到DataGrid

  

<?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">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<fx:XML id="treeData" xmlns="">
			<root>
				
				<node label="Massachusetts" type="state" data="MA">
					<node label="Boston" type="city" >
						<node label="Smoke House Grill" type="restaurant" />
						<node label="Equator" type="restaurant" />
						<node label="Aquataine" type="restaurant" />
						<node label="Grill 23" type="restaurant" />
						
					</node>
					<node label="Provincetown" type="city" >
						<node label="Lobster Pot" type="restaurant" />
						<node label="The Mews" type="restaurant" />
					</node>
				</node>
				
				<node label="California" type="state" data="CA">
					<node label="San Francisco" type="city" >
						<node label="Frog Lane" type="restaurant" />
					</node>
				</node>
			</root>
			
		</fx:XML>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
		import mx.controls.Alert;
		import mx.controls.Label;
		import mx.controls.List;
		import mx.collections.ArrayCollection;
		import mx.core.DragSource;
		import mx.controls.Tree;
		import mx.controls.DataGrid;
		import mx.controls.listClasses.ListBase;
		import mx.events.DragEvent;
		import mx.containers.Canvas;
		import mx.managers.DragManager;
		import mx.core.UIComponent;
		
		[Bindable]
		
		private var dataGridProvider:ArrayCollection = new ArrayCollection();
		/**
		* Handles the dragEnter event on the DataGrid control.
		* If the dragInitiator is the Tree control, then only nodes of type "restaurant"
		* are permitted to be dropped.
		* Here you can see that by examining the dragSource you can determine if
		* the control should accept the drop. The DataGrid control would not
		* know how to treat a branch+children from the Tree control, so only leaf (restaurant)
		* nodes are accepted.
		*/
		
		private function onDragEnter( event:DragEvent ) : void
		
		{            
		if( event.dragInitiator is Tree ) {
		var ds:DragSource = event.dragSource;
		if( !ds.hasFormat("treeItems") ) return;     // no useful data
		
		var items:Array = ds.dataForFormat("treeItems") as Array;
		for(var i:Number=0; i < items.length; i++) {
		
		var item:XML = XML(items[i]);
		if( item.@type != "restaurant" ) return; // not what we want
		
		}
		} 
		// If the Tree control passes or the dragInitiator is not a Tree control,
		// accept the drop.
		DragManager.acceptDragDrop(UIComponent(event.currentTarget)); 
		}        
		/**
		* Handles the dragOver event on the DataGrid control.
		* If the dragInitiator is the Tree control, only copy is allowed. Otherwise, a move
		* or link can take place from the List control.
		*/
		
		private function onDragOver( event:DragEvent ) : void
		
		{
		if( event.dragInitiator is Tree ) {
		DragManager.showFeedback(DragManager.COPY);
		} else {
		
		if (event.ctrlKey)
		DragManager.showFeedback(DragManager.COPY);
		else if (event.shiftKey)
		
		DragManager.showFeedback(DragManager.LINK);
		else {
		DragManager.showFeedback(DragManager.MOVE);
		}
		
		}
		}        
		/**
		* Handles the dragExit event on the drop target and just hides the 
		* the drop feedback.
		*/
		private function onDragExit( event:DragEvent ) : void
		
		{
		var dropTarget:ListBase=ListBase(event.currentTarget);   
		dropTarget.hideDropFeedback(event);
		}
		
		/**
		* Handles the dragDrop event on the DataGrid when the 
		* drag proxy is released. 
		*/
		private function onGridDragDrop( event:DragEvent ) : void
		
		{
		var ds:DragSource = event.dragSource;
		var dropTarget:DataGrid = DataGrid(event.currentTarget);
		var arr:Array;
		if( ds.hasFormat("items") ) {
		
		arr = ds.dataForFormat("items") as Array;
		} else if( ds.hasFormat("treeItems") ) {
		
		arr = ds.dataForFormat("treeItems") as Array;
		}
		for(var i:Number=0; i < arr.length; i++) {
		
		var node:XML = XML(arr[i]);
		var item:Object = new Object();
		item.label = node.@label;
		item.type  = node.@type;
		dataGridProvider.addItem(item);
		}
		
		onDragExit(event); 
		}
		/**
		* Intercepts the dragComplete event on the Tree control
		* and prevents the default behavior from happening. This is necessary
		* if the item being dragged from the Tree control is dropped on a non-Tree
		* object, such as the DataGrid.
		*/
		private function onTreeDragComplete(event:DragEvent):void {
		
		event.preventDefault();
		}        
		/**
		* Selects all of the items in the List if Ctrl+A is picked when the List control
		* has focus.
		*/
		private function selectAllMaybe( event:KeyboardEvent ) : void
		
		{
		if( event.ctrlKey && event.keyCode == 65 ) {
		
		var l:List = List(event.currentTarget);
		var allItems:Array = new Array(l.dataProvider.length);
		for(var i:Number=0; i < allItems.length; i++) {
		
		allItems[i] = i;
		}
		l.selectedIndices = allItems;
		}
		
		}
		]]>
	</fx:Script>
	<mx:Label x="34" y="40" text="Drag items from this Tree"/>
	<mx:Label x="34" y="55" text="(items are copied)"/>
	
	<mx:Tree x="34" y="81" width="181" height="189"
			 dataProvider="{treeData.node}"
			 labelField="@label"
			 dropEnabled="false"
			 dragEnabled="true"
			 dragComplete="onTreeDragComplete(event)"
			 dragMoveEnabled="false"
			 />
	
	<mx:Label x="291" y="55" text="Drop items from Tree here"/>
	<mx:DataGrid x="291" y="81" height="189"
				 dragEnabled="true"
				 dataProvider="{dataGridProvider}"
				 dragEnter="onDragEnter(event)"
				 dragOver="onDragOver(event)"
				 dragDrop="onGridDragDrop(event)"
				 dragExit="onDragExit(event)">
		
		<mx:columns>
			<mx:DataGridColumn headerText="Label" dataField="label"/>
			<mx:DataGridColumn headerText="Type" dataField="type"/>
			
		</mx:columns>
	</mx:DataGrid>
	
</s:Application>

 

 

 

 

第三：从List到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="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<fx:XML id="treeData" xmlns="">
			
			<root>
				<node label="Massachusetts" type="state" data="MA">
					<node label="Boston" type="city" >
						<node label="Smoke House Grill" type="restaurant" />
						<node label="Equator" type="restaurant" />
						<node label="Aquataine" type="restaurant" />
						
						<node label="Grill 23" type="restaurant" />
					</node>
					<node label="Provincetown" type="city" >
						<node label="Lobster Pot" type="restaurant" />
						<node label="The Mews" type="restaurant" />
					</node>
					
				</node>
				<node label="California" type="state" data="CA">
					<node label="San Francisco" type="city" >
						<node label="Frog Lane" type="restaurant" />
					</node>
				</node>
				
			</root>
		</fx:XML>    
		<fx:Array id="listData">
			
			<fx:String>Johnny Rocket's</fx:String>
			
			<fx:String>Jet Pizza</fx:String>
			<fx:String>Steve's Greek</fx:String>
			<fx:String>Sonsie</fx:String>
			<fx:String>The Border Cafe</fx:String>
			
		</fx:Array>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.DragEvent;
			import mx.managers.DragManager;
			import mx.core.DragSource;
			import mx.core.UIComponent;
			import mx.controls.Tree;
			/**
			 * Called as soon as the dragProxy enters the target. You can add logic
			 * to determine if the target will accept the drop based on the
			 * dragInitiator, the data available in the dragSource.
			 * Here the drop is blindly accepted.
			 */
			
			private function onDragEnter( event:DragEvent ) : void
				
			{
				DragManager.acceptDragDrop(UIComponent(event.currentTarget));
			}
			/**
			 * Called while the dragProxy is over the drop target. You can
			 * use this function to determine the type of feedback to show.
			 * Since the List is set to allow MOVE (the item is deleted
			 * once dropped), different feedback possibilities are given.
			 *
			 * Also, for this application, the Tree control node the dragProxy is
			 * over is selected. As the dragProxy moves, the Tree control's
			 * selection changes.
			 *
			 * For a bit more complication, the drop is being allowed
			 * only over nodes whose type is NOT 'state'.
			 * The feedback is removed.
			 */
			private function onDragOver( event:DragEvent ) : void
				
			{
				var dropTarget:Tree = Tree(event.currentTarget);
				var r:int = dropTarget.calculateDropIndex(event);
				tree.selectedIndex = r;
				var node:XML = tree.selectedItem as XML;
				if( node.@type == "state" ) {
					
					DragManager.showFeedback(DragManager.NONE);
					return;
				}
				if (event.ctrlKey)
					
					DragManager.showFeedback(DragManager.COPY);
				else if (event.shiftKey)
					DragManager.showFeedback(DragManager.LINK);
				else {
					
					DragManager.showFeedback(DragManager.MOVE);
				}
			}
			/**
			 * Called when the dragProxy is released
			 * over the drop target. The information in the dragSource
			 * is extracted and processed.
			 *
			 * The target node is determined and 
			 * all of the data selected (the List has allowMultipleSection
			 * set) is added.
			 */
			private function onDragDrop( event:DragEvent ) : void
				
			{
				var ds:DragSource = event.dragSource;
				var dropTarget:Tree = Tree(event.currentTarget);
				var items:Array = ds.dataForFormat("items") as Array;
				var r:int = tree.calculateDropIndex(event);
				tree.selectedIndex = r;
				var node:XML = tree.selectedItem as XML;
				var p:*;
				// if the selected node has children (it is type==city),
				
				// then add the items at the beginning
				if( tree.dataDescriptor.hasChildren(node) ) {
					p = node;
					r = 0;
				} else {
					
					p = node.parent();
				}
				for(var i:Number=0; i < items.length; i++) {
					
					var insert:XML = <node />;
					insert.@label = items[i];
					insert.@type  = "restaurant";
					tree.dataDescriptor.addChildAt(p, insert, r+i);
				}
				
			}
			/**
			 * Called when the drag operation completes, whether 
			 * successfully or not. The tree is cleared of its
			 * selection.
			 */
			private function onDragComplete( event:DragEvent ) : void
				
			{
				tree.selectedIndex = -1;
			}        
		]]>
	</fx:Script>

	<mx:Panel x="48" y="125" width="447" height="351" layout="absolute" title="Drag onto Tree">    
		<mx:Tree width="186" left="10" top="10" bottom="10" id="tree"
				 labelField="@label"
				 dataProvider="{treeData.node}"
				 dropEnabled="false"
				 dragMoveEnabled="false"
				 dragEnter="onDragEnter(event)"
				 dragOver="onDragOver(event)"
				 dragDrop="onDragDrop(event)">
			
		</mx:Tree>        
		<mx:List width="188" height="206" right="10" bottom="10" id="list"
				 allowMultipleSelection="true"
				 dataProvider="{listData}"
				 dragEnabled="true"
				 dragMoveEnabled="true"
				 dragComplete="onDragComplete(event)">
			
		</mx:List>        
		<mx:Text x="229" y="10" text="Drag from the list below to the tree" width="188" height="39"/>
		
		<mx:Label x="229" y="69" text="restaurants"/>
	</mx:Panel>    
</s:Application>

 

  

 

第四：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="955" minHeight="600" xmlns:com="com.*">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.controls.listClasses.ListBase;
			import mx.core.UIComponent;
			import mx.controls.Tree;
			import mx.collections.ArrayCollection;
			import mx.core.DragSource;
			import mx.managers.DragManager;
			import mx.events.DragEvent;
			import mx.events.TreeEvent;
			import flash.events.KeyboardEvent;
			import flash.events.MouseEvent;
			import flash.events.Event;
			import mx.utils.ObjectUtil;
			
			
			
			[Bindable]
			public var selectedNode:Object;
			
			[Bindable]
			public var description:String = "Directions:\n\nTo see the effect of the Spring Loaded Folders select " + 
				"an item in the tree and drag the item over the folders wait, hovering over the folder and " + 
				"it'll open.\n\nIf a folder opens and you did not want it to open move the mouse out of " + 
				"the tree, and it'll restore the original state. \n\nPlay around with the delay to get a " + 
				"desired delay.Hitting spacebar while dragging over a closed folder will open it immediately.";
			
			
			public function treeChanged(event:Event):void {
				selectedNode=event.currentTarget.selectedItem;
			}
			
			private function onDragOver(event:DragEvent):void{
				try{
					if( event.dragInitiator is ListBase ){
						var list:ListBase = event.dragInitiator as ListBase;
						if( event.currentTarget != event.dragInitiator){
							//do what?
							//trace(mx.utils.ObjectUtil.toString('[currentTarget]'+event.currentTarget));
						}
						if(list.indexToItemRenderer(list.calculateDropIndex(event)) != null){
							var currTree:Tree = Tree(event.currentTarget);
							var currNodeOver:Object;
							var rowIndex:int = currTree.calculateDropIndex(event);
							var hoverTarget:Object = currTree.indexToItemRenderer(rowIndex).data;
							var parent:Object = currTree.getParentItem(hoverTarget);
							var tattlerStr:String = new String();
							var halfRow:int = currTree.rowHeight/2;
							var certerRowY:int = (rowIndex*currTree.rowHeight)+halfRow;
							var bottomRowY:int = (rowIndex+1)*currTree.rowHeight;
							
							currNodeOver = currTree.indexToItemRenderer(rowIndex).data;
							
							DragManager.showFeedback(DragManager.MOVE);
							currTree.showDropFeedback(event);
							
							//trace(ObjectUtil.toString(parent));
							if( parent != null )
								trace('[currTree is a tree]');
								//parent.label = 'currTree is a tree';
								//parentObject = currTree.getParentItem(hoverTarget);
							else
								trace('[currTree is a tree]');
							//parent.label = 'currTree is not a tree';
							//parentObject.label = 'currTree is not a tree';
							
							tattlerStr = "Selected Item: " + selectedNode + "\n" + "Over Target: " + hoverTarget.level
								+ "\n" + "Target Parent: " + 'test'//parent.label
								+ "\n"
								+ "calculateDropIndex " + rowIndex
								+ "\n" 
								+ "halfRow " + halfRow.toString()
								+ "\n"
								+ "certerRowY " + certerRowY.toString()
								+ "\n"
								+ "bottomRowY " + bottomRowY.toString()
								+ "\n" 
								+ "mouseY " + currTree.mouseY.toString()
								+ "\n"
								+ "isItemOpen " + currTree.isItemOpen(currNodeOver).toString()
								+ "\n" + "\n";
							
							tattler.text = tattlerStr;
						}else{
							tattler.text = "No Drop Buddy";
						}
					}
				}catch(err:Error){
					trace('[error]'+err);
				}
				
			}
			
			private function onDragDrop(event:DragEvent):void{
				try{
					var target:Tree = Tree(event.currentTarget);
					var list:ListBase = event.dragInitiator as ListBase;
					var ds:DragSource = event.dragSource;
					var rowIndex:int = target.calculateDropIndex(event);
					var hoverTarget:Object = target.indexToItemRenderer(rowIndex).data;
					var parent:Object = target.getParentItem(hoverTarget);
					var items:Array = ds.dataForFormat("items") as Array;
					var i:int;
					
					//trace(event.dragInitiator);
					if( event.dragInitiator is DataGrid ){
						//do what?
						//trace(mx.utils.ObjectUtil.toString('[currentTarget]'+event.currentTarget));
						for (i=0; i < items.length; i++){
							var tempObj:Object = {};
							tempObj = items[i];
							parent.children.addItem(tempObj);
						}
						
						event.preventDefault();
					}
				}catch(err:Error){
					trace('[onDragDropError]'+err);
				}
				
			}
			
			
			private function onDragEnter(event:DragEvent):void{
				DragManager.acceptDragDrop(UIComponent(event.currentTarget));
			}
			[Bindable]
			private var treeData:ArrayCollection = new ArrayCollection(
				[ {label:"Curriculum", level:"Curr", children:new ArrayCollection(
					[ {label:"cert1", level:"Cert", children:new ArrayCollection(
						[{label:"c1", level:"Course", type:"prereq"},
							{label:"c2", level:"Course", type:"prereq"} 
						])}
					])},{label:"Curriculum", level:"Curr", children:new ArrayCollection(
						[ {label:"cert1", level:"Cert", children:new ArrayCollection(
							[{label:"c1", level:"Course", type:"prereq"},
								{label:"c2", level:"Course", type:"prereq"} 
							])}
						])}
				]);
			
			[Bindable]
			private var secondTreeData:ArrayCollection = new ArrayCollection(
				[ {label:"Curriculum", level:"Curr", children:new ArrayCollection(
					[ {label:"cert1", level:"Cert", children:new ArrayCollection(
						[{label:"c1", level:"Course", type:"prereq"},
							{label:"c2", level:"Course", type:"prereq"} 
						])}
					])},{label:"Curriculum", level:"Curr", children:new ArrayCollection(
						[ {label:"cert1", level:"Cert", children:new ArrayCollection(
							[{label:"c1", level:"Course", type:"prereq"},
								{label:"c2", level:"Course", type:"prereq"} 
							])}
						])}
				]);
			
			
			[Bindable]
			private var gridDP:ArrayCollection = new ArrayCollection(
				[{label:"c5", level:"Course", type:"prereq"},
					{label:"c6", level:"Course", type:"prereq"},
					{label:"c7", level:"Course", type:"prereq"}]);
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:VBox width="100%" height="100%">
		<mx:Canvas backgroundColor="#f3d7ab" borderColor="#000000" borderStyle="outset" width="100%" x="10" height="50%" y="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
			
			<mx:HBox width="100%" height="100%" >
				<com:SpringLoadedTree id="tree1" width="35%" height="100%"
									autoCloseOpenNodes="{autoCloseOpenNodes.selected}" 
									autoCloseOnDrop="{autoCloseOnDrop.selected}" 
									autoOpenTimerMS="{DelayOpen.value}" 
									autoCloseTimerMS="{DelayClose.value}" 
									showOpeningIndication="{showOpenIdication.selected}" 
									autoCloseOnExit="{autoCloseOnExit.selected}" 
									dataProvider="{treeData}"
									mouseDown="treeChanged(event)"
									fontWeight="bold" color="#000000"
									dragEnabled="true" 
									dragOver="onDragOver(event)"
									dragMoveEnabled="true"
									dropEnabled="true"
									labelField="label" wordWrap="true"
									fontSize="8" variableRowHeight="true"
									x="41" y="20"/>
				
				<com:SpringLoadedTree id="tree2" width="35%" height="100%"
									autoCloseOpenNodes="{autoCloseOpenNodes.selected}" 
									autoCloseOnDrop="{autoCloseOnDrop.selected}" 
									autoOpenTimerMS="{DelayOpen.value}" 
									autoCloseTimerMS="{DelayClose.value}" 
									showOpeningIndication="{showOpenIdication.selected}" 
									autoCloseOnExit="{autoCloseOnExit.selected}" 
									dataProvider="{secondTreeData}"
									mouseDown="treeChanged(event)"
									fontWeight="bold" color="#000000"
									dragEnabled="true" 
									showRoot="false"
									dragDrop="onDragDrop(event)"
									dragEnter="onDragEnter(event)"
									dragOver="onDragOver(event)"
									dragMoveEnabled="true"
									dropEnabled="true"
									labelField="label" wordWrap="true"
									fontSize="8" variableRowHeight="true"
									x="41" y="20"/>
				
				
				<mx:DataGrid dataProvider="{gridDP}" id="grid1" 
							 dragEnabled="true"
							 dragMoveEnabled="true" height="100%">
				</mx:DataGrid>
				
				<mx:Text text="{description}" id="Directions" enabled="true" height="100%" width="30%"/>
				
				
			</mx:HBox>
		</mx:Canvas>
		<mx:HBox width="100%" height="50%">
			<mx:TextArea x="10" y="368" width="50%" height="100%" id="tattler"/>
			<mx:Canvas width="50%" height="100%" y="446" x="470">
				<mx:CheckBox id="autoCloseOnDrop" selected="true" label="Return to original state on drop" left="10" right="10" bottom="96"/>
				<mx:HSlider value="1000" tickInterval="200" snapInterval="200" maximum="2000" allowTrackClick="true" minimum="200" id="DelayOpen" left="255" bottom="174" width="190"/>
				<mx:Label text="Folder auto open delay ms:{DelayOpen.value}" left="10" bottom="174" textAlign="left" width="248"/>
				<mx:CheckBox id="showOpenIdication" selected="true" label="Show opening indication" left="10" right="10" bottom="122"/>
				
				<mx:HSlider value="200" tickInterval="100" snapInterval="100" maximum="1000" allowTrackClick="true" minimum="100" id="DelayClose" bottom="200" width="190" left="255"/>
				<mx:Label text="Folder auto close delay ms:{DelayClose.value}" left="10" bottom="200" textAlign="left" width="248"/>
				<mx:CheckBox id="autoCloseOpenNodes" selected="true" label="Auto open/close folders on drag over/out" left="10" right="10" bottom="148"/>
				<mx:CheckBox id="autoCloseOnExit" selected="true" label="Auto close folders on tree exit" left="10" right="10" bottom="70"/>
			</mx:Canvas>
		</mx:HBox>
	</mx:VBox>
</s:Application>

 

 

  • 大小: 4.7 KB
  • 大小: 13.5 KB
  • 大小: 6.6 KB
  • 大小: 11.8 KB
  • 大小: 22.8 KB
11
顶
1
踩
分享到：
| Flex4之Tree开发【一】
评论
1 楼 zlbdexiaohao 2015-07-17  
    
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery+flex制作的Tree插件

    插件是自己开写的，插件JS文档里附有说明！希望提宝贵意见.小插件主要是WEB开发显示一棵树结构...只要根据规定的数据格式XML传入便可生成一棵美观的树，可以选择是否要显示CHECKBOX组件，里边有开发中常用的回调方法。

    Flex课程学习（附带源码）

    1、flex 是开发swf方法的一种 2、flexBuilder基于eclipse的IDE集成Design、debug动态help 4j:ant脚本 3、flex framework visual components Manager classes RPC/Messaging/Data Service c Utilities 4、MxML ...

    flex treeDemo展开滚动到特定的节点

    项目开发中经常需要展开并选择滚动到特定节点，网上也有很多人发帖求方法，特写了一个满足该需要的demo，供参考。

    Flex做的树形产品目录示例

    用FLEX开发的产品目录树，产品展示示例，数据源通过Asp.net WebService 提供。

    flex3的cookbook书籍完整版dpf（包含目录）

    flex3的cookbook书籍完整版dpf（包含目录）,目录是我花了两个多小时自己整理的，希望对大家有帮助。 目录： 第一章.Flex与ActionScript基础(3) 1.1节.用FlexBuilder创建Flex项目 1.2节.用FlexBuilder创建Flex库项目 ...

    flex demos

    包含多个demo:Alarm Demos,Network Demos, Tree Demos等，以及源码，适合开发网管行业相关应用软件学习

    Ext类似于flex树插件及调用demo

    用ext开发的一款类似于flex树的插件，可拖曳，效果绚丽

    WebUI4Angular是基于angularjs实现的一套UI组件

    WebUI4Angular是基于angularjs实现的一套UI组件，主要包括：datagrid,tree,dialog,progress,tilelist,tabset,dividedbox,imageview等等。组件需要使用angularjs1.3以上版本，其中拍照组件cameraScanner另需安装flash...

    asp.net知识库

    ASP.NET 2.0使用Web Part创建应用程序之二（共二） 体验 .net2.0 的优雅（2） -- ASP.net 主题和皮肤 NET2.0系列介绍（一）.NET 2.0 中Web 应用程序主题的切换 ASP.NET 2.0 中Web 应用程序主题的切换 2.0正式版中...

    Maven权威指南 很精典的学习教程,比ＡＮＴ更好用

    4. Maven Writing Conventions 5. Acknowledgements 1. 介绍 Apache Maven 1.1. Maven... 它是什么? 1.2. 约定优于配置（Convention Over Configuration） 1.3. 一个一般的接口 1.4. 基于Maven插件的全局性...

Magicbox
Global site tag (gtag.js) - Google Analytics