Flex 中树的多种操作(可编辑，拖拽，新增删除等操作)

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"?
? xmlns:s="library://ns.adobe.com/flex/spark"?
? xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" creationComplete="init();">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<mx:XMLListCollection id="datatree" source="{_xmldata.children()}" />
</fx:Declarations>


<fx:Script>
<![CDATA[
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.listClasses.ListItemRenderer;
import mx.events.ItemClickEvent;
import mx.states.AddChild;
import mx.controls.Alert;
import flash.events.MouseEvent;

import mx.controls.listClasses.IListItemRenderer;

private var xml:XML;
private var MNum:int = 8;
private var ANum:int = 0;
[Bindable]
private var _xmldata:XML =?
<stage>
<AllNode id="1" label="总节点1">
?<Node id="2" label="子节点"></Node>
?<Node id="3" label="子节"></Node>
?<Node id="4" label="子"></Node>
?</AllNode>
?<AllNode id="5" label="总节点2">
?<Node id="6" label="子节点2"></Node>
?<Node id="7" label="子节2"></Node>
?<Node id="8" label="子2"></Node>
?</AllNode>
</stage>




private var createMenu: ContextMenuItem; ? ?
private var deleteMenu: ContextMenuItem; ? ?
private var renameMenu: ContextMenuItem; ? ?


internal function init(): void{ ? ?
treeMenu(); ?
xml = ?_xmldata; ? ? ??
tree.addEventListener(ListEvent.ITEM_EDIT_END,itemEditEndHandler);?
tree.addEventListener(ListEvent.ITEM_EDIT_BEGINNING,itemEditBeginHandler);?
} ? ?

private function itemEditBeginHandler(event: ListEvent): void{?
var targetTree: Tree = Tree(event.target);?
var item:XML = new XML(targetTree.selectedItem); ??
if(item.@editabled == "false"){?
event.preventDefault();?
}?
}


private function itemEditEndHandler(event:ListEvent):void
{
tree.editable = false;
}

//用event.currentTarget.itemEditorInstance.text得到编辑后的内容

//这个方法在那个是不成功，自己重写了一个 /* ?? public function itemEditEndHandler(event:ListEvent):void {? event.preventDefault();? var newValue:String = event.currentTarget.itemEditorInstance.text;? trace("newValue:"+newValue);? tree.editedItemRenderer.data.@name = newValue;? tree.destroyItemEditor();? } ? */ private function treeMenu(): void{ ? ? createTreeMenuItem(); ? ? tree.contextMenu = getTreeContxtMenu(); ? ? } ? ? public function createTreeMenuItem(): void{ ? ? createMenu = new ContextMenuItem("新建");? deleteMenu = new ContextMenuItem("de22"); ? renameMenu = new ContextMenuItem("重命名"); ?? createMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,createNode); ? ? deleteMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,deleteNode); ? ? renameMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,renameNode); ? ? } ? ? private function getTreeContxtMenu(): ContextMenu{ ? ? var contextMenu: ContextMenu = new ContextMenu(); ? ? contextMenu.hideBuiltInItems(); ? ? contextMenu.customItems.push(createMenu); ?? contextMenu.customItems.push(deleteMenu); ?? contextMenu.customItems.push(renameMenu); ? ? return contextMenu; ? ? } ? private function createNode(event:ContextMenuEvent):void{ var item:Object = onRightClicked(event); if (item != null) {? if( xml == null ) return; if( xml.length() > 0 ) { //关闭节点，如果不这样做，会有问题 item = tree.selectedItem; if (tree.dataDescriptor.isBranch(item) && tree.isItemOpen(item)) { tree.expandItem(item,false); } ANum ++; ?? var nodeId: int = ?MNum + 1; //添加新节点 var nodeString:String = "<Node id=""+nodeId+"" label=""+"新节点"+"" ></Node>"; var _XML:XML = new XML(nodeString); _XML.@label = "新节点"+ANum; ? ?? (item as XML).appendChild(_XML); //展开该节点 item = tree.selectedItem; if (tree.dataDescriptor.isBranch(item) && !tree.isItemOpen(item)) { tree.expandItem(item,true); } //定位到新节点 ? ? ? var children:XMLList = XMLList(item as XML).children(); for(var i:Number=0; i < children.length(); i++) { ? ? ? ? ? ? ? ? ?? if( children[i].@label == _XML.@label ) { ? ? ? ? ? ? ? ? ? ?? var newItemRender:IListItemRenderer; var newNodeIndex:int; tree.visible = true; tree.firstVisibleItem = children[i] as Object; //这句定位要求，是树中可见的节点中定位 newItemRender = tree.itemToItemRenderer(children[i] as Object); if(newItemRender != null) { ? ? ? ? ? ? ?? newNodeIndex = ?tree.itemRendererToIndex(newItemRender); ? ? ? ? ? ? ?? if(tree.selectedIndex != newNodeIndex) { ? tree.selectedIndex = newNodeIndex; tree.editable = true; tree.editedItemPosition = {rowIndex: tree.selectedIndex}; ?? }? }else{ tree.selectedItem = children[i] as Object; tree.editable = true; tree.editedItemPosition = {rowIndex: tree.selectedIndex}; ?? } //如果不加这几句，有时候就不好使啊！被迫加上了，以后有改进的办法了再说吧 ? ? ? ? ? ? ? ? tree.firstVisibleItem = children[i] as Object; tree.selectedItem = children[i] as Object; tree.editable = true; tree.editedItemPosition = {rowIndex: tree.selectedIndex};? break;? } } ? ? ? ? ? ? ? ? ?? MNum++;? } } else ? ?return; ? ? ?? } private function deleteNode(event:ContextMenuEvent):void{ var item:Object = onRightClicked(event); if (item != null) {? if( xml == null ) return; if( xml.length() > 0 ) { tree.dataDescriptor.removeChildAt( tree.selectedItem.parent(),tree.selectedItem,tree.selectedItem.childIndex(),tree.dataProvider ); } } else ? ?return; ? ? ?? } private function renameNode(event:ContextMenuEvent):void{ var item:Object = onRightClicked(event); if (item != null) {? if( xml == null ) return; ? ? ? ? ?? if( xml.length() > 0 ) { tree.editable = true; tree.editedItemPosition = {rowIndex: tree.selectedIndex}; } } else ? ?return; ? } //右键定位节点 private function onRightClicked(e:ContextMenuEvent):Object { var rightClickItemRender:IListItemRenderer;? var rightClickIndex:int; if(e.mouseTarget is IListItemRenderer) { ? rightClickItemRender = IListItemRenderer(e.mouseTarget); ? }else if(e.mouseTarget.parent is IListItemRenderer) { ? rightClickItemRender = IListItemRenderer(e.mouseTarget.parent); ? }? if(rightClickItemRender != null) { ? rightClickIndex = ?tree.itemRendererToIndex(rightClickItemRender); ? if(tree.selectedIndex != rightClickIndex) { ? tree.selectedIndex = rightClickIndex;? }? trace("通过右键单击获得选定的行: " + tree.selectedIndex); ? }? //树节点的xml ? ? var globalItem:Object = tree.selectedItem;? if(globalItem != null){ var node:XML = (globalItem as XML) trace("通过右键单击获得选定的行: " + node.@id +",node.label:"+ node.@label);? if (node.@id != undefined) return globalItem;? else{ Alert.show("此节点不可操作"); return null; } ? } return null; } import mx.collections.ICollectionView; import mx.events.ListEvent; //鉴于单击收缩功能可能影响到右键操作，所以废除了 private function tree_itemClick(evt:ListEvent):void { var item:Object = Tree(evt.currentTarget).selectedItem; if (tree.dataDescriptor.isBranch(item)) { tree.expandItem(item,!tree.isItemOpen(item),true); } } /******变换选中的tree节点事件，透过这个改变xml，该方法必须有********/ private function treeChange(e:Event):void { xml = e.currentTarget.selectedItem as XML; } private function tree_itemDoubleClick(event: ListEvent):void{ var node:XML = tree.selectedItem as XML;? var isOpen:Boolean = tree.isItemOpen(node);? tree.expandItem(node,!isOpen); ? ?? } private function doubleClickHandler(event:MouseEvent):void { tree.editable = true; tree.editedItemPosition = {rowIndex: tree.selectedIndex}; } ]]> </fx:Script> <!-- doubleClickEnabled="true"? itemDoubleClick="tree_itemDoubleClick(event);" --> <mx:Tree id="tree"? width="100%"? height="100%"? fontFamily="Arial"? fontSize="12"? textAlign="left"? dataProvider="{datatree}"? labelField="@label" change="treeChange(event)"? rowCount="10" doubleClickEnabled="true" doubleClick="doubleClickHandler(event)" itemEditEnd="itemEditEndHandler(event)" dragEnabled="true" dropEnabled="true" /> </mx:Canvas>