首页

Javascript

Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

JS生成树形目录结构菜单（无限级）

2020年02月14日 发布 阅读(4534) 作者：Jerman

JS非递归形式生成树形菜单，可生成无限级

直接上代码吧，可直接复制到浏览器运行一下，有问题欢迎指出

  1. // 原始数据代码
  2. const list = [
  3.   {
  4.     parentId: null,
  5.     target: "_blank",
  6.     open: false,
  7.     sort: 0,
  8.     disabled: false,
  9.     name: "1",
  10.     url: "/menu",
  11.     icon: "aaa",
  12.     remark: "fafsa",
  13.     id: 19,
  14.     createTime: "1579508935022"
  15.   },
  17.   {
  18.     parentId: 19,
  19.     target: "_blank",
  20.     open: false,
  21.     sort: 0,
  22.     disabled: false,
  23.     name: "2",
  24.     url: "/menu",
  25.     icon: "aaa",
  26.     remark: "fafsa",
  27.     id: 191,
  28.     createTime: "1579508935022"
  29.   },
  31.   {
  32.     parentId: 191,
  33.     target: "_blank",
  34.     open: false,
  35.     sort: 0,
  36.     disabled: false,
  37.     name: "3",
  38.     url: "/menu",
  39.     icon: "aaa",
  40.     remark: "fafsa",
  41.     id: 192,
  42.     createTime: "1579508935022"
  43.   },
  45.   {
  46.     parentId: 192,
  47.     target: "_self",
  48.     open: false,
  49.     sort: 0,
  50.     disabled: false,
  51.     name: "4",
  52.     url: "/aklfdlsa",
  53.     id: 22,
  54.     createTime: "1579509092433"
  55.   },
  56.   {
  57.     parentId: 22,
  58.     target: "_self",
  59.     open: false,
  60.     sort: 0,
  61.     disabled: false,
  62.     name: "5",
  63.     url: "/aklfdlsa",
  64.     id: 23,
  65.     createTime: "1579509094083"
  66.   },
  68.   {
  69.     parentId: null,
  70.     target: "_self",
  71.     open: false,
  72.     sort: 0,
  73.     disabled: false,
  74.     name: "5",
  75.     url: "/aklfdlsa",
  76.     id: 1000,
  77.     createTime: "1579509094083"
  78.   },
  80.   {
  81.     parentId: 1000,
  82.     target: "_self",
  83.     open: false,
  84.     sort: 0,
  85.     disabled: false,
  86.     name: "5",
  87.     url: "/aklfdlsa",
  88.     id: 1001,
  89.     createTime: "1579509094083"
  90.   },
  92.   {
  93.     parentId: 1000,
  94.     target: "_self",
  95.     open: false,
  96.     sort: 0,
  97.     disabled: false,
  98.     name: "5",
  99.     url: "/aklfdlsa",
  100.     id: 1002,
  101.     createTime: "1579509094083"
  102.   }
  103. ];
  105. function toTree(data, idName, parentIdName) {
  106.   const id = idName || "id";
  107.   const parentId = parentIdName || "parentId";
  109.   // 删除 所有 children,以防止多次调用
  110.   data.forEach(function(item) {
  111.     delete item.children;
  112.   });
  114.   // 将数据存储为 以 id 为 KEY 的 map 索引数据列
  115.   const map = {};
  116.   data.forEach(function(item) {
  117.     map[item[id]] = item;
  118.   });
  120.   const menu = [];
  121.   data.forEach(function(item) {
  122.     // 在map中找到当前项的父级菜单
  123.     const parent = map[item[parentId]];
  125.     if (parent) {
  126.       // 如果父级菜单存在，则将当前项存入父级的children
  127.       // 如果父级的children不存在，初始化为空数组[]后再存入
  128.       (parent.children || (parent.children = [])).push(item);
  129.     } else {
  130.       // 如果父级菜单不存在，则做为顶级菜单存入
  131.       menu.push(item);
  132.     }
  133.   });
  134.   return menu;
  135. }
  137. const menu = toTree(list);
  138. console.log(menu);
版权声明：本站文章除特别声明外，均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议，如需转载，请注明出处

© 2018 IMQIANDUAN.COM 粤ICP备18143223号