zTree -- jQuery 树插件 实现权限管理

1.下载  zTree -- jQuery 树插件

  

      解压后，项目中引入 js 、css 和 图片样式。（注意看官网 的Demo  , 带勾选框的  和  不带勾选框  的需要不同的 js文件）

2.

    前台js

        

$("#menuList").live("click",function(){
        $('#addform').addClass('is-visible');
        //$('#fom').attr('action', '${basePath }/user/addAccess');
        $('#_method').val('POST');
        var zNodes;
        var setting = {
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback:{
                    onCheck:onCheck
                }
            };
        $.ajax({
            url:"${basePath}/access/menu",
            cache:false,
            async:true,
            dataType: "json",
            success:function(map){
                var menus = map.menus;
                var bf = "" ;
                for (var i = 0; i < menus.length; i++) {
                    var menu = menus[i];
                    pid = menu.parentId;  
                    id = menu.id;  
                    cname = menu.menuName;  
                     bf = bf + "{id:"+id+",pId:"+pid+",name:'"+cname+"',open:true},";
                     
                }
                bf = "[" + bf.substring(0, bf.length-1) + "]";
                zNodes = bf;
                var zNodes = eval("("+zNodes+")");  
                $.fn.zTree.init($("#addAccess"), setting, zNodes);
                var array = $('input[id="menuList"]').val();
                var array=array.split(",");
                 var treeObj=$.fn.zTree.getZTreeObj("addAccess");
                 for (var i=0;i<array.length;i++){
                    treeObj.checkNode(treeObj.getNodeByParam("id",array[i]),true);
                }
            }
          });
    })


function onCheck(e,treeId,treeNode){
            var treeObj=$.fn.zTree.getZTreeObj("addAccess"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
            for(var i=0;i<nodes.length;i++){
            
            if(i == nodes.length - 1){
                v+=nodes[i].id ;
            }else{
                v+=nodes[i].id + ",";
            }
            }
            $("input[id='menuListAdd']").val(v);
            $('input[id="menuList"]').val(v);
            }