zoukankan      html  css  js  c++  java
  • 针对性的遍历tree数据,获取所需要的内容(获取id数组、id对应的层级数组、来获取当前的对象)

    目的:针对性的遍历tree数据,获取所需要的内容

     1 /**
     2 * 功能:级联选择器,后台一般只返回最后一级的id和整个树结构,前台页面回显内容时,需要根据最后一级的id,遍历树结构得到相应的id数组
     3 * 函数名:getTreeDeepArr
     4 * 参数:value--是比较值;treeData--完整的树表;key--value对应的属性名
     5 */
     6 function baseGetTreeDeepArr(value, treeData, key) {
     7   let arr = [] // 在递归时操作的数组
     8   let returnArr = [] // 存放结果的数组
     9   let depth = 0 // 定义全局层级
    10   // 定义递归函数
    11   function childrenEach(childrenData, depthN) {
    12     for (var j = 0; j < childrenData.length; j++) {
    13       depth = depthN // 将执行的层级赋值 到 全局层级
    14       arr[depthN] = (childrenData[j][key])
    15 
    16       if (childrenData[j][key] == value) {
    17         // returnArr = arr; // 原写法不行, 因 此赋值存在指针关系
    18         returnArr = arr.slice(0, depthN + 1) // 将目前匹配的数组,截断并保存到结果数组,
    19         break
    20       } else {
    21         if (childrenData[j].children) {
    22           depth++
    23           childrenEach(childrenData[j].children, depth)
    24         }
    25       }
    26     }
    27     return returnArr
    28   }
    29   return childrenEach(treeData, depth)
    30 }
    31 
    32 /**
    33 * 功能:级联选择器,取当前选中id对应的文字,得到的是当前选中的id的数组,对应的层级数组
    34 * 函数名:getArrCascaderObj
    35 * 参数:arr--是id数组;treeData--完整的树表;key--是对比的字段名
    36 */
    37 function baseGetArrCascaderObj(arr, treeData, key) {
    38   return arr.map(function (value, index, array) {
    39     // console.log(value)
    40     for (var itm of treeData) {
    41       if (itm[key] == value) { treeData = itm.children; return itm }
    42     }
    43     return null
    44   })
    45 }
    46 
    47 /**
    48 * 功能:在级联选择器,利用某个值不会重复的字段,来获取当前的对象,例如利用ID,获取
    49 * 参数:value要对比的值;treeData级联对象;key要对比的关键字
    50 * */
    51 function baseGetCascaderObj(value, treeData, key) {
    52   let opath = null
    53   for (var i in treeData) {
    54     if (value === treeData[i][key]) {
    55       opath = treeData[i]
    56       break
    57     } else if (treeData[i].children && treeData[i].children.length) {
    58       opath = baseGetCascaderObj(value, treeData[i].children, key)
    59     }
    60     // 中断循环
    61     if (opath) {
    62       break
    63     }
    64   }
    65   return opath
    66 }

     哈哈~~~最近有个同事问我一个关于tree属性修改的问题~~~没有想到直接修改tree属性的解决方法...2333...但是想到一种通过深拷贝的方式来克隆一份,再重新赋值的方法:

    注意:本方法具有很大的受限性(必须要已知tree结构、属性,根据个人需要修改内容)

    // 新数据
    let newTreeData = []
    // 旧数据
    let treeData = [{
      companyName: 'Node0',
      companyId: '0--0',
      level: 1,
      sum: 2,
      addr: '123',
      child: [{
        companyName: 'Node1',
        companyId: '0-0',
        level: 1,
        sum: 2,
        addr: '123',
        child: [
          {
            companyName: 'Child Node1',
            companyId: '0-0-0',
            level: 1,
            sum: 2,
            addr: '123',
          },
        ],
      }, {
        companyName: 'Node2',
        companyId: '0-1',
        level: 1,
        sum: 2,
        addr: '123',
        child: [
          {
            companyName: 'Child Node3',
            companyId: '0-1-0',
            level: 1,
            sum: 2,
            addr: '123',
          },
          {
            companyName: 'Child Node4',
            companyId: '0-1-1',
            level: 1,
            sum: 2,
            addr: '123',
          },
        ],
      }]
    }]
    
    /**
     * FIXME:该函数只用于简单深拷贝tree数据--必须已知tree的结构和具有的属性--可重新根据个人需要修改属性
     * param1: treeData标识旧数据
     * param2:newTreeData标识新数据,必须是外部传入的数组引用,这样就可以用来保存新的tree数据了
     * **/
    export function mapTreeData(treeData, newTreeData) {
      if (!treeData) {
        return
      }
    
      for (let key in treeData) {
        let od = {}
        let ot = treeData[key]
        if (!ot) {
          return null
        }
    
        od = {
          name: ot.companyName,
          key: ot.companyId,
          value: ot.companyId,
          children: []
        }
    
        newTreeData.push(od)
        let len = newTreeData.length - 1
    
        if (ot.child && ot.child.length) {
          mapTreeData(ot.child, newTreeData[len].children)
        }
      }
    }
    
    // 测试调用
    mapTreeData(treeData, newTreeData)
    // 打印数据
    console.log('treeData, newTreeData', treeData, newTreeData)

  • 相关阅读:
    (三)RabbitMQ:客户端开发向导
    (二)RabbitMQ:RabbitMQ相关概念介绍
    (一)RabbitMQ:RabbitMQ初体验
    支付宝手机网站支付接入(沙箱环境)
    vue-cli3.0 的使用
    Windows平台上好用的SSH客户端
    JWT
    cnetos 安装nginx后查找nginx配置文件路径
    centos搭建nginx服务,给某个目录及子目录nginx的读取权限
    windows下mysqldump.exe、mysql.exe导出mysql数据到sql文件
  • 原文地址:https://www.cnblogs.com/zkpThink/p/12880506.html
Copyright © 2011-2022 走看看