树形结构数据

通过id值查找该元素

  1.    var data = [
  2.     {
  3.       id: 1, name: "办公管理", pid: 0,
  4.       children: [
  5.         {
  6.           id: 2, name: "请假申请", pid: 1,
  7.           children: [
  8.             {id: 4, name: "请假记录", pid: 2}
  9.           ],
  10.         },
  11.         {id: 3, name: "出差申请", pid: 1}
  12.       ]
  13.     },
  14.     {
  15.       id: 5, name: "系统设置", pid: 0,
  16.       children: [
  17.         {
  18.           id: 6, name: "权限管理", pid: 5,
  19.           children: [
  20.             {id: 7, name: "用户角色", pid: 6},
  21.             {id: 8, name: "菜单设置", pid: 6}
  22.           ]
  23.         }
  24.       ]
  25.     },
  26.   ];

方法一：递归

  1.   /*
  2.    * @desc:这种递归方式，是先从内深入去执行，先从第一个元素，不断解刨children去寻找，
  3.    *       最后从最后一个开始向刚开始的方向去寻找
  4.    */
  5.   function getChidlren(id) {
  6.     let hasFound = false, // 表示是否有找到id值
  7.       result = null;
  8.     // 通过递归实现
  9.     let fn = function (data) {
  10.       if (Array.isArray(data) && !hasFound) { // 判断是否是数组并且没有的情况下，
  11.         data.forEach(item => {
  12.            if (item.id === id) { // 数据循环每个子项，并且判断子项下边是否有id值
  13.             result = item; // 返回的结果等于每一项
  14.             hasFound = true; // 并且找到id值
  15.           } else if (item.children) {
  16.             fn(item.children); // 递归调用下边的子项
  17.           }
  18.         })
  19.       }
  20.     }
  21.     fn(data); // 调用一下
  22.     return result;
  23.   }
  24.   console.log(getChidlren(3));

方法二：树状转扁平化(递归)、再利用find

  1. /*
  2.  * @输入参数 list: 需要扁平化的树形结构数组，默认按children字段扁平展开
  3.  * @输出：返回别扁平化的数组
  4.  */
  5. function platFn(list) {
  6.   let res = []
  7.   res = list.concat(...list.map(item => {
  8.     if (item.children instanceof Array && item.children.length > 0) {
  9.       return platFn(item.children)
  10.     }
  11.     return null
  12.   }).filter(o => o instanceof Array && o.length > 0))
  13.   return res
  14. }
  16. var platList= platFn(treeList)
  17. console.log(platList)
  18. /**
  19.  *@desc: find查找
  20.  *
  21.  */
  22. console.log('id: 32==>', platList.find(item => item.id == 32))

通过传入当前节点某个值(如id)，查询所有父级节点

返回一个由上到下的数组列表

  1. export function getParent(data2, nodeId2) {
  2.     var arrRes = [];
  3.     if (data2.length == 0) {
  4.         if (!!nodeId2) {
  5.             arrRes.unshift(data2)
  6.         }
  7.         return arrRes;
  8.     }
  9.     let rev = (data, nodeId) => {
  10.         for (var i = 0, length = data.length; i < length; i++) {
  11.             let node = data[i];
  12.             if (node.id == nodeId) {
  13.                 arrRes.unshift(node)
  14.                 // 查找到当前id,继续追随父级id
  15.                 rev(data2, node.pid); // 注意这里是传入的tree，不要写成data了，不然遍历的时候一直都是node.children,不是从最顶层开始遍历的
  16.                 break;
  17.             }
  18.             else { // 如果当前节点没有对应id,则追溯该子类是否有匹配项
  19.                 if (!!node.children) {
  20.                     rev(node.children, nodeId);
  21.                 }
  22.             }
  23.         }
  24.         return arrRes;
  25.     };
  26.     arrRes = rev(data2, nodeId2);
  27.     return arrRes;
  28. }

调用时，传入数据和当前节点code(数据为树型结构)
let newLevel = getParent(this.info, row.id)

通过递归json树根据子id查父id

  2. //传入参数：需要遍历的json，需要匹配的id
  3. findPnodeId(data,nodeId){
  4.         //设置结果
  5.     let result;
  6.     if (!data) {
  7.         return;//如果data传空，直接返回
  8.     }
  9.     for (var i = 0; i < data.children.length; i++) {
  10.         let item = data.children[i];
  11.         if (item.nodeId == nodeId) {
  12.             result=data.nodeId;
  13.                 //找到id相等的则返回父id
  14.             return result;
  15.         } else if (item.children && item.children.length > 0) {
  16.                 //如果有子集，则把子集作为参数重新执行本方法
  17.             result= findPnodeId(item, nodeId);
  18.                 //关键，千万不要直接return本方法，不然即使没有返回值也会将返回return，导致最外层循环中断，直接返回undefined,要有返回值才return才对
  19.             if(result){
  20.                 return result;
  21.             }
  22.         }
  23.     }
  24.         //如果执行循环中都没有return，则在此return
  25.     return result;
  26. }