js 树形json数据返回父级和遍历获取所以选中子节点

1、遍历树形结构通过id,找到所有父级id。

//通过自己的id找到所以父级的id
function findIndexArray(data, id, indexArray) {
	//设置数组arr 存放父级id
     let arr = Array.from(indexArray)
     //遍历data数据
     for (let i = 0, len = data.length; i < len; i++) {
     //把当前层的pid 存到数字中
         arr.push(data[i].pid)
         if (data[i].id === id) {
         // 循环结束,返回所有id的数组集合
             return arr
         }
         
         let children = data[i].children
         //继续循环
         if (children && children.length) {
             let result = findIndexArray(children, id, arr)
             if (result) return result
         }
         // 当前层的pid 不是指定的父级pid 移除掉
         arr.pop()
     }
     return false
 }
// 递归循环树中哪些节点已被选中
var checkIds=[]
    recursiveFilter (arr) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].isSelect) {
          checkIds.push(arr[i].id)
        }
        if (arr[i].children && arr[i].children.length) {
          this.recursiveFilter(arr[i].children) // 在函数体内调用本函数,直到循环退出
        }
      }
    }

下面看完整代码:

  const data = [{
          id: 11,
          pid: 'a1',
          text: 11,
          isSelect:false,
          children: [{
                  id: 21,
                  pid: 'b1',
                  text: 21,
                  isSelect:false,
                  children: [{
                          id: 31,
                          pid: 'c1',
                          text: 31,
                          isSelect:false,
                          children: [{
                                  id: 41,
                                  pid: 'd1',
                                  text: 41,
                                  isSelect:false,
                                  children: []
                              },
                              {
                                  id: 42,
                                  pid: 'd2',
                                  text: 42,
                                  isSelect:false,
                                  children: []
                              }
                          ]
                      },
                      {
                          id: 32,
                          pid: 'c2',
                          text: 32,
                          isSelect:true,
                          children: []
                      }
                  ]
              },
              {
                  id: 22,
                  pid: 'b2',
                  text: 22,
                  isSelect:false,
                  children: []
              }
          ]
      },
      {
          id: 12,
          pid: 'a2',
          text: 12,
          isSelect:false,
          children: []
      }
  ]
//通过自己的id找到所以父级的id
function findIndexArray(data, id, indexArray) {
	//设置数字arr 存放父级id
     let arr = Array.from(indexArray)
     for (let i = 0, len = data.length; i < len; i++) {
         arr.push(data[i].pid)
         if (data[i].id === id) {
             return arr
         }
         let children = data[i].children
         if (children && children.length) {
             let result = findIndexArray(children, id, arr)
             if (result) return result
         }
         arr.pop()
     }
     return false
 }
 console.log(findIndexArray(data, 42, [])) // ["a1", "b1", "c1", "d2"]


// 递归循环树中哪些节点已被选中
var checkIds=[]
    recursiveFilter (arr) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].isSelect) {
          checkIds.push(arr[i].id)
        }
        if (arr[i].children && arr[i].children.length) {
          this.recursiveFilter(arr[i].children) // 在函数体内调用本函数,直到循环退出
        }
      }
    }

欢迎大家留言~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值