layui整合树状图

21 篇文章 0 订阅

 后端产生数据:

    @PostMapping("treeDepartment")
    @ResponseBody
    public Object treeDepartment(){
        Tools.logger.info("进入treeDepartment");
        List<Department> departments=departmentService.findAllDepartments();
        List<CompanyInfo> companyInfos=companyInfoService.findAllCompanyInfos();
        List<Department> departmentsAll=new ArrayList<>();
        for (int i = 0; i < companyInfos.size(); i++) {
            Department department=new Department();
            department.setDeptId(companyInfos.get(i).getCompInfoId());
            department.setDeptName(companyInfos.get(i).getCompInfoName());
            department.setDeptParentId("0");
            departmentsAll.add(department);
        }
        for (int i = 0; i < departments.size(); i++) {
            if(departments.get(i).getDeptParentId().equals("0")){
                departments.get(i).setDeptParentId(departments.get(i).getCompInfoId());
            }
        }

        departmentsAll.addAll(departments);
        Tools.logger.info("离开treeDepartment");
        return departmentsAll;
    }

 js方法:递归集合成树

/**
     * 将list装换成tree
     * @param {Object} myId  数据主键id
     * @param {Object} pId     数据关联的父级id
     * @param {Object} list list集合
     */
    function listToTree(myId,pId,myName,list){
        function exists(list, parentId){
            for(var i=0; i<list.length; i++){
                if (list[i][myId] == parentId) return true;
            }
            return false;
        }
        //树节点
        var nodes = [];
        // get the top level nodes
        for(var i=0; i<list.length; i++){
            var row = list[i];
            row.title=row[myName];
            if (!exists(list, row[pId])){
                nodes.push(row);

            }
        }
        var toDo = [];
        for(var i=0; i<nodes.length; i++){
            toDo.push(nodes[i]);

        }
        while(toDo.length){
            var node = toDo.shift();    // the parent node
            // get the children nodes
            for(var i=0; i<list.length; i++){
                var row = list[i];
                row.title=row[myName];
                if (row[pId] == node[myId]){
                    //var child = {id:row.id,text:row.name};
                    if (node.children){
                        node.children.push(row);
                    } else {
                        node.children = [row];
                    }
                    toDo.push(row);
                }
            }
        }
        return nodes;
    }

 使用layui生成树状图

        jQuery.support.cors = true;
        $.ajax({
            type: 'POST',
            dataType: 'json',
            async: false,
            url: ctx + '/treeDepartment',
            data: {},
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
            success: function (data) {


                tree.render({
                    elem: '#deptParent'  //绑定元素
                    , click: function (obj) {
                        console.log(obj.data); //得到当前点击的节点数据
                        console.log(obj.state); //得到当前节点的展开状态:open、close、normal
                        console.log(obj.elem); //得到当前节点元素
                        console.log(obj.data.children); //当前节点下是否有子节点
                        $('#deptParentId').val(obj.data.deptId);
                        $('#deptParentId1').val(obj.data.deptName);

                    }
                    , data: listToTree("deptId","deptParentId","deptName",data)
                });

            },
            error: function () {
                console.log('异常!');
            }
        });

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值