js 根据id,pid平面数据build Children树结构

超、凢脫俗 2023-10-05 04:52 18阅读 0赞

数据库查出来的平面数据如下：

var nodes = [
        {"id":1,"title":"第一级1","parentid":0},
        {"id":2,"title":"第一级2","parentid":0},
        {"id":3,"title":"第二级1-3","parentid":2},
        {"id":4,"title":"第二级2-4","parentid":2},
        {"id":5,"title":"第三级1-5","parentid":4},
        {"id":6,"title":"第一级3","parentid":0},
        {"id":7,"title":"第二级1-7","parentid":1},
        {"id":8,"title":"第三级1-8","parentid":7}
        ];

理论上要显示出来的效果：

第一级1
             --第二级1-7
               --第三级1-8
            第一级2
             --第二级1-3
             --第二级2-4
               --第三级1-5
            第一级3

js转换函数

调用：

//调用
    const treeData = buildDataToTree(nodes, 0);
    console.log("--> " + JSON.stringify(treeData));

转换后的效果：

[{
        "id": 1,
        "title": "第一级1",
        "parentid": 0,
        "children": [{
            "id": 7,
            "title": "第二级1-7",
            "parentid": 1,
            "children": [{
                "id": 8,
                "title": "第三级1-8",
                "parentid": 7,
                "children": []
            }]
        }]
    }, {
        "id": 2,
        "title": "第一级2",
        "parentid": 0,
        "children": [{
            "id": 3,
            "title": "第二级1-3",
            "parentid": 2,
            "children": []
        }, {
            "id": 4,
            "title": "第二级2-4",
            "parentid": 2,
            "children": [{
                "id": 5,
                "title": "第三级1-5",
                "parentid": 4,
                "children": []
            }]
        }]
    }, {
        "id": 6,
        "title": "第一级3",
        "parentid": 0,
        "children": []
    }]

![20201120220137215.png][]

**作者原创文章，转载请注明出处，好用记得点赞关注不迷路**

[20201120220137215.png]: https://img-blog.csdnimg.cn/20201120220137215.png