关于树形菜单的创建

小弟不才，  对于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属性。

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