并排结构通过关联id变更为树结构

最新推荐文章于 2024-07-23 14:51:29 发布

是你的小熊啊

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量166

点赞数

文章标签：前端算法 javascript

本文链接：https://blog.csdn.net/xiaoxiongxia/article/details/131580690

版权

直接上封装好代码

//并排结构通过关联id变更为树结构,子id subid , 父id parentID
const treeStructure = (
  data: Array<any>,
  subid: string = "ID",
  parentID: string = "pid"
) => {
  let tableData: any = [];
  let tableDataArr = data;
  tableDataArr.map((item) => {
    //给所有对象一个children属性
    item.children = [];
    if (item[parentID] != 0) {
      tableDataArr.map((r) => {
        if (item[parentID] == r[subid]) {
          //删除子组中的children，目前只有二级分类
          delete item.children;
          r.children.push(item);
        }
      });
    }
  });
  //删除在一级外的所有子类
  tableDataArr.forEach((item) => {
    if (item[parentID] == 0) {
      tableData.push(item);
    }
  });
  return tableData;
};

传参的话主要是接口的数据源传进来,必须是数组！

然后subid是子id，parentID是父id，当parentID为0说明该层为最高级，具体按照后端给的接口进行一个判断

let obj = [
    {
       name:"我是父亲"
       subid:1,
       parentID:0
    },
    {
       name:"我是儿子"
       subid:2,
       parentID:1,//parentID和subid是存在关联关系的，如果parentID和其他列的subid相同的话，那么他们肯定存在层级关系
    }
]

parentID和subid是存在关联关系的，如果parentID和其他列的subid相同的话，那么他们肯定存在层级关系

通过我写的那个函数

可以变成

let obj = [
    {
       name:"我是父亲"
       subid:1,
       parentID:0,
       children:[
        {
           name:"我是儿子"
           subid:2,
           parentID:1
        }
      ]
    },
    
]

大概就是这样，可以使的并排的数据，变成树结构数据，方便我们对接ui库