扁平结构数据转换成层级嵌套树形数据


前言

树形控件在OA系统内是很常见的,如依赖jquery的ztree,elementui的el-tree,其中ztree是支持扁平结构和层级结构的,el-tree是只支持层级结构,后台一般查完数据库不处理数据的话,都是返回扁平数据,即通过id、pid判断父子关系,但在el-tree中使用就需要前台处理了,如果不想处理,也可以要求后台返回要求的格式,重在沟通。


一、转换方法

1.递归

function treeData(data, pid="0") {
    let arr = []
    arr.forEach(item => {
        if (item.pid === pid) {
            item.children = treeData(data, item.id)
            arr.push(item)
        };
    })
    return arr
}

2.双层filter

function handleTree(data, id, parentId, children, rootId) {
  id = id || 'id'
  parentId = parentId || 'parentId'
  children = children || 'children'
  rootId = rootId || 0
  // 对源数据深度克隆
  const cloneData = JSON.parse(JSON.stringify(data))
  // 循环所有项
  const treeData = cloneData.filter(father => {
    const branchArr = cloneData.filter(child => {
      // 返回每一项的子级数组
      return father[id] === child[parentId]
    })
    branchArr.length > 0 ? father.children = branchArr : ''
    // 返回第一层
    return father[parentId] === rootId
  })
  return treeData !== '' ? treeData : data
}

总结

  • 递归方法虽然代码量少,但是对扁平数据也是有要求的,父级要在子集前,数据必须按父子顺序返回,如果按子父顺序返回则会产生bug
  • 双层filter方法虽然代码行数较多,但因为其对数据顺序无要求,所以推荐使用此方法
    在这里插入图片描述
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值