js 处理树形结构数据方法

var data = [
  { id: 1, name: "办公管理", pid: 0 },
  { id: 2, name: "请假申请", pid: 1 },
  { id: 3, name: "出差申请", pid: 1 },
  { id: 4, name: "请假记录", pid: 2 },
  { id: 5, name: "系统设置", pid: 0 },
  { id: 6, name: "权限管理", pid: 5 },
  { id: 7, name: "用户角色", pid: 6 },
  { id: 8, name: "菜单设置", pid: 6 },
];

var data = [
  {
    id: 1,
    name: "办公管理",
    pid: 0,
    children: [
      {
        id: 2,
        name: "请假申请",
        pid: 1,
        hildren: [{ id: 4, name: "请假记录", pid: 2 }],
      },
      { id: 3, name: "出差申请", pid: 1 },
    ],
  },
  {
    id: 5,
    name: "系统设置",
    pid: 0,
    children: [
      {
        id: 6,
        name: "权限管理",
        pid: 5,
        hildren: [
          { id: 7, name: "用户角色", pid: 6 },
          { id: 8, name: "菜单设置", pid: 6 },
        ],
      },
    ],
  },
];

把表结构转树结构


function toTree(data) {
  // 删除 所有 children,以防止多次调用
  data.forEach(function (item) {
    delete item.children;
  });

  // 将数据存储为 以 id 为 KEY 的 map 索引数据列
  var map = {};
  data.forEach(function (item) {
    map[item.id] = item;
  });
  var val = [];
  data.forEach(function (item) {
    // 以当前遍历项，的pid,去map对象中找到索引的id
    var parent = map[item.pid];
    // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
    if (parent) {
      (parent.children || (parent.children = [])).push(item);
    } else {
      //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
      val.push(item);
    }
  });
  return val;
}
console.log(toTree(data));

根据子节点id 查找到子节点对象


    findPathByLeafId(leafId, nodes, path) {
      if (path === undefined) {
        path = {};
      }
      for (var i = 0; i < nodes.length; i++) {
        var tmpPath = path;
        if (leafId == nodes[i].value) {
          tmpPath = nodes[i];
          return tmpPath;
        }
        if (nodes[i].children) {
          var findResult = this.findPathByLeafId(leafId, nodes[i].children, tmpPath);
          if (findResult) {
            return findResult;
          }
        }
      }
    }

查找id 的树级联路径数组findTreeRouteArray(arrayData, 2312, "object")


var arrayData = [
  {
    id: "0000",
    text: "R1",
    children: [
      {
        id: "8978",
        text: "Aad",
        children: [
          {
            id: "2312",
            text: "adaada",
            children: [{ id: "5154", text: "asdsa" }],
          },
          {
            id: "4544",
            text: "afasf",
            children: [
              { id: "5236", text: "afasf" },
              { id: "2328", text: "afasf" },
            ],
          },
        ],
      },
      {
        id: "7867",
        text: "R2",
        children: [
          {
            id: "8767",
            text: "afasf",
            children: [
              { id: "2016", text: "afafa" },
              { id: "2017", text: "afasd" },
            ],
          },
          { id: "7657", text: "h", children: [{ id: "7867", text: "afras" }] },
        ],
      },
    ],
  },
];
function findTreeRouteArray(arrData, id, arrType) {
  var arr = [], // 操作数组
    re = [], // 结果  AND 是否匹配到
    run = true,
    arrType = arrType || "id"; // 运行

  // arrData 解析
  arrData.map((e) => {
    arr.push({
      id: e.parent_id,
      children: [e],
      nextFuncTag: true, // 下一个函数的起点标识
    });
  });

  /**
   * 组查询 (无状态函数）
   * @e{Array} 下一个元素
   */
  function select(e) {
    if (!run) return;
    // 截取段落
    e.nextFuncTag && (re = []);
    if (typeof e.id != "undefined") {
      if (arrType == "object") {
        re.push(e);
      } else {
        re.push(e.id);
      }
    }

    if (e.id == id) {
      run = false;
    } // 下一级查询
    else if (e.children && e.children.length != 0) {
      e.children.map(select);
    }
  }

  arr.map(select);

  return re;
}
console.log(findTreeRouteArray(arrayData, 2312)); //["0000", "8978", "2312"]
console.log(findTreeRouteArray(arrayData, 2312, "object")); //[{"0000"}, {"8978"}, {"2312"}]

js 处理树形结构数据 方法

js 处理树形结构数据方法