引入相关css和js
<script type="text/javascript" src="${ctx}/js/tree/v35/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" href="${ctx}/js/tree/v35/zTreeStyle.css" type="text/css">
定义树id
<div id="treeDemo" class="ztree" style="overflow:auto;height: 100%"></div>
var zTreeObj;
var setting = {
callback:{
onRightClick:zTreeOnRightClick
}
};
var zNodes = [{
name: "test1",
open: true,
children: [{
name: "test1_1"
}, {
name: "test1_2"
}]
}, {
name: "test2",
open: true,
children: [{
name: "test2_1"
}, {
name: "test2_2"
}]
}];
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
js(初始化树)
<div id="rMenu" style="display: none">
<a href="#" class="rMenuA" onclick="addNode();">增加</a>
<a href="#" class="rMenuA" onclick="delNode();">删除</a>
<a href="#" class="rMenuA" onclick="updNode();">修改</a>
</div>
右键菜单html代码
div#rMenu {
position:absolute;
visibility:hidden;
top:0;
text-align: left;
padding:4px;
z-index:999;
}
div#rMenu a{
padding: 3px 15px 3px 15px;
background-color:#cad4e6;
vertical-align:middle;
text-decoration:none;
}
右键菜单样式css
//右键树结构
function zTreeOnRightClick(event, treeId, treeNode) {
debugger;
//alert(111);
console.log(treeNode);
// $("#fileNode_pid").val(treeNode.id);
// $("#fileNode_pname").val(treeNode.damc);
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
showRMenu("root", event.clientX, event.clientY);
} else if (treeNode && !treeNode.noR) {
console.log("x="+event.clientX+"y="+event.clientY);
showRMenu("node", event.clientX, event.clientY);
}
};
//显示右键菜单
function showRMenu(type, x, y) {
debugger;
$("#rMenu").show();
$("#rMenu").css({"top": y + "px", "left": x + "px", "visibility": "visible"}); //设置右键菜单的位置、可见
$("body").bind("mousedown", onBodyMouseDown);
}
//隐藏右键菜单
function hideRMenu() {
$("#rMenu").css({"visibility": "hidden"}); //设置右键菜单不可见
$("body").unbind("mousedown", onBodyMouseDown);
}
//鼠标按下事件
function onBodyMouseDown(event) {
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
// $("#rMenu").hide();
$("#rMenu").css({ "visibility": "hidden"});
}
}
//增加节点
function addNode(event) {
alert('增加节点');
}
//删除节点
function delNode(event) {
alert('删除节点');
}
//修改节点
function updNode(event) {
alert('修改节点');
}
右击后具体的事件操作js
效果图: