Ztree

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

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

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

1. <ul id= "systemTree" class= "ztree" >
3. </ul>

Ztree的配置参数如下

1. var setting = {
2. check:{
3. enable: true
4. },
5. data: {
6. simpleData:{
7. enable: true
8. }
9. },
10. callback:{
11. onCheck:onCheck // 点击属性菜单复选框回调函数
12. }
14. };
15. function onCheck(e,treeId,treeNode){
16. var treeObj1=$.fn.zTree.getZTreeObj( "systemTree"), // 参数为目标ul的id
17. nodes1=treeObj1.getCheckedNodes( true), // 获取选中的节点集合
18. v1= "";
19. // 将选中的系统菜单加载到右边
20. var target_table1 = $( ".systemTable"); //要加载的table的位置
21. //下面的for循环根据自己需要修改
22. for( var i= 0;i<nodes1.length;i++){
23. // 一级菜单加粗
24. if (nodes1[i].getParentNode() == null) {
25. v1+= '<tr><td class="rightTd" id="'+nodes1[i].id+ '"><b>'+nodes1[i].name+ '</b></td></tr>';
26. } else {
27. v1+= '<tr><td class="rightTd" id="'+nodes1[i].id+ '">'+nodes1[i].name+ '</td></tr>';
28. }
29. }
30. //显示在table中
31. target_table1.html(v1);
32. }

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

1. bf.append( "[");
2. for (JSONObject menu : menuList) {
3. pid = menu.getInteger( "pid");
4. id = menu.getInteger( "id");
5. cname = menu.getString( "cname");
6. // 判断一级菜单
7. if (pid == 9999) {
8. bf.append( "{id:"+id+ ",pId:"+pid+ ",name:'"+cname+ "',open:false},");
9. } else {
10. bf.append( "{id:"+id+ ",pId:"+pid+ ",name:'"+cname+ "',open:true},");
11. }
12. }
13. String menuStr = "";
14. if (bf.length() > 0) {
15. menuStr = bf.substring( 0, bf.length()- 1);
16. }
17. menuStr += "]";

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

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

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

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

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

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

1. <link rel= "stylesheet" href= "js/zTree/zTreeStyle/zTreeStyle.css" type= "text/css">
2. <script type="text/javascript" src="js/zTree/js/jquery.ztree.core-3.4.js"></script>
3. <script type= "text/javascript" src= "js/zTree/js/jquery.ztree.excheck-3.5.js"> </script>
4. <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