xinglie / xinglie.github.io

blog
https://xinglie.github.io
153 stars 22 forks source link

树形数据的节点关系设计 #82

Open xinglie opened 3 years ago

xinglie commented 3 years ago

给定一个扁平的数据结构,如

let data = [{
    id: 'node1',
    text: 'node1'
}, {
    id: 'node2',
    text: 'node2'
}, {
    id: 'node3',
    pId: 'node1',
    text: 'node3'
}, {
    id: 'node4',
    pId: 'node2',
    text: 'node4'
}, {
    id: 'node5',
    pId: 'node3',
    text: 'node5'
}];

转换成树形结构如

let treeData = [{
    id: 'node1',
    text: 'node1',
    children: [{
        id: 'node3',
        pId: 'node1',
        text: 'node3',
        children: [{
            id: 'node5',
            pId: 'node3',
            text: 'node5'
        }]
    }]
}, {
    id: 'node2',
    text: 'node2',
    children: [{
        id: 'node4',
        pId: 'node2',
        text: 'node4'
    }]
}]

给定节点,如node5node1需要知道node5node1里面 给定节点,如node4node3,知道node4node3后面

xinglie commented 3 years ago

节点附加level在第几层,index在当前层中第一个,以及path指向到当前节点的路径。

let treeData = [{
    id: 'node1',
    text: 'node1',
    level:0,
    index:0,
    path:[0],
    children: [{
        id: 'node3',
        pId: 'node1',
        text: 'node3',
        level:1,
        index:0,
        path:[0,0],
        children: [{
            id: 'node5',
            pId: 'node3',
            text: 'node5',
            level:3,
            index:0,
            path:[0,0,0],
        }]
    }]
}, {
    id: 'node2',
    text: 'node2',
    level:0,
    index:1,
    path:[1],
    children: [{
        id: 'node4',
        pId: 'node2',
        text: 'node4',
       level:1,
       index:0,
       path:[1,0],

    }]
}]