Flex4_Tree组件1(添加、删除、展开、关闭、右键菜单)
1、屏蔽系统菜单：工程目录“html-template”文件夹-->“index.template.html”文件中，在var params = {};语句下添加新语句：
params.wmode = "opaque";
2、新建Tree右键菜单工具类:TreeRightClickManager.as
package com.th.rightClickManager { import flash.display.InteractiveObject; import flash.events.ContextMenuEvent; import flash.events.MouseEvent; import flash.external.ExternalInterface; import mx.core.Application; import mx.core.FlexGlobals; public class TreeRightClickManager { static private var rightClickTarget:*; static public const RIGHT_CLICK:String = "rightClick"; static private const javascript:XML = <script> <![CDATA[ function(flashObjectId) { var RightClick = { init: function (flashObjectId) { this.FlashObjectID = flashObjectId; this.Cache = this.FlashObjectID; if(window.addEventListener){ window.addEventListener("mousedown", this.onGeckoMouse(), true); } else { document.getElementById(this.FlashObjectID).parentNode.onmouseup = function() { document.getElementById(RightClick.FlashObjectID).parentNode.releaseCapture(); } document.oncontextmenu = function(){ if(window.event.srcElement.id == RightClick.FlashObjectID) { return false; } else { RightClick.Cache = "nan"; }} document.getElementById(this.FlashObjectID).parentNode.onmousedown = RightClick.onIEMouse; } }, /** * GECKO / WEBKIT event overkill * @param {Object} eventObject */ killEvents: function(eventObject) { if(eventObject) { if (eventObject.stopPropagation) eventObject.stopPropagation(); if (eventObject.preventDefault) eventObject.preventDefault(); if (eventObject.preventCapture) eventObject.preventCapture(); if (eventObject.preventBubble) eventObject.preventBubble(); } }, /** * GECKO / WEBKIT call right click * @param {Object} ev */ onGeckoMouse: function(ev) { return function(ev) { if (ev.button != 0) { RightClick.killEvents(ev); if(ev.target.id == RightClick.FlashObjectID && RightClick.Cache == RightClick.FlashObjectID) { RightClick.call(); } RightClick.Cache = ev.target.id; } } }, /** * IE call right click * @param {Object} ev */ onIEMouse: function() { if (event.button > 1) { if(window.event.srcElement.id == RightClick.FlashObjectID && RightClick.Cache == RightClick.FlashObjectID) { RightClick.call(); } document.getElementById(RightClick.FlashObjectID).parentNode.setCapture(); if(window.event.srcElement.id) RightClick.Cache = window.event.srcElement.id; } }, /** * Main call to Flash External Interface */ call: function() { document.getElementById(this.FlashObjectID).rightClick(); } } RightClick.init(flashObjectId); } ]]> </script>; public function TreeRightClickManager() { return; } static public function regist() : Boolean { if (ExternalInterface.available) { ExternalInterface.call(javascript, ExternalInterface.objectID); ExternalInterface.addCallback("rightClick", dispatchRightClickEvent); //Application.application.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler); FlexGlobals.topLevelApplication.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler); } return true; } static private function mouseOverHandler(event:MouseEvent) : void { rightClickTarget = InteractiveObject(event.target); return; } static private function dispatchRightClickEvent() : void { var event:ContextMenuEvent; if(rightClickTarget !=null) { event =new ContextMenuEvent(RIGHT_CLICK,true,false, rightClickTarget as InteractiveObject, rightClickTarget as InteractiveObject); rightClickTarget.dispatchEvent(event); } return; } } }
3、Flex文件
<?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" initialize="init()"> <fx:Script> <![CDATA[ import com.th.rightClickManager.TreeRightClickManager; import mx.controls.Alert; import mx.controls.Menu; import mx.controls.listClasses.IListItemRenderer; import mx.events.MenuEvent; [Event(name="rightClick",type="flash.events.ContextMenuEvent")] //右键菜单图标，现在没用着，删了也行 [Embed("images/myIco.png")] private var menu_SP_add:Class; [Embed("images/myIco.png")] private var menu_TZ_add:Class; [Embed("images/myIco.png")] private var menu_Folder_add:Class; [Embed("images/myIco.png")] private var menu_FJ_uploadsingle:Class; private var rightClickRegisted:Boolean = false; private var menu:Menu; [Bindable] private var studetXml:XML; private function init():void{ studetXml= <nj label="一年级" id="n1" lx="0"> <bj label="1班" id="b1" lx="1"> <student label="刘备" id="s1" lx="2"/> <student label="张飞" id="s2" lx="2"/> <student label="关羽" id="s3" lx="2"/> <student label="诸葛亮" id="s4" lx="2"/> </bj> </nj>; if (!rightClickRegisted){ TreeRightClickManager.regist(); rightClickRegisted = true; } //加载右击事件 studentTree.addEventListener(TreeRightClickManager.RIGHT_CLICK,treeRightClickHandler); } //树右击事件 private function treeRightClickHandler(event:ContextMenuEvent):void { tree_onRightClicked(event); tree_removeMenu(); tree_InitMenu(); } private function tree_onRightClicked(e:ContextMenuEvent):void { 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 = studentTree.itemRendererToIndex(rightClickItemRender); if(studentTree.selectedIndex != rightClickIndex) { studentTree.selectedIndex = rightClickIndex; } } } //删除右键菜单 private function tree_removeMenu():void { if(menu!=null) { menu.hide(); menu.removeEventListener(MenuEvent.ITEM_CLICK,tree_MenuItemSelected); menu=null; } } //生成右键菜单 private var selectedId:String=""; private var selectedLabel:String=""; private function tree_InitMenu():void { var currentItem:XML=studentTree.selectedItem as XML; selectedId=currentItem.@id; selectedLabel=currentItem.@label; var lx:String=currentItem.@lx; menu = Menu.createMenu(this, tree_createMenuItems(lx), false); menu.iconField="itemIcon";//右键菜单的图标 menu.labelField="label"; //右键菜单的名称 menu.variableRowHeight = true; menu.addEventListener(MenuEvent.ITEM_CLICK, tree_MenuItemSelected); //右键菜单的事件 var point:Point = new Point(mouseX,mouseY); point = localToGlobal(point); menu.show(point.x,point.y); //显示右键菜单 } //根据节点不同，生成不同的菜单 private function tree_createMenuItems(lx:String):Array { var menuItems:Array = new Array(); var menuXs:Object= new Object; menuXs.label = '刷新'; //menuXs.itemIcon = this.menu_TZ_add; //给菜单加图标 menuItems.push(menuXs); var menuExpand:Object=new Object(); menuExpand.label="展开当前节点"; menuItems.push(menuExpand); var menuClose:Object=new Object(); menuClose.label="关闭当前节点"; menuItems.push(menuClose); var menuExpandAll:Object=new Object(); menuExpandAll.label="展开所有节点"; menuItems.push(menuExpandAll); var menuCloseAll:Object=new Object(); menuCloseAll.label="关闭所有节点"; menuItems.push(menuCloseAll); switch(lx){ case "0": var menuAddNj:Object = new Object; menuAddNj.label = "添加年级"; menuItems.push(menuAddNj); var menuDelNj:Object=new Object(); menuDelNj.label="删除年级"; menuItems.push(menuDelNj); break; case "1": var menuAddBj:Object=new Object(); menuAddBj.label="添加班级"; menuItems.push(menuAddBj); var menuDelBj:Object=new Object(); menuDelBj.label="删除班级"; menuItems.push(menuDelBj); var menuAddStu:Object=new Object(); menuAddStu.label="添加学生"; menuItems.push(menuAddStu); break; case "2": var menuEditStu:Object=new Object(); menuEditStu.label="修改学生"; menuItems.push(menuEditStu); var menuDelStu:Object=new Object(); menuDelStu.label="删除学生"; menuItems.push(menuDelStu); break; } return menuItems; } //点击菜单，相应方法 private function tree_MenuItemSelected(event:MenuEvent):void { var menuItem:Object = event.menu.selectedItem as Object; switch(menuItem.label) { case "展开当前节点": nodeExpand(); break; case "关闭当前节点": nodeClose(); break; case "展开所有节点": nodeExpandAll(); break; case "关闭所有节点": nodeCloseAll(); break; case "删除学生": delStuNode(); break; case "添加学生": addStuNode(); break; } } //改变事件 private function treeChanged(event:Event):void{ var selectedTreeNode:XML; selectedTreeNode=Tree(event.target).selectedItem as XML; Alert.show("您点击了："+selectedTreeNode.@label,"提示"); } //展开当前节点 private function nodeExpand():void{ studentTree.expandItem(studentTree.selectedItem,true); } //关闭当前节点 private function nodeClose():void{ studentTree.expandItem(studentTree.selectedItem,false); } //展开所有节点 private function nodeExpandAll():void{ for each(var item:XML in studentTree.dataProvider) { studentTree.expandChildrenOf(item,true); } } //关闭所有节点 private function nodeCloseAll():void{ //方法1：studentTree.openItems = []; //方法2： for each(var item:XML in studentTree.dataProvider) { studentTree.expandChildrenOf(item,false); } } //删除学生 private function delStuNode():void{ Alert.show("删除学生 ID="+selectedId+" 名称="+selectedLabel,"提示"); var delStuItemPar:Object=new Object(); delStuItemPar=studentTree.selectedItem.parent(); var delStuInx:int=studentTree.selectedItem.childIndex(); studentTree.dataDescriptor.removeChildAt(delStuItemPar,studentTree.selectedItem,delStuInx,studentTree.dataProvider); } //添加学生 private function addStuNode():void{ var newStuXML:XML=<student label="新学生" id="s5" lx="2"/>; (studentTree.selectedItem as XML).appendChild(newStuXML); } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <s:Panel x="25" y="23" width="250" height="448" title="学生"> <mx:Tree id="studentTree" left="0" top="0" width="100%" height="100%" labelField="@label" change="treeChanged(event)" dataProvider="{studetXml}" allowMultipleSelection ="true"/> </s:Panel> </s:Application>
4、效果图：
