首页 > 其他 > 详细

react antDesign tree树 数据的处理

时间:2020-11-04 16:16:24      阅读:33      评论:0      收藏:0      [点我收藏+]
    const toTree = function(tarArray) {
      var obj = {};
      tarArray.map((item, index) => {
        obj[item.departId] = item;
      });
      let resDefault = [];
      for (var i = 0; i < tarArray.length; i++) {
        var item = tarArray[i];
        var parent = obj[item.parentId];
        // console.log("parent")
        // console.log(parent)
        if (parent) {
          if (parent.children) {
            parent.children.push(item);
          } else {
            parent.children = [];
            parent.children.push(item);
          }
        } else {
          resDefault.push(item);
        }
      }
      return resDefault;
    };

    // const toTree = function(list) {
    //   let resDefault = [];
    //   // 给每个数据加children属性
    //   list.forEach(one => {
    //     one.children = [];
    //   });
    //   list.forEach(one => {
    //     let findIndex = list.findIndex(item => {
    //       return item.departId === one.parentId;
    //     });
    //     if ((!one.parentId && one.parentId !== 0 && one.parentId !== false) || findIndex === -1) {
    //       resDefault.push(one);
    //     } else {
    //       list[findIndex].children.push(one);
    //     }
    //   });
    //   return resDefault;
    // };

    // const toTree = function fnSetTreeData(data) {
    //   var data = [...data];
    //   var tree = data.filter(father => {
    //     var branchArr = data.filter(child => {
    //       if (father.departId == child.parentId) child._hasParent = true;
    //       return father.departId == child.parentId;

    //       // MARK 为什么这样写就报错 ?
    //       // if (father.departId == child.parentId) child._hasParent = true;
    //       // return child._hasParent
    //     });
    //     if (branchArr.length > 0) father.children = branchArr;
    //     return !father._hasParent;
    //   });

    //   // MARK 为什么在这里还得加一个过滤
    //   tree = tree.filter(item => {
    //     return !item._hasParent;
    //   });
    //   return tree;
    // };

    // const toTree = function filterArray(data, parent) {
    //   let vm = this;
    //   var resDefault = [];
    //   var temp;
    //   for (var i = 0; i < data.length; i++) {
    //     if (data[i].parentId == parent) {
    //       var obj = data[i];
    //       temp = filterArray(data, data[i].departId);
    //       if (temp.length > 0) {
    //         obj.children = temp;
    //       }
    //       resDefault.push(obj);
    //     }
    //   }
    //   return resDefault;
    // };
    let partTree = toTree(partArr) || [];

    console.log("partTree")
    console.log(partTree)
    // partTree.forEach(element => {
    //   if (element.key == element.parentId) {
    //   }
    // });
    // 通过递归调用一步步更新格式 再删除之前的格式 有需要的可以参考下
    // const changeData = data => {
    //   // let jsonObj = data;
    //   data.forEach(function(item) {
    //     item.departName && (item.title = item.departName);
    //     item.departId && (item.key = item.departId);
    //     delete item.departName;
    //     delete item.departId;
    //     if (item.children && Array.isArray(item.children)) {
    //       item.children = changeData(item.children);
    //     }
    //   });
    //   return data;
    // };
    // let treeList = changeData(partTree);
    // let treeList  = JSON.parse(JSON.stringify(partTree).replace(/departId/g, ‘key‘).replace(/departName/g, ‘title‘))
    // 因为之前有key,所以先把key替换成别的名字,再把departId替换成key
    let treeList  = JSON.parse(JSON.stringify(partTree).replace(/departName/g, ‘title‘).replace(/key/g, ‘id‘).replace(/departId/g, ‘key‘))
    console.log("treeList")
    console.log(treeList)
技术分享图片后台返回的数据格式
let dataArr = {
  errcode: 0,
  errmsg: "ok",
  department: [
    { id: 8830191, name: "总经理办公室", parentid: 1, order: 2138653474 },
    { id: 8830194, name: "财务部", parentid: 1, order: 2138653452 },
    { id: 8830196, name: "行政部", parentid: 1, order: 2138653462 },
    { id: 8830201, name: "证券事务部", parentid: 1, order: 2138653451 },
    { id: 8832447, name: "人力资源部", parentid: 1, order: 2138653450 },
    { id: 8830190, name: "客服中心", parentid: 1, order: 2138653469 },
    { id: 9739831, name: "国际部", parentid: 1, order: 2138653447 },
    { id: 8830180, name: "研发中心", parentid: 1, order: 2138653464 },
    { id: 8830198, name: "商务部", parentid: 1, order: 2138653461 },
    { id: 8830192, name: "物料采购部", parentid: 1, order: 2138653456 },
    { id: 9412256, name: "产品中心", parentid: 1, order: 2138653455 },
    { id: 8830187, name: "销售中心", parentid: 1, order: 2138653463 },
    { id: 1495021031, name: "环保事业部", parentid: 1, order: 2137743817 },
    { id: 1495023123, name: "智能网联事业部", parentid: 1, order: 652463113 },
    { id: 1495024195, name: "新技术研究院", parentid: 1, order: 652461575 },
    { id: 1495025407, name: "软件产品部", parentid: 8830180, order: 652458241 },
    {
      id: 1495025408,
      name: "产品研发组",
      parentid: 1495025407,
      order: 652458240,
    },
    { id: 1495025409, name: "测试组", parentid: 1495025407, order: 652458239 },
    {
      id: 1495025410,
      name: "定制开发组",
      parentid: 1495025407,
      order: 652458238,
    },
    {
      id: 1495025411,
      name: "技术支持组",
      parentid: 1495025407,
      order: 652458237,
    },
    { id: 1495025412, name: "电气部", parentid: 8830180, order: 652458236 },
    { id: 1495025419, name: "测试部", parentid: 8830180, order: 652458228 },
    { id: 1495025420, name: "机械部", parentid: 8830180, order: 652458229 },
    { id: 1495025421, name: "开发组", parentid: 1495025420, order: 652458227 },
    { id: 1495025422, name: "支持组", parentid: 1495025420, order: 652458226 },
    { id: 1495025425, name: "市场部", parentid: 1, order: 2138653454 },
    {
      id: 1495025430,
      name: "智能网联事业部市场部",
      parentid: 1495023123,
      order: 652458218,
    },
    {
      id: 1495025431,
      name: "智能网联事业部产品部",
      parentid: 1495023123,
      order: 652457674,
    },
    { id: 1495025485, name: "云产品部", parentid: 1, order: 2138653449 },
    { id: 1495025968, name: "安迅伟业", parentid: 1, order: 652458162 },
    {
      id: 1495025974,
      name: "智能网联事业部技术支持部",
      parentid: 1495023123,
      order: 652458217,
    },
    {
      id: 1495025975,
      name: "智能网联事业部研发部",
      parentid: 1495023123,
      order: 652457673,
    },
    { id: 1495025976, name: "工艺组", parentid: 1495025420, order: 652457672 },
    {
      id: 1495025980,
      name: "客户服务部",
      parentid: 1495021031,
      order: 652457668,
    },
    {
      id: 1495026190,
      name: "云产品研发部",
      parentid: 1495025485,
      order: 652457457,
    },
    {
      id: 1495026191,
      name: "车服产品部",
      parentid: 1495025485,
      order: 652457458,
    },
    { id: 1495026200, name: "产品事业群", parentid: 1, order: 2138653472 },
    { id: 1495026201, name: "支持部", parentid: 1495026200, order: 652457447 },
    {
      id: 1495026202,
      name: "驾考事业部",
      parentid: 1495026200,
      order: 652457446,
    },
    {
      id: 1495026203,
      name: "检测事业部",
      parentid: 1495026200,
      order: 652457445,
    },
    {
      id: 1495026204,
      name: "整车厂事业部",
      parentid: 1495026200,
      order: 652457444,
    },
    {
      id: 1495026205,
      name: "环保事业部",
      parentid: 1495026200,
      order: 652457443,
    },
    {
      id: 1495026206,
      name: "驾考事业部软件部",
      parentid: 1495026202,
      order: 652457442,
    },
    {
      id: 1495026207,
      name: "驾考事业部项目部",
      parentid: 1495026202,
      order: 652457441,
    },
    { id: 1495026208, name: "事业部", parentid: 1495026202, order: 652457440 },
    {
      id: 1495026209,
      name: "检测事业部研发中心",
      parentid: 1495026203,
      order: 652457439,
    },
    {
      id: 1495026210,
      name: "检测事业部运营中心",
      parentid: 1495026203,
      order: 652457438,
    },
    {
      id: 1495026211,
      name: "环保事业部技术部",
      parentid: 1495026205,
      order: 652457437,
    },
    {
      id: 1495026212,
      name: "环保事业部客户服务部",
      parentid: 1495026205,
      order: 652457436,
    },
    {
      id: 1495026213,
      name: "环保事业部市场部",
      parentid: 1495026205,
      order: 652457435,
    },
    {
      id: 1495026214,
      name: "环保事业部投招标部",
      parentid: 1495026205,
      order: 652457434,
    },
    { id: 1495026216, name: "成都综合办事处", parentid: 1, order: 2138653473 },
    { id: 1495026222, name: "云南办", parentid: 8830190, order: 652457426 },
    { id: 1495026223, name: "兰州办", parentid: 8830190, order: 652457425 },
    { id: 1495026224, name: "华中办", parentid: 8830190, order: 652457424 },
    { id: 1495026225, name: "华北办", parentid: 8830190, order: 652457423 },
    { id: 1495026226, name: "华南办", parentid: 8830190, order: 652457422 },
    { id: 1495026227, name: "南京办", parentid: 8830190, order: 652457421 },
    { id: 1495026228, name: "哈尔滨办", parentid: 8830190, order: 652457420 },
    { id: 1495026229, name: "山东办", parentid: 8830190, order: 652457419 },
    { id: 1495026231, name: "沈阳办", parentid: 8830190, order: 652457417 },
    { id: 1495026232, name: "河南办", parentid: 8830190, order: 652457416 },
    { id: 1495026233, name: "西安办", parentid: 8830190, order: 652457415 },
    { id: 1495026234, name: "贵阳办", parentid: 8830190, order: 652457414 },
    { id: 1495026235, name: "重庆办", parentid: 8830190, order: 652457413 },
    { id: 1495026236, name: "长沙办", parentid: 8830190, order: 652457412 },
    { id: 1495026237, name: "内蒙办", parentid: 8830190, order: 652457411 },
    {
      id: 1495026973,
      name: "开发一部",
      parentid: 1495026209,
      order: 652456675,
    },
    {
      id: 1495026974,
      name: "开发二部",
      parentid: 1495026209,
      order: 652456674,
    },
    {
      id: 1495026975,
      name: "开发三部",
      parentid: 1495026209,
      order: 652456673,
    },
    { id: 1495027474, name: "产品组", parentid: 1495025407, order: 652456174 },
    { id: 1495027484, name: "重庆市", parentid: 8830187, order: 652455873 },
    { id: 1495027485, name: "四川省", parentid: 8830187, order: 652456163 },
    { id: 1495027486, name: "贵州省", parentid: 8830187, order: 652456162 },
    { id: 1495027487, name: "广东省", parentid: 8830187, order: 652456161 },
    { id: 1495027488, name: "福建省", parentid: 8830187, order: 652456160 },
    {
      id: 1495027489,
      name: "内蒙古自治区",
      parentid: 8830187,
      order: 652455869,
    },
    { id: 1495027490, name: "广西省", parentid: 8830187, order: 652456158 },
    { id: 1495027491, name: "海南省", parentid: 8830187, order: 652456157 },
    { id: 1495027492, name: "江苏省", parentid: 8830187, order: 652456156 },
    { id: 1495027493, name: "安徽省", parentid: 8830187, order: 652456155 },
    { id: 1495027494, name: "河南省", parentid: 8830187, order: 652456154 },
    { id: 1495027495, name: "甘肃省", parentid: 8830187, order: 652456153 },
    { id: 1495027496, name: "新疆自治区", parentid: 8830187, order: 652455871 },
    { id: 1495027497, name: "辽宁省", parentid: 8830187, order: 652456151 },
    { id: 1495027498, name: "黑龙江省", parentid: 8830187, order: 652456150 },
    { id: 1495027499, name: "山西省", parentid: 8830187, order: 652456149 },
    { id: 1495027500, name: "湖北省", parentid: 8830187, order: 652456148 },
    { id: 1495027501, name: "云南省", parentid: 8830187, order: 652456147 },
    { id: 1495027502, name: "江西省", parentid: 8830187, order: 652456146 },
    { id: 1495027503, name: "湖南省", parentid: 8830187, order: 652456145 },
    { id: 1495027504, name: "河北省", parentid: 8830187, order: 652456144 },
    { id: 1495027505, name: "山东省", parentid: 8830187, order: 652456143 },
    { id: 1495027506, name: "吉林省", parentid: 8830187, order: 652456142 },
    { id: 1495027773, name: "天津市", parentid: 8830187, order: 652455875 },
    { id: 1495027774, name: "西藏自治区", parentid: 8830187, order: 652455872 },
    { id: 1495027775, name: "宁夏自治区", parentid: 8830187, order: 652455870 },
    { id: 1495027776, name: "北京市", parentid: 8830187, order: 652455873 },
    { id: 1495027777, name: "上海市", parentid: 8830187, order: 652455874 },
  ],
};

 

react antDesign tree树 数据的处理

原文:https://www.cnblogs.com/lzhflzjx/p/13926217.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!