generate-tree.js

/**
 * 生成树结构
 * Callback:
 * - node, 子节点
 * - props, 参数props
 * @param {Array} data 需要处理的数组
 * @param {Array} props 属性
 * @param {Function} strucChangeCallback 更改结构的回调函数
 */
export const generateTree = function (
  data,
  props = {
    parentId: "parentId",
    id: "id"
  },
  strucChangeCallback = function (node, props) {
    return node;
  }
) {
  // 把跟节点首先放进数组，根节点支持：null 0 ""
  const tmpTree = data
    .filter(node => !node[props.parentId])
    .map(node => strucChangeCallback(node, props));
  // 递归生成节点及子节点数据
  const findChildren = tree => {
    tree.forEach(node => {
      node.children = data
        .filter(cNode => cNode[props.parentId] === node[props.id])
        .map(node => strucChangeCallback(node, props));
      if (node.children.length) {
        findChildren(node.children);
      }
    });
  };

  findChildren(tmpTree);

  return tmpTree;
}

使用案例:

// example:
const data = [{
    "createTime": "2021-10-27 11:32:00",
    "id": 1,
    "isLeaf": 0,
    "name": "根目录",
    "parent": 0,
    "type": "ROOT",
    "updateTime": "2021-10-27 11:32:00"
  },
  {
    "createTime": "2021-10-29 15:02:03",
    "id": 2,
    "isLeaf": 0,
    "name": "子目录1",
    "parent": 1,
    "type": "OBJ",
    "updateTime": "2021-11-05 15:18:12"
  },
  {
    "createTime": "2021-10-29 15:02:03",
    "id": 3,
    "isLeaf": 0,
    "name": "子目录2",
    "parent": 1,
    "type": "MODEL",
    "updateTime": "2021-11-05 15:18:13"
  },
  {
    "createTime": "2021-10-29 15:02:03",
    "id": 4,
    "isLeaf": 0,
    "name": "子目录3",
    "parent": 1,
    "type": "FUNC",
    "updateTime": "2021-11-05 15:18:14"
  },
  {
    "createTime": "2021-10-29 15:02:03",
    "id": 5,
    "isLeaf": 0,
    "name": "子目录3",
    "parent": 1,
    "type": "RESOURCE",
    "updateTime": "2021-11-05 15:18:16"
  },
  {
    "createTime": "2021-10-29 15:02:03",
    "id": 6,
    "isLeaf": 0,
    "name": "子目录1-1",
    "parent": 2,
    "type": "OBJ",
    "updateTime": "2021-11-05 15:18:12"
  },
  {
    "createTime": "2021-10-29 15:02:03",
    "id": 7,
    "isLeaf": 0,
    "name": "子目录1-2",
    "parent": 2,
    "type": "OBJ",
    "updateTime": "2021-11-05 15:18:12"
  },
  {
    "createTime": "2021-10-29 15:02:03",
    "id": 8,
    "isLeaf": 0,
    "name": "子目录1-3",
    "parent": 2,
    "type": "OBJ",
    "updateTime": "2021-11-05 15:18:12"
  },
  {
    "createTime": "2021-10-29 15:02:03",
    "id": 9,
    "isLeaf": 1,
    "name": "叶子1-1-1",
    "parent": 6,
    "type": "OBJ",
    "updateTime": "2021-11-05 15:18:12"
  },
  {
    "createTime": "2021-10-29 15:02:03",
    "id": 10,
    "isLeaf": 1,
    "name": "叶子1-1-2",
    "parent": 6,
    "type": "OBJ",
    "updateTime": "2021-11-05 15:18:12"
  },
  {
    "createTime": "2021-10-29 15:02:03",
    "id": 11,
    "isLeaf": 1,
    "name": "叶子1-1-3",
    "parent": 6,
    "type": "OBJ",
    "updateTime": "2021-11-05 15:18:12"
  }
];
let tree = generateTree(
  data,
  { parentId: "parent", id: "id" },
  (node, props) => {
    return {
      id: node[props.id],
      parentId: node[props.parentId],
      name: node.name,
      type: node.type,
      isLeaf: node.isLeaf,
      children: null,
      disabled: node.disabled ? node.disabled : false,
      ele: node
    };
  }
);
console.log(tree);

结果：

generateTree运行结果

结语

提示：后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。