首页 > 代码库 > Flex4_Tree组件1(添加、删除、展开、关闭、右键菜单)

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、效果图: