171 lines
5.0 KiB
HTML
171 lines
5.0 KiB
HTML
<!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> |