效果图：
代码：
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - select menu</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../../css/demo.css" type="text/css"> <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script> <SCRIPT type="text/javascript"> <!-- var setting = { view: { dblClickExpand: false }, check: { enable: true }, callback: { onRightClick: OnRightClick } }; var zNodes =[ {id:1, name:"无右键菜单 1", open:true, noR:true, children:[ {id:11, name:"节点 1-1", noR:true}, {id:12, name:"节点 1-2", noR:true} ]}, {id:2, name:"右键操作 2", open:true, children:[ {id:21, name:"节点 2-1"}, {id:22, name:"节点 2-2"}, {id:23, name:"节点 2-3"}, {id:24, name:"节点 2-4"} ]}, {id:3, name:"右键操作 3", open:true, children:[ {id:31, name:"节点 3-1"}, {id:32, name:"节点 3-2"}, {id:33, name:"节点 3-3"}, {id:34, name:"节点 3-4"} ]} ]; 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("node", event.clientX, event.clientY); } } function showRMenu(type, x, y) { $("#rMenu ul").show(); if (type=="root") { $("#m_del").hide(); $("#m_check").hide(); $("#m_unCheck").hide(); } else { $("#m_del").show(); $("#m_check").show(); $("#m_unCheck").show(); } y += document.body.scrollTop; x += document.body.scrollLeft; 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(); var newNode = { name:"增加" + (addCount++)}; if (zTree.getSelectedNodes()[0]) { newNode.checked = zTree.getSelectedNodes()[0].checked; zTree.addNodes(zTree.getSelectedNodes()[0], newNode); } else { zTree.addNodes(null, newNode); } } 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请确认！"; if (confirm(msg)==true){ zTree.removeNode(nodes[0]); } } else { zTree.removeNode(nodes[0]); } } } 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($("#treeDemo"), setting, zNodes); } var zTree, rMenu; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); zTree = $.fn.zTree.getZTreeObj("treeDemo"); rMenu = $("#rMenu"); }); //--> </SCRIPT> <style type="text/css"> div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;} div#rMenu ul li{ margin: 1px 0; padding: 0 5px; cursor: pointer; list-style: none outside none; background-color: #DFDFDF; } </style> </HEAD> <BODY> <h1>右键菜单的实现</h1> <h6>[ 文件路径: super/rightClickMenu.html ]</h6> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <ul class="info"> <li class="title"><h2>实现方法说明</h2> <ul class="list"> <li>利用 beforeRightClick / onRightClick 事件回调函数简单实现的右键菜单</li> <li class="highlight_red">Demo 中的菜单比较简陋，你完全可以配合其他自定义样式的菜单图层混合使用</li> </ul> </li> </ul> </div> </div> <div id="rMenu"> <ul> <li id="m_add" onclick="addTreeNode();">增加节点</li> <li id="m_del" onclick="removeTreeNode();">删除节点</li> <li id="m_check" onclick="checkTreeNode(true);">Check节点</li> <li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li> <li id="m_reset" onclick="resetTree();">恢复zTree</li> </ul> </div> </BODY> </HTML>
