在做分配权限模块的时候,遇到了要动态显示树形菜单的情况。查了下都是用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>