Layui之异步加载树

需求

        将用户角色与组织机构下的人员进行绑定。组织机构下面有很多人，数据量很大，导致整颗书的数据加载不出来，故需要点击组织机构数的节点，来查询该组织机构下的人员进行显示，进而选择人员进行绑定。效果图如下：

       参考博客：https://blog.csdn.net/u010951692/article/details/51833077

 

           查看了很多博客，也遇到了很多坑，这里，记录一下。

 

jsp:

       表格：

<table class="layui-table" id="roleTable" lay-filter="roleuv" style="margin-bottom: 0;margin-top: 0;"></table>

       barTool的按钮：

<script type="text/html" id="barTool">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="chooseApp">分配资源</a>
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="detail">组织</a>
</script>

JS：

      表格加载：

//表格加载
layui.use('table', function () {
    var table = layui.table;
    table.render({
        elem: '#roleTable'
        , id: 'idRole'
        , url: basePathUrl + '/role/queryRole/' + companyId
        , cols: [[
              {type: 'numbers'}
            , {checkbox: true}
            , {field: 'id', width: 250, title: '角色编码', sort: true}
            , {field: 'roleName', width: 150, title: '角色名称', sort: true, align: 'left'}
            , {field: 'roleType', width: 100, title: '角色类型', sort: true, align: 'left'}
            , {field: 'roleDescribe', width: 220, title: '角色描述', align: 'center'}
            , {field:'isBuiltIn',width:100,title:'是否可编辑',align:'center'}
            , {field: 'right', title: '操作', width: 145, toolbar: "#barTool", align: 'center'}     ①：这里是嵌入了一个barTool按钮
        ]]
        , page: true
        , height: 'full-60'
    });
    table.on('tool(roleuv)', function (obj) {       ②：这里来监控这些toolbar的点击事件。
        $('#treeApplication').attr("disabled", false);
        var data = obj.data;
        window.mydata=data;
        console.log(window.mydata+"11");
        console.log(data);
        if (obj.event === 'chooseApp') {         ③：这里对应的是分配资源的按钮
            var setting = {
                async: {
                    enable: true,
                    type: "get",
                    url: basePathUrl + "/companyApplication/queryCompanyAppTree/" + companyId + "/" + data.id
                },
                check: {
                    enable: true,
                    chkStyle: "checkbox",
                    chkboxType: {"Y": "ps", "N": "s"},
                    radioType: "all"
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: 0
                    }
                }
            };
            zTreeObjApp = $.fn.zTree.init($("#treeApplication"), setting);
            layer.open({
                type: 1
                , title: '分配资源'
                , maxmin: true
                , area: ['450px', '500px']
                , shade: 0
                , content: $('#treeApplication')
                , btn: ['取消', '保存']
                , yes: function () {
                    layer.closeAll();
                }
                , btn2: function () {
                    var treeObj = $.fn.zTree.getZTreeObj("treeApplication");
                    var nodes = treeObj.getChangeCheckedNodes();
                    if (nodes.length < 1) {
                        layer.msg('请编辑要给该角色分配的资源！', {icon: 7});
                        return;
                    }
                    $.ajax({
                        url: basePathUrl + "/roleApplication/saveRoleApplication/" + data.id,
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charse=UTF-8",
                        headers: {'Authorization': token},
                        data: JSON.stringify(nodes),
                        success: function (result) {
                            if (result.code === "200") {
                                layer.msg("保存资源成功！", {icon: 6});
                            }
                        },
                        error: function () {
                            layer.msg("保存资源失败！", {icon: 5})
                        }
                    })
                }
            });
        } else if (obj.event === 'detail') {        ④：这里就是今天要梳理的“组织”对应的数，来实现异步加载。
            $('#app')[0].reset()
            $('#app').attr("disabled", false);
            layer.open({
                type: 1
                , title: '绑定组织机构（请务必绑定到具体个人，否则绑定失效）'
                , maxmin: true
                , area: ['450px', '500px']
                , shade: 0
                , content: $('#app')
            });

            // ztree加载======================异步加载的这颗树================
            var zTreeObj;

            var setting = {
                async: {
                    enable: true,
                    type: "get",    //下面加载的这个url就是初始化树的接口，根据公司ID查询该公司的组织机构。
                    url: basePathUrl + "/organization/queryOrganizationUserTree?companyId="+companyId,   
                   // otherParam: ["companyId", companyId],
                    autoParam:["id"]   //这个id对应着点击某一个组织机构后，将点击的节点ID传到接口的ID,会自动获取点击ID,对应异步查询的接口
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: 0
                    }
                },
                check: {
                    enable: true,
                    chkStyle: "checkbox",
                    //radioType: "level"
                   chkboxType: {"Y": "s", "N": "s"},   //这里是节点的父子关联设置。
                    radioType: "all"
                },
                callback : {
                   // beforeAsync  : ztreeBeforeAsync,
                    onClick:ztreeOnAsyncSuccess,    //点击树节点出发的事件，也就是异步加载的接口（参数在上面的autoParam）
                    onAsyncSuccess : ztreeOnAsyncSuccess, //这个也要添加

                }
            };
            //初始化树============================================
            zTreeObj = $.fn.zTree.init($("#bindOrganization"), setting);  //注意，初始化树的时候，要加  # 号（获取的时候，不能加#，具体见下方）
        }

    })
});①：这里是嵌入了一个barTool按钮
        ]]
        , page: true
        , height: 'full-60'
    });
    table.on('tool(roleuv)', function (obj) {       ②：这里来监控这些toolbar的点击事件。
        $('#treeApplication').attr("disabled", false);
        var data = obj.data;
        window.mydata=data;
        console.log(window.mydata+"11");
        console.log(data);
        if (obj.event === 'chooseApp') {         ③：这里对应的是分配资源的按钮
            var setting = {
                async: {
                    enable: true,
                    type: "get",
                    url: basePathUrl + "/companyApplication/queryCompanyAppTree/" + companyId + "/" + data.id
                },
                check: {
                    enable: true,
                    chkStyle: "checkbox",
                    chkboxType: {"Y": "ps", "N": "s"},
                    radioType: "all"
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: 0
                    }
                }
            };
            zTreeObjApp = $.fn.zTree.init($("#treeApplication"), setting);
            layer.open({
                type: 1
                , title: '分配资源'
                , maxmin: true
                , area: ['450px', '500px']
                , shade: 0
                , content: $('#treeApplication')
                , btn: ['取消', '保存']
                , yes: function () {
                    layer.closeAll();
                }
                , btn2: function () {
                    var treeObj = $.fn.zTree.getZTreeObj("treeApplication");
                    var nodes = treeObj.getChangeCheckedNodes();
                    if (nodes.length < 1) {
                        layer.msg('请编辑要给该角色分配的资源！', {icon: 7});
                        return;
                    }
                    $.ajax({
                        url: basePathUrl + "/roleApplication/saveRoleApplication/" + data.id,
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charse=UTF-8",
                        headers: {'Authorization': token},
                        data: JSON.stringify(nodes),
                        success: function (result) {
                            if (result.code === "200") {
                                layer.msg("保存资源成功！", {icon: 6});
                            }
                        },
                        error: function () {
                            layer.msg("保存资源失败！", {icon: 5})
                        }
                    })
                }
            });
        } else if (obj.event === 'detail') {        ④：这里就是今天要梳理的“组织”对应的数，来实现异步加载。
            $('#app')[0].reset()
            $('#app').attr("disabled", false);
            layer.open({
                type: 1
                , title: '绑定组织机构（请务必绑定到具体个人，否则绑定失效）'
                , maxmin: true
                , area: ['450px', '500px']
                , shade: 0
                , content: $('#app')
            });

            // ztree加载======================异步加载的这颗树================
            var zTreeObj;

            var setting = {
                async: {
                    enable: true,
                    type: "get",    //下面加载的这个url就是初始化树的接口，根据公司ID查询该公司的组织机构。
                    url: basePathUrl + "/organization/queryOrganizationUserTree?companyId="+companyId,   
                   // otherParam: ["companyId", companyId],
                    autoParam:["id"]   //这个id对应着点击某一个组织机构后，将点击的节点ID传到接口的ID,会自动获取点击ID,对应异步查询的接口
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: 0
                    }
                },
                check: {
                    enable: true,
                    chkStyle: "checkbox",
                    //radioType: "level"
                   chkboxType: {"Y": "s", "N": "s"},   //这里是节点的父子关联设置。
                    radioType: "all"
                },
                callback : {
                   // beforeAsync  : ztreeBeforeAsync,
                    onClick:ztreeOnAsyncSuccess,    //点击树节点出发的事件，也就是异步加载的接口（参数在上面的autoParam）
                    onAsyncSuccess : ztreeOnAsyncSuccess, //这个也要添加

                }
            };
            //初始化树============================================
            zTreeObj = $.fn.zTree.init($("#bindOrganization"), setting);  //注意，初始化树的时候，要加  # 号（获取的时候，不能加#，具体见下方）
        }

    })
});

//异步加载的方法
function ztreeOnAsyncSuccess(event, treeId, treeNode){
    //var url = basePathUrl + "/organization/findTreeUser?id=";  //这里ID对应上面的autoParm，这是根据组织Id查询此组织下面的人员。
    var url = basePathUrl + "/organization/findTreeUser?roleId="+window.mydata.id+"&id="
    if(treeNode == undefined){
        url += "1";  //默认ID是1.
    }
    else{
        url += treeNode.id; //动态获取选中节点的ID
    }
    $.ajax({
        type : "get",
        url : url,
        data : "",
        dataType : "json",
        async : true,
        success : function(jsonData) {
            console.log(jsonData+"  I am jsonData");
            console.log(typeof jsonData+"我是类型");
            if (jsonData != null) {
               // var data = jsonData.unitList;
                var datajson=JSON.stringify(jsonData);  //这里注意，添加树节点的时候，参数要为Object，所以要注意转换数据类型！
                var data=JSON.parse(datajson);
                console.log(data+"25252525252");
                if(data != null && data.length != 0){
                    if(treeNode == undefined){
                        //zTreeObj.addNodes(null,data,true);// 如果是根节点，那么就在null后面加载数据
                        $.fn.zTree.getZTreeObj("bindOrganization").addNodes(null,jsonData,true);
                    }
                    else{
                       // zTreeObj.addNodes(treeNode,jsonData,true);//如果是加载子节点，那么就是父节点下面加载
                        $.fn.zTree.getZTreeObj("bindOrganization").addNodes(treeNode,jsonData,true);  //这里注意，不要添加#
                        zTreeObj.updateNode(treeNode);
                    }
                }
                //$.fn.zTree.getZTreeObj("bindOrganization").expandAll(true);
                //zTreeObj.updateNode(treeNode);
                $.fn.zTree.getZTreeObj("bindOrganization").expandNode(treeNode,true, false, false);// 将新获取的子节点展开
            }
        },
        error : function() {
            alert("请求错误！");
        }
    });

};
function ztreeOnAsyncSuccess(event, treeId, treeNode){
    //var url = basePathUrl + "/organization/findTreeUser?id=";  //这里ID对应上面的autoParm，这是根据组织Id查询此组织下面的人员。
    var url = basePathUrl + "/organization/findTreeUser?roleId="+window.mydata.id+"&id="
    if(treeNode == undefined){
        url += "1";  //默认ID是1.
    }
    else{
        url += treeNode.id; //动态获取选中节点的ID
    }
    $.ajax({
        type : "get",
        url : url,
        data : "",
        dataType : "json",
        async : true,
        success : function(jsonData) {
            console.log(jsonData+"  I am jsonData");
            console.log(typeof jsonData+"我是类型");
            if (jsonData != null) {
               // var data = jsonData.unitList;
                var datajson=JSON.stringify(jsonData);  //这里注意，添加树节点的时候，参数要为Object，所以要注意转换数据类型！
                var data=JSON.parse(datajson);
                console.log(data+"25252525252");
                if(data != null && data.length != 0){
                    if(treeNode == undefined){
                        //zTreeObj.addNodes(null,data,true);// 如果是根节点，那么就在null后面加载数据
                        $.fn.zTree.getZTreeObj("bindOrganization").addNodes(null,jsonData,true);
                    }
                    else{
                       // zTreeObj.addNodes(treeNode,jsonData,true);//如果是加载子节点，那么就是父节点下面加载
                        $.fn.zTree.getZTreeObj("bindOrganization").addNodes(treeNode,jsonData,true);  //这里注意，不要添加#
                        zTreeObj.updateNode(treeNode);
                    }
                }
                //$.fn.zTree.getZTreeObj("bindOrganization").expandAll(true);
                //zTreeObj.updateNode(treeNode);
                $.fn.zTree.getZTreeObj("bindOrganization").expandNode(treeNode,true, false, false);// 将新获取的子节点展开
            }
        },
        error : function() {
            alert("请求错误！");
        }
    });

};

 

 加载初始化的树：（根据公司ID查询组织树）

Controller:

 @RequestMapping(value = {"/queryOrganizationUserTree"},method = RequestMethod.GET,produces="text/html;charset=UTF-8")
    @ResponseBody
    public String queryOrganizationUserTree(@RequestParam String companyId){
        //如果已经加载了树，就直接去查用户。
        String treeJson = "";
        try {
            List<Map<String,Object>> bigTree = organizationFacade.queryOrganizationUserTree(companyId);
            treeJson = JacksonJsonUntil.objectToJson(bigTree);
        } catch (Exception e) {
            logger.error("查询组织机构树异常",e);
        }
        return treeJson;
    }

serviceImp:

        

@Override
    public List<Map<String, Object>> queryOrganizationUserTree(String companyId) {
        //找出父节点的组织机构
        OrganizationExample organizationExample = new OrganizationExample();
        OrganizationCriteria criteria = organizationExample.createCriteria();
        criteria.andIsDeleteEqualTo((byte)0);
        criteria.andCompanyIdEqualTo(companyId);
        List<OrganizationEntity> organizationEntities = this.selectByExample(organizationExample);

        //result存放整颗树
        List<Map<String,Object>> result = new ArrayList<>();
        //选出pid等于0的根节点
        if(!CollectionUtils.isEmpty(organizationEntities)){
            List<OrganizationEntity> parentList = organizationEntities.stream().filter(item -> "0".equals(item.getPId())).collect(Collectors.toList());
            //把根节点放在Mpa里面，并去调用递归算法去查询子树
            if(!CollectionUtils.isEmpty(parentList)){
                parentList.forEach(item->{
                    Map<String, Object> map = new HashMap<>();
                    map.put("id",item.getId());
                    map.put("pId",item.getPId());
                    map.put("name",item.getOrganizationName());
                    //map是查询出来的根节点。organizationentities是所有的节点。
                    this.getSonUseTree(map,organizationEntities);
                    result.add(map);
                });
            }

        }
        return result;
    }

    递归：

    

  private Map<String,Object> getSonUseTree(Map<String,Object> map,List<OrganizationEntity> itemList){
        //用来存放所有孩子集合
        List<Map<String,Object>> sonList = new ArrayList<>();

        //选出某一个根节点下面的子树，递归。
        List<OrganizationEntity> son = itemList.stream().filter(item -> map.get("id").equals(item.getPId())).collect(Collectors.toList());

        //如果此节点的孩子不为空，则把孩子放在map里面，并加入到孩子集合里面。
        if(!son.isEmpty()){
            son.forEach(item->{
                Map<String,Object> sonMap = new HashMap<>();
                sonMap.put("id",item.getId());
                sonMap.put("pId",item.getPId());
                sonMap.put("name",item.getOrganizationName());
                sonList.add(sonMap);
                this.getSonUseTree(sonMap,itemList);
            });
        }

        if(!CollectionUtils.isEmpty(sonList)){
            map.put("children",sonList);
        }
        return map;
    }

 

 

异步加载的接口：（根据选中的组织机构的ID,查询下面的人员）

Controller:

       

@RequestMapping(value = {"/findTreeUser"},method = RequestMethod.GET,produces="text/html;charset=UTF-8")
    @ResponseBody
    public String findTreeUser(@RequestParam String id,@RequestParam String roleId){
        String treeJson = "";
        List<Map<String,Object>> treeList;
        try {
            treeList = organizationFacade.findTreeUser(id,roleId);
            treeJson = JacksonJsonUntil.objectToJson(treeList);
        } catch (Exception e) {
            logger.error("查询组织机构树异常",e);
        }
        return treeJson;
    }

ServiceImp:

      

  @Override
    public List<Map<String, Object>> findTreeUser(String id,String roleId) {
        //result存异步查询结果树
        List<Map<String,Object>> result = new ArrayList<>();
        //查询该组织机构下的用户
        List<AllusersEntity> sonUser=organizationDao.queryUserByOrgId(id);
        //查询已经绑定的该角色的用户。
        List<UserRoleEntity> hasBindList=new ArrayList<>();
        UserRoleExample example=new UserRoleExample();
        UserRoleCriteria criteria = example.createCriteria();
        criteria.andRoleIdEqualTo(roleId);
        criteria.andIsDeleteEqualTo((byte)0);
        hasBindList= userRoleDao.selectByExample(example);

            if (!CollectionUtils.isEmpty(sonUser)){
                for (AllusersEntity allusersEntity : sonUser) {
                    Map<String, Object> map = new HashMap<>();
                    map.put("id",allusersEntity.getId());
                    map.put("pId",id);
                    map.put("name",allusersEntity.getUserName());
                    for (UserRoleEntity userRoleEntity : hasBindList) {
                        if(userRoleEntity.getUserId().equals(allusersEntity.getId())){
                            map.put("checked",true);
                        }
                    }
                    result.add(map);
                }
            }
        return result;
    }

 

      layUI  异步树加载就记录到这里，如有问题，请联系我，很高兴与您讨论。

 

推荐一个公众号，免费领架构师学习资料，每周更新优质文章，能学到很多。