关于树形菜单的创建

小弟不才，  对于jQuery的ztree树形菜单不了解，所以，碰到需要用树形菜单的时候感觉真心头大，然后参考公司源码，把树形菜单重新梳理，整理了下。

第一步：先在jsp页面引入jQuery和ztree的js,css；

 <link rel="stylesheet" href="<%=basePath%>/css/zTreeStyle.css">
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/jquery.validate.js"></script>

 

第二步：不要忘了添加css要用到的图片，不然无法显示复选框和文件夹哦；

第三步：开始编写树形菜单了

 //设置ztree的参数配置
   var setting = {check:{enable:true,nocheckInherit:true},view:{selectedMulti:false},
     data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
      tree.checkNode(node, !node.checked, true, true);
      return false;
     }}};

然后是设置用户菜单

 

 // 用户-菜单
   var zNodes=[
     <c:forEach items="${menuUserlist}" var="menu">{id:"${menu.id}", pId:"${not empty menu.parent.id?menu.parent.id:0}", name:"${not empty menu.parent.id?menu.name:'权限列表'}"},
              </c:forEach>];
   // 初始化树结构
   var tree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
   // 不选择父节点
   tree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
   
   // 默认选择节点
   var ids = "${role.menuIds}".split(",");
   for(var i=0; i<ids.length; i++) {
    var node = tree.getNodeByParam("id", ids[i]);
    try{tree.checkNode(node, true, false);}catch(e){}
   }

最后是选择默认打开全部节点

 // 默认展开全部节点
   tree.expandAll(true);
  

到处就基本结束了，  下面的<div>里不要忘记添加ID属性。

自我感觉比较好用些。当然 后台代码要自己编写了