JS 平面数据与树形数据转换

最新推荐文章于 2024-09-13 23:50:28 发布

我的心巴

最新推荐文章于 2024-09-13 23:50:28 发布

阅读量292

点赞数 3

文章标签： javascript 平面数据结构

本文链接：https://blog.csdn.net/hrcsdn13/article/details/140433586

版权

一、平面转树形

getTreeFromPlane (plane) {
   let tree = [], map = {};
   plane.forEach((p, index) => {
        map[p.id] = index;
        p.children = [];
   });
   plane.forEach(p => {
        p.pid===-1?tree.push(p):plane[map[p.pid]].children.push(p);
   });
   return tree;
}
//数据格式
[
    {
        id: 1,
        pid: -1,
        label: '一级 1'
    },
    {
        id: 2,
        pid: -1,
        label: '一级 2'
    },
    {
        id: 3,
        pid: -1,
        label: '一级 3'
    },
    {
        id: 4,
        pid: 1,
        label: '二级 1'
    },
    {
        id: 5,
        pid: 2,
        label: '二级 2-1'
    },
    {
        id: 6,
        pid: 2,
        label: '二级 2-2'
    },
    {
        id: 7,
        pid: 3,
        label: '二级 3-1'
    },
    {
        id: 8,
        pid: 3,
        label: '二级 3-2'
    },
    {
        id: 9,
        pid: 4,
        label: '三级 1-1-1'
    },
    {
        id: 10,
        pid: 4,
        label: '三级 1-1-2'
    }
]

二、树形转平面

getPlaneFromTree (tree) {
   let plane = [], data = {};
   while (tree.length) {
        data = tree.shift();
        plane.push(data);
        if('children' in data&&data.children.length>0) {
             data.children.forEach(child => {
                 tree.push(child);
             });
        }
   }
   return plane;
}
//数据格式
[
                {
                    id: 1,
                    pid: -1,
                    label: '一级 1',
                    children: [
                        {
                            id: 4,
                            pid: 1,
                            label: '二级 1-1',
                            children: [
                                {
                                    id: 9,
                                    pid: 4,
                                    label: '三级 1-1-1'
                                },
                                {
                                    id: 10,
                                    pid: 4,
                                    label: '三级 1-1-2'
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 2,
                    pid: -1,
                    label: '一级 2',
                    children: [
                        {
                            id: 5,
                            pid: 2,
                            label: '二级 2-1'
                        },
                        {
                            id: 6,
                            pid: 2,
                            label: '二级 2-2'
                        }
                    ]
                },
                {
                    id: 3,
                    pid: -1,
                    label: '一级 3',
                    children: [
                        {
                            id: 7,
                            pid: 3,
                            label: '二级 3-1'
                        },
                        {
                            id: 8,
                            pid: 3,
                            label: '二级 3-2'
                        }
                    ]
                }
            ]