flex treegrid编辑操作

最近项目中要用到treegrid的crud功能，download了flexlib,可是发现没有demo，在网上也没有找到。所以自己实现了一下。以下是代码，拿　去用吧。直接拷嘛。

窗口组件：

TreeGridWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="{winWidth}" height="300" close="closeHandler(event)">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			
			[Bindable]
			public var winWidth:int = 0; //窗口宽
			[Bindable]
			public var currentNode:XML; //当前节点，修改和新增时都用
			[Bindable]
			public var parentNode:XML; //上级节点，修改时要用。
			[Bindable]
			public var treegridData:XMLList;
			public var action:String = ""; //是修改还是更新动作
			
			protected function closeHandler(event:CloseEvent):void
			{
				PopUpManager.removePopUp(this);
			}
			
			protected function saveNode(event:MouseEvent):void
			{
				if("Update"==action){
					currentNode.@name = "这是新值啦"; //parentNode
				}else{
					Alert.show(parentNode.@name);
					parentNode.appendChild(newNode);
				}
				PopUpManager.removePopUp(this);
			}
			
		]]>
	</mx:Script>
	<mx:XML xmlns="" id="newNode">
		<node id="400" name="New Node" type="COMPANY" desc="Database company" statusIcon="statusIcon" />
	</mx:XML>
	<mx:Button label="保存" click="saveNode(event)"/>
</mx:TitleWindow>

主文件：

Application.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:flexlib="http://code.google.com/p/flexlib/"
	layout="horizontal"
	creationComplete="handleCreationComplete()" >
	
	<mx:Style>
		.datagridStyle
		{
			alternatingItemColors: #666666, #666666;
			rollOverColor: #ff9933;
			textRollOverColor: #000000;
			selectionColor: #ff6600;
			color: #ffffff;
			textSelectedColor: #0b333c;
		}
		
		.dataGridHeader
		{
			color: #000000;
		}
	</mx:Style>
	
	<mx:Script>
		<![CDATA[
			import com.gwtjs.TreeGridEditorWindow;
			
			import mx.collections.ArrayCollection;
			import mx.collections.XMLListCollection;
			import mx.controls.Alert;
			import mx.controls.Tree;
			import mx.events.CollectionEvent;
			import mx.events.ListEvent;
			import mx.managers.PopUpManager;
			
			[Bindable]
			public var currentNode:XML ;
			[Bindable]
			public var parentNode:XML;
			[Bindable]
			public var treegridData:XMLList;
			
			[Bindable]
			private var dataProviderArrayCollection : ArrayCollection;
			
			protected function addClickHandler(event:MouseEvent):void
			{
				var openWin:TreeGridEditorWindow = new TreeGridEditorWindow();
				PopUpManager.addPopUp(openWin,this,true);
				PopUpManager.centerPopUp(openWin);
				openWin.winWidth = 600;//动态改变弹出窗口的宽度，这是方函妹妹要用的。
				openWin.currentNode = currentNode;
				openWin.parentNode = currentNode;
				openWin.action = "Insert";
				Alert.show(currentNode.@name);
			}
			
			protected function editorClickHandler(event:MouseEvent):void
			{
				var openWin:TreeGridEditorWindow = new TreeGridEditorWindow();
				PopUpManager.addPopUp(openWin,this,true);
				PopUpManager.centerPopUp(openWin);
				openWin.winWidth = 300;//动态改变弹出窗口的宽度，这是方函妹妹要用的。
				openWin.currentNode = currentNode;
				openWin.parentNode = parentNode;
				openWin.action = "Update";
			}
			
			protected function removeClickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				
			}
			
			public function handleCreationComplete() : void
			{
				treegridData = dataProviderXMLList;
				myTreeGrid.addEventListener(CollectionEvent.COLLECTION_CHANGE,openItem);
			}
			
			public function openItem(event:CollectionEvent):void
			{
				var dataPro:XMLListCollection=(event.currentTarget as TreeGrid).dataProvider as XMLListCollection;
				var len:int=dataPro?dataPro.length:0;
				for(var i:int=0;i<len;i++)
				{ 
					var itemPro:XML=myTreeGrid.dataProvider[i];
					myTreeGrid.openItemAt(i,itemPro);
					
					var num:int=itemPro.children().length();
					var subItem:XMLList=itemPro.elements();
					for(var j:int=0;j<num;j++)
					{
						if(subItem[j].children().length()>0)
							myTreeGrid.openItemAt(j+1,subItem[j]);
					}
				}
			}
			
			protected function treegridItemClickHandler(event:ListEvent):void
			{
				var tree:TreeGrid = TreeGrid(event.target);
				currentNode = XML(tree.selectedItem);
				if(null!=currentNode.parent()){
					parentNode = currentNode.parent();
				}
				//Alert.show(currentNode.@id+" "+currentNode.@name,parentNode.@name);
			}
			
		]]>
	</mx:Script>
	<mx:XMLList id="dataProviderXMLList">
		<node id="1" name="Companies" type="COMPANIES" desc="All Companies" statusIcon="statusIcon">
			<node id="2" name="Adobe" type="COMPANY" desc="Adobe inc." statusIcon="statusIcon">
				<node id="5" name="Adobe Consulting" type="COMPANY" desc="Adobe (formerly macromedia)" statusIcon="statusIcon" />
				<node id="6" name="EDBU" type="COMPANY" desc="Database company" statusIcon="statusIcon" />
			</node>
			<node id="3" name="Macromedia" type="COMPANY" desc="Adobe (formerly macromedia)" statusIcon="statusIcon" />
			<node id="4" name="Oracle" type="COMPANY" desc="Database company" statusIcon="statusIcon" />
		</node>   
	</mx:XMLList>
	<mx:VBox width="100%" height="100%" backgroundColor="#FFFFFF">
		
		<mx:Label text="dataProvider: XMLList " fontSize="10" fontWeight="bold" />
		<mx:HBox width="100%">
			<mx:Button click="addClickHandler(event)" label="添加" />
			<mx:Button click="editorClickHandler(event)" label="修改" />
			<mx:Button click="removeClickHandler(event)" label="删除" />
		</mx:HBox>
		<flexlib:TreeGrid id="myTreeGrid"
			width="100%" height="100%" 
			itemClick="treegridItemClickHandler(event)"
			dataProvider="{ treegridData }"
			paddingLeft="25"
			verticalTrunks="none">
			
			<flexlib:columns>
				<flexlib:TreeGridColumn dataField="@name" headerText="name" />
				<mx:DataGridColumn dataField="@desc" headerText="desc" />
			</flexlib:columns>
			
		</flexlib:TreeGrid>
	</mx:VBox>
</mx:Application>