js将表格转换成树表

最新推荐文章于 2023-06-28 15:40:19 发布

昵称已存在lxttttt

最新推荐文章于 2023-06-28 15:40:19 发布

阅读量201

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43238931/article/details/120881500

版权

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用JavaScript将传统的表格数据转换为树形结构，以增强数据展示的层次感。通过提供的参考链接和示例代码，读者可以学习到具体的转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：https://www.cnblogs.com/loveshes/p/11877799.html

原表格结构
在这里插入图片描述
转换成这样的结构

代码：

arr2tree2(arr, root) {
      var temp = {}
      temp[root.id] = root
      for (var i = 0; i < arr.length; i++) {
        // 插入一个新节点，后面对该节点的修改都会同步到该节点的父节点上
        temp[arr[i].id] = arr[i]
        // 查找是否有子节点
        var keys = Object.keys(temp)
        for (var j = 0; j < keys.length; j++) {
          if (temp[keys[j]].pid === arr[i].id) {
            temp[arr[i].id].nodes ? '' : temp[arr[i].id].nodes = []
            temp[arr[i].id].nodes.push(temp[keys[j]]) // 将该子节点挂到当前节点的node上
          }
        }
        // 查找是否有父节点
        if (temp[arr[i].pid]) {
          temp[arr[i].pid].nodes ? '' : temp[arr[i].pid].nodes = []
          temp[arr[i].pid].nodes.push(arr[i]) // 将当前节点挂到父节点的node上
        }
      }
      return temp
    }