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>