樹組件右鍵菜單

樹組件右鍵菜單

步驟1，在頁面上添加菜單元素並隱藏  詳細參見:http://www.360ui.net

<div class="b-m-mpanel" style="width: 150px;visibility:hidden;" id="rMenu">     <div class="b-m-item" id="m_add" onclick="addTreeNode();">         <img align="middle" src="<%=path%>/libs/images/icons/add.png"/><span>增長節點</span>     </div>     <div class="b-m-item" id="m_del" onclick="removeTreeNode();">         <img align="middle" src="<%=path%>/libs/images/icons/close.png"/><span>刪除節點</span>     </div>     <div class="b-m-item" id="m_check" onclick="checkTreeNode(true);">         <img align="middle" src="<%=path%>/libs/images/icons/ico4.gif"/><span>勾選節點</span>     </div>     <div class="b-m-item" id="m_unCheck" onclick="checkTreeNode(false);">         <img align="middle" src="<%=path%>/libs/images/icons/ico4-3.gif"/><span>取消勾選節點</span>     </div>     <div class="b-m-item" id="m_reset" onclick="resetTree();">         <img align="middle" src="<%=path%>/libs/images/icons/ico4-1-1.gif"/><span>恢復</span>     </div> </div>

步驟2，響應右鍵，根據節點彈出不一樣的右鍵菜單。代碼以下：

var zTree;         var setting = {         view: {             dblClickExpand: false         },         check: {             enable: true         },         callback: {             //響應右鍵             onRightClick: OnRightClick         }     };         var zNodes = [         {id:1,  parentId:0, name:"無右鍵菜單", open:true, noR:true},         {id:11, parentId:1, name:"無右鍵菜單", open:true, noR:true},         {id:12, parentId:1, name:"無右鍵菜單", open:true, noR:true},         {id:2,  parentId:0, name:"右鍵菜單類型1", open:true, menuType:"nonLeafMenu"},         {id:21, parentId:2, name:"右鍵菜單類型2", open:true, menuType:"leafMenu"},         {id:22, parentId:2, name:"右鍵菜單類型2", open:true, menuType:"leafMenu"}     ];         function initComplete(){         $.fn.zTree.init($("#tree-1"), setting, zNodes);         zTree = $.fn.zTree.getZTreeObj("tree-1");             //鼠標移入右鍵菜單效果         $("#rMenu >div").hover(function(){             $(this).addClass("b-m-ifocus");         },function(){             $(this).removeClass("b-m-ifocus");         });     }               //點擊右鍵處理     function OnRightClick(event, treeId, treeNode) {         //在節點以外顯示一種菜單         if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {             zTree.cancelSelectedNode();             showRMenu("root", event.clientX, event.clientY);         //在節點裏面顯示另外一種菜單         } else if(treeNode && !treeNode.noR) {             zTree.selectNode(treeNode);             showRMenu(treeNode.menuType, event.clientX, event.clientY);         }     }          //根據設置彈出不一樣的右鍵菜單     function showRMenu(type, x, y) {         $("#rMenu ul").show();         if(type == "root") {//樹節點外只保留添加和恢復             $("#m_add").show();             $("#m_del").show();             $("#m_check").show();             $("#m_unCheck").show();             $("#m_reset").show();                         $("#m_del").hide();             $("#m_check").hide();             $("#m_unCheck").hide();                     }else if(type == "nonLeafMenu") {//父節點保留添加和刪除             $("#m_add").show();             $("#m_del").show();             $("#m_check").show();             $("#m_unCheck").show();             $("#m_reset").show();                         $("#m_reset").hide();             $("#m_check").hide();             $("#m_unCheck").hide();             $("#m_reset").hide();                 }else if(type == "leafMenu") {//子節點保留選擇和刪除             $("#m_add").show();             $("#m_del").show();             $("#m_check").show();             $("#m_unCheck").show();             $("#m_reset").show();                         $("#m_add").hide();             $("#m_reset").hide();         }             $("#rMenu").css({"top":y+"px", "left":x+"px", "visibility":"visible"});             //點擊菜單外時隱藏菜單         $("body").bind("mousedown", onBodyMouseDown);     }       //點擊菜單項時隱藏菜單     function hideRMenu() {         if ($("#rMenu")) $("#rMenu").css({"visibility": "hidden"});         $("body").unbind("mousedown", onBodyMouseDown);     }         //點擊菜單外時隱藏菜單     function onBodyMouseDown(event){         if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {             $("#rMenu").css({"visibility" : "hidden"});         }     }       //如下是點擊右鍵菜單的處理函數     var addCount = 1;         //添加節點     function addTreeNode() {         hideRMenu();         zTree.addNodes(zTree.getSelectedNodes()[0], [{ name:"增長" + (addCount++),menuType:"type2"}]);     }       //確認是否刪除+刪除處理     function removeTreeNode() {         hideRMenu();         var nodes = zTree.getSelectedNodes();         if (nodes && nodes.length > 0) {             if (nodes[0].children && nodes[0].children.length > 0) {                 var msg = "要刪除的節點是父節點，若是刪除將連同子節點一塊兒刪掉。\n\n請確認！";                 top.Dialog.confirm(msg, function(){                     zTree.removeNode(nodes[0]);                     //此處進行ajax後臺數據處理                 });             } else {                 top.Dialog.confirm("確認刪除 節點 -- " + nodes[0].name + " 嗎？",function(){                     zTree.removeNode(nodes[0]);                     //此處進行ajax後臺數據處理                 });             }         }     }             // 勾選/取消勾選節點     function checkTreeNode(checked) {         var nodes = zTree.getSelectedNodes();         if (nodes && nodes.length>0) {             zTree.checkNode(nodes[0], checked, true);         }         hideRMenu();     }         //樹的狀態的重置     function resetTree() {         hideRMenu();         $.fn.zTree.init($("#tree-1"), setting, zNodes); }