树结构数据整理

2021-01-05 17:36:28 阅读：151 来源： 互联网

标签：temp 树结构 id var length 整理节点数据 children

　　一棵树是有根节点的，根据根节点的信息，可以用递归最终拼成一完整的树。

　　项目里有个选部门的对话框

　　要加个模糊查询框，类似这种，本来觉得底层拼树结构挺麻烦，结果仔细思考了一番，还挺简单的。

　　主要思路就是找到最上层的节点，拼树就容易了。首先写个demo，a->b，c->d->e，a与c 同层节点。

var list = [
    { id: '1', name: 'a', p_id: '10' },
    { id: '2', name: 'b', p_id: '1' },
    { id: '3', name: 'c', p_id: '11' },
    { id: '4', name: 'd', p_id: '3' },
    { id: '5', name: 'e', p_id: '4' },
];

　　提取出父id，具体流程就不写了，一个 map 很容易搞定。p_id 变量就是父id 数组。

　　接着是具体处理流程：找到最上层的节点

function a () {
    var res = [];
    for(var i = 0; i < p_id.length; i++) {
        // 找出父节点
        var temp = list.filter(row => {return p_id[i] === row.id});
        if (temp && temp.length) {
            // 如果非最上父节点，则跳过
            var p = list.filter(row => {return temp[0]['p_id'] === row.id});
            if (p && !p.length) {
                // 向下一直找到叶子节点
                var children = b(temp[0]);
                if (children && children.length) {
                    temp[0].children = children;
                }
                res.push(temp[0]);
            }
        }
    }
    console.log(res);
}

　　根据找出来的最上层节点，递归找到其下子节点至叶子节点

function b(parent) {
    var temp = list.filter(row => {return parent.id === row.p_id});
    if (temp && temp.length) {
        for(var i = 0; i < temp.length; i++) {
            var children = b(temp[i]);
            if (children && children.length) {
                temp[i]['children'] = children;
            }
        }
    }
    return temp;
}

　　最终搞定

标签：temp,树结构,id,var,length,整理,节点,数据,children
来源： https://www.cnblogs.com/guofan/p/14237047.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

树结构数据整理