Ztree设置权限管理时显示树形菜单

在做分配权限模块的时候，遇到了要动态显示树形菜单的情况。查了下都是用Ztree插件做的，但网上好多demo都不能用，今天特意写一篇亲测能用的博客介绍。

建议使用Ztree插件前简单阅读下API文档，链接地址

要显示树形菜单的位置如下，class必须为ztree，不然CSS样式不起作用，无法显示树形菜单

<ul id="systemTree" class="ztree" >

</ul>

Ztree的配置参数如下

var setting = {
check:{
enable:true
},
data:    {
simpleData:{
enable:true
}
},
callback:{
onCheck:onCheck// 点击属性菜单复选框回调函数
}

};
function onCheck(e,treeId,treeNode){
var treeObj1=$.fn.zTree.getZTreeObj("systemTree"),// 参数为目标ul的id
nodes1=treeObj1.getCheckedNodes(true),//  获取选中的节点集合
v1="";
// 将选中的系统菜单加载到右边
var target_table1 = $(".systemTable");//要加载的table的位置
//下面的for循环根据自己需要修改
for(var i=0;i<nodes1.length;i++){
// 一级菜单加粗
if (nodes1[i].getParentNode() == null) {
v1+= '<tr><td class="rightTd" id="'+nodes1[i].id+'"><b>'+nodes1[i].name+'</b></td></tr>';
} else {
v1+= '<tr><td class="rightTd" id="'+nodes1[i].id+'">'+nodes1[i].name+'</td></tr>';
}
}
//显示在table中
target_table1.html(v1);
}

前台通过ajax调用后台方法查询出菜单集合，需将菜单转换成json字符串形式，如下

bf.append("[");
for (JSONObject menu : menuList) {
pid = menu.getInteger("pid");
id = menu.getInteger("id");
cname = menu.getString("cname");
// 判断一级菜单
if (pid == 9999) {
bf.append("{id:"+id+",pId:"+pid+",name:'"+cname+"',open:false},");
} else {
bf.append("{id:"+id+",pId:"+pid+",name:'"+cname+"',open:true},");
}
}
String menuStr = "";
if (bf.length() > 0) {
menuStr = bf.substring(0, bf.length()-1);
}
menuStr += "]";

字符串bf内为Ztree显示的字符串格式。

假设“个人中心”为父节点，id：100；其子节点“修改密码”pId：100（pId 字段 i 必须大写），插件会自动将修改密码加载到个人中心下的二级菜单中。意思就是子节点的pId必须是父节点的id

open属性，true代表初始化节点数据时，会直接展开此节点。（一般是一级菜单false，二级true）

返回字符串到前台时，需要将字符串转换成json对象后，用$.fn.zTree.init($("#systemTree"), setting, zNodes)调用插件方法即可完成菜单显示，如下

// 系统菜单
var json = eval("("+data.menuStr+")");
var zNodes = json;
$.fn.zTree.init($("#systemTree"), setting, zNodes);

下面是Ztree插件需要用到的CSS和js文件

<link rel="stylesheet" href="js/zTree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/zTree/js/jquery.ztree.core-3.4.js"></script>
<script type="text/javascript" src="js/zTree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/zTree/js/jquery-migrate-1.2.1.js"></script>

这里jquery.ztree.core-3.4.js版本用的3.4；而jquery.ztree.excheck-3.5.js用的是3.5版本。因为我全用3.5的版本会有错误，我也不清楚是什么原因。

jquery-migrate-1.2.1.js文件是我项目Ztree插件和jquery.min.js文件冲突，需要这个文件来解决，可根据个人需要选择引用

js和css文件链接：http://pan.baidu.com/s/1pLfPQ35 密码：5d7g