list转Tree和手动过滤TreeNode

陆仁丶

已于 2023-02-02 09:21:43 修改

阅读量505

点赞数

分类专栏：前端文章标签： javascript 前端 typescript

于 2022-10-17 11:49:51 首次发布

本文链接：https://blog.csdn.net/kk12138123/article/details/127360605

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

本文介绍了如何将数组转换为树形结构，并提供了JavaScript实现的详细步骤。首先，通过递归遍历数组，查找具有指定父节点的角色，构建树结构。然后，展示了如何根据特定字段过滤树节点，保留包含指定值的节点。这两个方法对于组织和筛选层级数据非常有用，适用于各种数据管理场景。

摘要由CSDN通过智能技术生成

一、list转Tree

/**数组转树*/
//list：需要进行转换得list; root:根节点id
const transListDataToTreeData = (list: any, root: any) => {
  const arr: any = [];
  // 1.遍历
  list.forEach((item: any) => {
    // 2.首次传入空字符串  判断list的pid是否为空 如果为空就是一级节点
    if (item.parentRoleCode === root) {
      // 找到之后就要去找item下面有没有子节点  以 item.id 作为 父 id, 接着往下找
      const children = transListDataToTreeData(list, item.roleCode);
      if (children.length > 0) {
        // 如果children的长度大于0,说明找到了子节点
        item.children = children;
      }
      // 将item项, 追加到arr数组中
      arr.push(item);
    }
  });
  return arr;
};

//测试数据
const list=[{"id":"101223","createUser":"xiang","updateUser":null,"createDate":"2020-09-15 14:01:16","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"00010501","roleName":"住院护士","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"000105","inputPy":"ZYHS","mnemonicCode":"00010501"},{"id":"101208","createUser":"uuuadmin","updateUser":null,"createDate":"2020-09-12 13:01:46","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000102","roleName":"机关人员角色","roleTypeCode":"GROUP","isGroup":0,"parentRoleCode":"0001","inputPy":"JGRYJS","mnemonicCode":"000102"},{"id":"101209","createUser":"uuuadmin","updateUser":null,"createDate":"2020-09-12 13:02:05","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"00010201","roleName":"管理员","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"000102","inputPy":"GLY","mnemonicCode":"00010201"},{"id":"101210","createUser":"xiang","updateUser":null,"createDate":"2020-09-12 14:36:39","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000103","roleName":"住院医生","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"0001","inputPy":"ZYYS","mnemonicCode":"000103"},{"id":"101211","createUser":"xiang","updateUser":null,"createDate":"2020-09-12 14:36:50","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000104","roleName":"门诊医生","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"0001","inputPy":"MZYS","mnemonicCode":"000104"},{"id":"101461","createUser":"009999","updateUser":null,"createDate":"2021-12-02 16:51:10","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000119","roleName":"住院护士","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"0001","inputPy":"ZYHS","mnemonicCode":"000119"},{"id":"101382","createUser":"A0017","updateUser":null,"createDate":"2021-02-03 15:04:59","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000114","roleName":"报表查看","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"0001","inputPy":"BBCK","mnemonicCode":"000114"},{"id":"101446","createUser":"009999","updateUser":null,"createDate":"2021-09-23 15:00:57","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000118","roleName":"药剂科","roleTypeCode":"GROUP","isGroup":0,"parentRoleCode":"0001","inputPy":"YJK","mnemonicCode":"000118"},{"id":"101447","createUser":"009999","updateUser":null,"createDate":"2021-09-23 15:02:28","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"00011801","roleName":"药剂科主任","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"000118","inputPy":"YJKZR","mnemonicCode":"00011801"},{"id":"101442","createUser":"009999","updateUser":null,"createDate":"2021-09-13 11:04:16","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000115","roleName":"门诊护士","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"0001","inputPy":"MZHS","mnemonicCode":"000115"},{"id":"101443","createUser":"009999","updateUser":null,"createDate":"2021-09-13 12:06:06","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000116","roleName":"药库药房","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"0001","inputPy":"YKYF","mnemonicCode":"000116"},{"id":"101465","createUser":"009999","updateUser":null,"createDate":"2021-12-03 15:06:33","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000121","roleName":"住院登记处","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"0001","inputPy":"ZYDJC","mnemonicCode":"000121"},{"id":"101462","createUser":"009999","updateUser":null,"createDate":"2021-12-02 17:11:48","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000120","roleName":"住院护士长","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"0001","inputPy":"ZYHSZ","mnemonicCode":"000120"},{"id":"101463","createUser":"009999","updateUser":null,"createDate":"2021-12-02 17:37:01","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"00011802","roleName":"药房","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"000118","inputPy":"YF","mnemonicCode":"00011802"},{"id":"101444","createUser":"009999","updateUser":null,"createDate":"2021-09-14 09:51:50","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000117","roleName":"财务部","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"0001","inputPy":"CWB","mnemonicCode":"000117"},{"id":"101481","createUser":"000001","updateUser":null,"createDate":"2021-12-23 10:40:50","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"00011803","roleName":"S药库","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"000118","inputPy":"SYK","mnemonicCode":"00011803"},{"id":"101482","createUser":"000001","updateUser":null,"createDate":"2021-12-23 10:42:37","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"00011804","roleName":"S药房","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"000118","inputPy":"SYF","mnemonicCode":"00011804"},{"id":"101501","createUser":"yuxu","updateUser":null,"createDate":"2022-02-17 09:46:33","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000122","roleName":"物价局","roleTypeCode":"GROUP","isGroup":0,"parentRoleCode":"0001","inputPy":"WJJ","mnemonicCode":"000122"},{"id":"101541","createUser":"009999","updateUser":null,"createDate":"2022-03-22 16:58:47","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000123","roleName":"报卡权限","roleTypeCode":"GROUP","isGroup":0,"parentRoleCode":"0001","inputPy":"BKQX","mnemonicCode":"000123"},{"id":"101542","createUser":"009999","updateUser":null,"createDate":"2022-03-22 16:59:16","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"00012301","roleName":"质管","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"000123","inputPy":"ZG","mnemonicCode":"00012301"},{"id":"101543","createUser":"009999","updateUser":null,"createDate":"2022-03-22 17:00:02","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"00012302","roleName":"审核","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"000123","inputPy":"SH","mnemonicCode":"00012302"},{"id":"101561","createUser":"009999","updateUser":null,"createDate":"2022-03-24 13:26:51","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"000124","roleName":"我的","roleTypeCode":"GROUP","isGroup":0,"parentRoleCode":"0001","inputPy":"WD","mnemonicCode":"000124"},{"id":"101562","createUser":"009999","updateUser":null,"createDate":"2022-03-24 13:26:58","lastUpdateDate":null,"statusCode":"ACTIVE","statusName":"有效","roleCode":"00012401","roleName":"我的管理","roleTypeCode":"ITEM","isGroup":0,"parentRoleCode":"000124","inputPy":"WDGL","mnemonicCode":"00012401"}]

//方法调用
transListDataToTreeData(list,'0001')

二、手动过滤TreeNode

//根据value过滤树节点
//arr：需要过滤得tree; key:需要过滤得字段;val:要过滤得值
const onRecursionData = (arr: any, key: any, val: any) => {
  let newarr: any = [];
  arr.forEach((item: any) => {
    if (item.children && item.children.length) {
      let children = onRecursionData(item.children, key, val);
      let obj = {
        ...item,
        children,
      };
      if (children && children.length) {
        newarr.push(obj);
      } else if (item[key].includes(val)) {
        newarr.push({ ...item });
      }
    } else {
      if (item[key].includes(val)) {
        newarr.push(item);
      }
    }
  });
  return newarr;
};
//方法调用
//用第一步转换得Tree数据测试即可
 roleCurrectTableData= onRecursionData(transListDataToTreeData(list,'0001'),"roleName",filterText);

List转Tree方法2

    const listToTree = (oldArr) => {
        let result = oldArr.map(o => {
            return {
                title: o.code,
                key: o.id,
                ...o
            }
        });
        result.forEach(element => {
            let fatherId = element.fatherId;
            if (typeof (fatherId) !== "undefined") {
                result.forEach(ele => {
                    if (ele.id === fatherId) { //当内层循环的ID== 外层循环的parendId时，（说明有children），需要往该内层id里建个children并push对应的数组；
                        if (!ele.children) {
                            ele.children = [];
                        }
                        ele.children.push(element);
                    }
                });
            }
        });

        result = result.filter(ele => typeof (ele.fatherId) === "undefined" || ele.fatherId === null);
        return result;
    }