ztree使用

jsp代码

//引入ztree的css与js文件

<div>

    <ul class="ztree" id="roleTree"></ul>

</div>

<div>

    <ul class="ztree" id="sonTree"></ul>

</div>

js代码

**引入ztree的css与js文件

var setting={

        data:{

            key:{

                title:"title"

            },

            simpleData:{

                enable:true;

            }

        },

        treeNode:{

            isHidden:true

        },

        callback:{

            onClick:zNodeClick   //点击节点后回调函数

        },

        view:{

            selectedMulti:true,

            fontCss:setHighlight,

            addDiyDom:addDiyDom

        },

        check:{

            enable:true      //设置ztree数可勾选

        },

}；

//展示所有节点

$(function(){

    $.ajax({

        type:'post',

        url:contPath+'/q/roleList',     //获取所有的role

        dataType:'json',

        success:function(result){

            $.fn.zTree.init($("#roleTree"),setting,result.data);        //初始化ztree

            var treeObj=$.fn.zTree.getZTreeObj("roleTree");     //获取ztree对象

            zNodes=treeObj.getNodes();       //获取所有ztree节点

            treeObj.selectNode(zNodes[0]);    //默认选中第一个节点

        }

    })；

})

//role节点点击事件

function zNodeClick(eventjs,treeId,treeNode,clickFlag){

    $.fn.zTree.init($("#sonTree"),setting,zNodes);

    cancelSelect();    //取消节点选中状态

    var treeObj=$.fn.zTree.getZTreeObj("sonTree");

    treeObj.checkAllNodes(false);     //取消节点选中状态

    $.ajax({

        type:'post',

        url:contPath+'/q/sonList?roleId='+treeNode.id,    //根据roleId获取对应子数

        dataType:'json',

        success:function(result){

            var znodes=result.data;

            for(var i=0;i<znodes.length;i++){

                var nodes=treeObj.getNodesByParam("id",znodes[i].id,null);    //通过id获取所有需要的节点

                if(nodes[0].isParent && nodes[0].children.length>0){}      //判断如果该节点是父节点或者子节点长度大于0，则什么也不做

                else{

                    treeObj.checkNode(nodes[0],true,true);      //否则设置该节点为选中状态

                }

                for(var j=0;j<zNodes.length;j++){

                    var nodes1=treeObj.getNodesByParam("id",zNodes[j].id,null);    //通过id获取所有需要的节点

                    treeObj.setChkDisabled(nodes[0],true,true,true);     //设置节点不可选属性为true，即节点不可以被勾选

                }

            }

        }

    })

}

//取消节点选中状态

function cancelSelect(){

    var treeObj=$.fn.zTree.getZTreeObj("sonTree");     //获取ztree对象

    var disabledNodes=treeObj.getNodesByParam("chkDisabled",true);    //获取所有被设置不能勾选的节点

    for(var i=0;i<disabledNodes.length;i++){      //循环遍历不可选节点，逐个修改属性

        treeObj.setChkDisabled(disabledNodes[i],false);     //设置节点不可选属性为false，即节点可以被勾选

    }

}

//获取所有被选中的节点

sons=treeObj.getCheckedNodes(true);

RoleService.java代码

//获取所有角色

public static Map<String,Object> queryAllRole(HttpServletRequest request) throws SQLException{

    String path=request.getContextPath();

    String imgConn=path+"/js/ztree/img/access.png";     //节点图标

    String imgClose=path+"/js/ztree/img/ztree-close.png";    //父节点关闭图标

    String imgOpen=path+"/js/ztree/img/ztree-open.png";    //父节点打开图标

    List<Map<String,Object>> alist=RoleDao.queryAllRole();

    List<Map<String,Object>> rolelist= new ArrayList<Map<String,Object>>();

    Map<String,Object> aMap = new HashMap<String,Object>();

    for(Map<String,Object> list:alist){

        Map<String,Object> rMap=new HashMap<String,Object>();

        rMap.put("id",list.get("ROLE_ID"));

        rMap.put("name",list.get("ROLE_NAME"));

        rMap.put("pId",list.get("PARENT_ID"));

        rMap.put("open",true);   //父节点默认为打开状态

        rMap.put("icon",imgConn);

        rMap.put("iconOpen",imgOpen);

        rMap.put("iconClose",imgClose);

        rolelist.add(rMap);

    }

    aMap.put("data",rolelist);

    return aMap;

}