1:引入样式及类库
<link rel="stylesheet"
href="${ctx}/resources/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!-- jquery ztree -->
<script src="${ctx}/resources/ztree/js/jquery.ztree.all-3.3.js"></script>
2：
<!-- 右键菜单的样式 -->
<style type="text/css">
div#rMenu {
z-index: 4;
position: absolute;//使用绝对定位
width: 100px;
visibility: hidden;
top: 0;
background-color: #555;
padding: 1px;
}
div#rMenu ul {
margin: 0px;
padding: 0px;
}
div#rMenu ul li {
font-size: 12px;
line-height: 20px;
margin: 0px;
padding: 0px;
cursor: pointer;
list-style: none outside none;//取消样式
background-color: #DFDFDF;
border-bottom: 1px solid #fff;
padding-left: 3px;
}
div#rMenu ul li:hover {
background: #eee;
}
</style>
<body >
<div id="rMenu">
<ul>
<li id="m_add" onclick="menuAddNode();">增加节点</li>
<li id="m_edit" onclick="menuEditNode();">编辑节点</li>
<li id="m_editFile" onclick="menuEditContentNode();">编辑内容</li>
<li id="m_delete" onclick="menuDeleteNode();">删除节点</li>
</ul>
</div>
<div class="" style="border-radius:5px;overflow:auto;">
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
3：渲染
<script>
var setting = {
async : {
enable : true,//异步加载
url : "${ctx}/main/getMenuTreeData.do", //调用请求
autoParam : [ "id", "pid" ] //自动封装参数
},
callback : {
onRightClick : OnRightClick,//右键事件
onAsyncSuccess: onAsyncSuccess,//回调函数，在异步的时候，进行节点处理（有时间延迟的），后续章节处理
onClick : menuShowNode
}
};
function OnRightClick(event, treeId, treeNode) {
if (treeNode) {
var top = $(window).scrollTop();
zTree.selectNode(treeNode);
if (treeNode.getParentNode()) {
var isParent = treeNode.isParent;
if(isParent){//非叶子节点
showRMenu("firstNode", event.clientX, event.clientY+top);//处理位置，使用的是绝对位置
}else{//叶子节点
showRMenu("secondNode", event.clientX, event.clientY+top);
}
} else {
showRMenu("root", event.clientX, event.clientY+top);//根节点
}
}
}
function showRMenu(type, x, y) {
$("#rMenu ul").show();
if (type == "root") {
$("#m_add").show();
$("#m_edit").hide();
$("#m_editFile").hide();
$("#m_delete").hide();
} else if(type == "firstNode"){
$("#m_add").show();
$("#m_edit").show();
$("#m_editFile").hide();
$("#m_delete").show();
}else if(type == "secondNode"){
$("#m_add").hide();
$("#m_edit").show();
$("#m_editFile").show();
$("#m_delete").show();
}
rMenu.css({
"top" : y + "px",
"left" : x + "px",
"visibility" : "visible"
});
//在当前页面绑定 鼠标事件
$(document).bind("mousedown", onBodyMouseDown);
}
//事件触发 隐藏菜单
function onBodyMouseDown(event) {
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
rMenu.css({
"visibility" : "hidden"
});
}
}
//隐式 隐藏右键菜单
function hideRMenu() {
if(rMenu){
rMenu.css({
"visibility" : "hidden"
});
}
//取消绑定
$(document).unbind("mousedown", onBodyMouseDown);
}
//异步加载完成
function onAsyncSuccess(event, treeId, treeNode, msg) {
}
//单击节点 显示节点
function menuShowNode() {
var node = zTree.getSelectedNodes()[0];
if (node) {
if(!node.isParent){
}
} else {
alert("未找到节点");
}
}
var rMenu;//右键菜单元素
var zNodes = [{
id : "0",
name : "根节点",
pId : "-1",
url1 : "",
icon : "${ctx}/images/menu_p.png",
isParent : true //是否是父节点，对象分组的时候，要进行设置
}];
$(document).ready(function() {
zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
rMenu = $("#rMenu");
//展开根节点
expandNodes(zTree.getNodes());
});
//右键菜单 添加节点
function menuAddNode() {
//隐藏菜单
hideRMenu();
var node = zTree.getSelectedNodes()[0];
if (node) {
pId = node.id;
} else {
alert("未找到节点");
}
}
//右键菜单 编辑节点
function menuEditNode() {
hideRMenu();
var node = zTree.getSelectedNodes()[0];
if (node) {
} else {
alert("未找到节点");
}
}
//右键菜单 内容节点
function menuEditContentNode() {
hideRMenu();
var node = zTree.getSelectedNodes()[0];
if (node) {
} else {
alert("未找到节点");
}
}
//右键菜单删除节点
function menuDeleteNode() {
hideRMenu();
var node = zTree.getSelectedNodes()[0];
if (node) {
//easyUI 消息框
top.$.messager.confirm("删除节点下的所有信息","确定要删除此节点吗？", function (r) {
if (r) {
var id = node.getParentNode().id;
$.ajax({
url : node.id,
beforeSend:function(){
},
success : function(data) {
var msg = "删除成功";
if ($.trim(data) == "success") {
refreshNode(id);
//location.href = "about:blank";
} else {
msg = "删除失败";
}
top.$.messager.show({
showType:'fade',
showSpeed:2000,
msg:msg,
title:'删除操作',
timeout:1
});
}
});
}
});
} else {
alert("未找到节点");
}
}
//焦点
function focusNode(id) {
var node = zTree.getNodeByParam("id", id, null);
if (node) {
zTree.selectNode(node);
} else {
setTimeout(function() {
focusNode(id);
}, 10);
}
}
function expandNodes(nodes) {
zTree.expandNode(nodes[0], true, false, false);
}
//刷新节点
function refreshNode(id) {
var node = zTree.getNodeByParam("id", id, null);
if (node) {
zTree.reAsyncChildNodes(node, "refresh");
} else {
setTimeout(function() {
refreshNode(id);
}, 10);
}
}
//刷新父节点
function refreshParentNode(id) {
var node = zTree.getNodeByParam("id", id, null);
var pNode = node.getParentNode();
if (pNode) {
refreshNode(pNode.id);
} else {
refreshNode("0");
}
}
//为添加节点刷新
function refreshForAddNode(id) {
var node = zTree.getNodeByParam("id", id, null);
zTree.addNodes(node, {
id : "xx",
name : "new node"
});
zTree.reAsyncChildNodes(node, "refresh");
}
</script>
4：:渲染数据页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/pages/public/TagLib.jsp"%>
[
<c:forEach items="${baseClassList}" var="tree" varStatus="index">
{
id:"${tree.id}",
name:"${tree.name}",
pId:"${tree.parentId}",
icon:"",
isParent:<c:if test="${tree.isLeaf == '1'}">false</c:if><c:if test="${tree.isLeaf != '1'}">true</c:if>
}
<c:if test="${(index.index+1)!=fn:length(baseClassList)}">,</c:if>
</c:forEach>
]