zTree树 生成带children的数据

生成带孩子的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 },

];

function toTree(data) {

        // 删除 所有 children,以防止多次调用

        data.forEach(function (item) {

             delete item.children;

         });

        // 将数据存储为 以 id 为 KEY 的 map 索引数据列

        var map = {};

        data.forEach(function (item) {

//console.log(item);

            map[item.id] = item;

        });

  //    console.log(map);

        var val = [];

        data.forEach(function (item) {

            // 以当前遍历项,的pid,去map对象中找到索引的id

            var parent = map[item.pid];

//console.log(parent);

            // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中

           if (parent) {

                 (parent.children || ( parent.children = [] )).push(item);

             } else {

                 //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级

                 val.push(item);

             }

        });

        return val;

    }

    console.log(toTree(data))




function test() {

      const list = [

        { id: "123", parentId: "", children: [] },

        { id: "124", parentId: "123", children: [] },

        { id: "125", parentId: "124", children: [] },

        { id: "126", parentId: "125", children: [] },

        { id: "127", parentId: "126", children: [] }

      ];

      const mapList = [];

      const tree = [];

      list.forEach(item => {


        mapList[item.id] = item;

      });

      list.forEach(item => {

        const parentNode = mapList[item.parentId];

        if (!parentNode) {

if (!item.children) {

item.children = []

}

          tree.push(item);

        } else {

if (!parentNode.children) {

parentNode.children = []

}

          parentNode.children.push(item);

        }

      });

      console.log("tree", tree);

    }

test();

你可能感兴趣的:(zTree树 生成带children的数据)