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

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

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

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

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[i].name+'';
        	} else {
        		v1+= ''+nodes1[i].name+'';
        	}
        }
        //显示在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文件

这里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