使用ztree构建权限菜单

1.下载ztree插件并把其导入到项目文件

https://github.com/zTree/zTree_v3

注：在所需页面引入css，js

  <link rel="stylesheet" href="<%=basePath%>/zTree_v3-master/css/demo.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=basePath%>/zTree_v3-master/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/zTree_v3-master/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="<%=basePath%>/zTree_v3-master/js/jquery.ztree.excheck.js"></script>

2.前端html中标记要放入菜单权限的位置，这里       3.添加js代码控制

$(documnet).ready(function(){

//3.1最原始的情况，只有三个参数：绑定位置元素，设置，数据源

$.fn.zTree.init($("#treeDemo"), setting, zNodes);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var type = { "Y":"ps", "N":"s"};
zTree.setting.check.chkboxType = type;

});

//3.2补上这两个参数setting ,zNodes

var setting = {
check: {enable: true},
data: {simpleData: {enable: true}},
callback: { beforeCheck: beforeCheck,  onCheck: onCheck   }  
};

//3.3补上上面两个回调函数

function beforeCheck(treeId, treeNode) 
 {  
  
            return (treeNode.doCheck !== false);  
 }   
    var arrayObj = new Array();  
        function onCheck(e, treeId, treeNode) {  
            if (treeNode.check_Child_State > 0) {  
                arrayObj.push(treeNode.id);  
                for (var i = 0; i < treeNode.children.length; i++) {  
                //  alert(treeNode.children[i].menuid + treeNode.children[i].menuname);  
  
                    arrayObj.push(treeNode.children[i].id);  
                }  
            }  
            else {  
                //选中则添加  
                if (treeNode.checked == true) {  
  
                    arrayObj.push(treeNode.id);  
        //      alert(treeNode.menuid + treeNode.menuname);  
                }  
                    //去掉勾选则从数组中删除  
                else {  
                    //判断一个父节点取消则相应的子节点全部取消  
                    if (treeNode.check_Child_State == 0)  
                    {  
                        //先清除掉父节点然后循环去掉字节点的选中ID  
                        arrayObj.splice(jQuery.inArray(treeNode.id, arrayObj), 1);  
                        for(var i=0;i<treeNode.children.length;i++)  
                        {  
                            arrayObj.splice(jQuery.inArray(treeNode[i], arrayObj), 1);  
                        }  
                    }else  
                    arrayObj.splice(jQuery.inArray(treeNode.id, arrayObj), 1);  
                }  
            }  
  //alert(arrayObj.sort().toString());  
            $("#hfRole").val(arrayObj.sort().toString());//存放隐藏域中以便插入数据  
        }  

//3.4用ajax从后台获取数据源

var zNodes ;
var path="<%=basePath%>";
     $(document).ready(function(){
      $.ajax({
  url:path+"/role/getroles",
   data:null,
   async:false,
type:"post",
 dataType:"json",
  success:function(data){
var jsonArray = JSON.parse(data);
var length=jsonArray.length;
zNodes = new Array([length]);
if(length>0)
{
for(var i=0;i<length;i++)
{
var each=jsonArray[i];
//console.log(each);
var pcode=each.permissionCode;
var flag=pcode.length==3?true:false;
var object=createObject(each.id,each.pid,each.permissionName,null,flag);
zNodes[i]=object;
}
}
 
  }
  
  });

 //用方法构造一个对象
  function createObject(id, pId,name,checked,open)
{
       var object = new Object();
       object.id = id;
        object.pId = pId;
object.name = name;
 object.checked = checked;
  object.open = open;
       return object;
}