zTree基础用法

jsp中使用ztree

引用文件

<script type="text/javascript" src="/zTree_v3/js/jquery-1.4.4.min.js" ></script>
<link rel="stylesheet" href="/zTree_v3/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/zTree_v3/js/jquery.ztree.all.min.js" ></script>

注：springboot项目中放在resources/static内，确保在静态资源访问目录路径下

setting

var settingss = {
        data: {
            simpleData: {
                enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                idKey: "id",   //节点数据中保存唯一标识的属性名称
                pIdKey: "pid",    //节点数据中保存其父节点唯一标识的属性名称
                rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
            },
            key: {
                name: "name"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
            }
        },
        check:{
            enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
            nocheckInherit:true   //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
        },
        callback:{
            onCheck:onCheckNode
        }
    };

动态加载ztree

js：

$(document).ready(function(){
    $.ajax({
        type:"get",
        url:"http://localhost:8081/role/getMenuTestListP",
        async:true,
        success:function(res){

            zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, res.permissions); //初始化树
            zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩
            checkNodes(rolrId);//默认选中节点
        }
    });
});

jsp：

<ul id="treeDemo" class="ztree"></ul>
<button type="button" id="submit">提交</button>

controller：

@RequestMapping("/getMenuTestListP")
@ResponseBody
public Object getRoleListP(){
    Map<String,Object> map =new HashMap<String, Object>();
    List<Permission> permissions = permissionService.findPerm();
    map.put("permissions",permissions);
    return map;
}

设置默认选中

 function checkNodes(rolrId){
    $.ajax({
        url:'http://localhost:8081/role/getSelectPerm/'+rolrId,
        type:'GET',
        async:true,
        success: function (data) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获取zTree对象
            for(var i=0;i<data.permissions.length;i++)
            {
                zTree.checkNode(zTree.getNodeByParam("id",data.permissions[i].id , null),true,false)
            }
            //onCheckNode();
        },
        error:function () {
            alert("error")
        }
    })
}

controller：

    @RequestMapping("/getSelectPerm/{id}")
    @ResponseBody
    public Object getSelectPerm(@PathVariable("id")Integer id){
        Map<String,Object> map =new HashMap<String, Object>();
        //List<MenuTest> menuTests =menuMapper.findSelectPermById(id);
        List<Permission> permissions = permissionService.findPermsByRole(id);
        map.put("permissions",permissions);
        return map;
    }

对权限的修改

勾选完相应选项之后：
js：

$('#submit').click(function () {
        onCheckNode();
        $.ajax({
            url:'http://localhost:8081/role/updateMenuTestList',
            type:'POST',
            async:true,
            data:{
                PostMethod:"checkBox",
                nodesJson:chkNodeStr,
                roleId:rolrId
            },
            dataType:'JSON',
            success: function (data) {
                window.location.href = '/role/roleList'
                //console.log(data);
            },
            error:function () {
                alert("error")
            }
        })
    })

controller：

@RequestMapping("/updateMenuTestList")

public String updateMenuTestList(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse){

    Integer roleId = Integer.valueOf(httpServletRequest.getParameter("roleId").toString());
    String nodesJson =httpServletRequest.getParameter("nodesJson");
    JSONArray jsonArray = JSONArray.fromObject(nodesJson);
    JSONObject jsonObject;
    RolePermissionKey rolePermissionKey =new RolePermissionKey();
    roleService.deleteByRoleId(roleId);

    for(int i=0;i<jsonArray.size();i++){
        jsonObject = jsonArray.getJSONObject(i);
        if(jsonObject.get("id")!=null){
            rolePermissionKey.setPermitId(Integer.valueOf(jsonObject.get("id").toString()));
        }else{
            break;
        }
        rolePermissionKey.setRoleId(roleId);
        roleService.insert(rolePermissionKey);
    }
    return "redirect:/role/roleList";
}

github源码：https://github.com/salation/springboot_shiro.git