<!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>