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

布满荆棘的人生 2022-10-13 15:56 185阅读 0赞

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) // 在函数体内调用本函数，直到循环退出
            }
          }
        }

欢迎大家留言~

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关 js遍历PHP的json数据

header('Location:'.$url); //Location和":"之间无空格,页面跳转 header('content-type:text/ht

逃离我推掉我的手/ 2023年10月06日 17:07/ 0 赞/ 58 阅读

相关 js怎样递归遍历树形菜单数据

递归就是调用自己比如 function fn() { fn() } 递归一般是用来处理不确定层级的树形数据比如想要获取树形菜单数

雨点打透心脏的1/2处/ 2023年08月17日 16:39/ 0 赞/ 140 阅读

相关 js数组从子级向父级遍历

大家开发的时候是不是会经常遇到这种需求，一个N个层级的数组，只有叶子级的数据有金额或者其他的信息，然后需求需要你把每个父级都加上汇总的数据集合。那么我们该怎么做呢？实战项

分手后的思念是犯贱/ 2023年06月13日 09:42/ 0 赞/ 24 阅读

相关 JS遍历JSON,获取所有key/value

I;m Shendi -------------------- 目录 JSONObject 已知键名获取获取所有key,value 遍历通过 keys 来遍历

Bertha 。/ 2022年12月29日 12:48/ 0 赞/ 195 阅读

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

1、遍历树形结构通过id，找到所有父级id。 //通过自己的id找到所以父级的id function findIndexArray(data, id, ind

布满荆棘的人生/ 2022年10月13日 15:56/ 0 赞/ 186 阅读

相关 vue elementui 树形权限勾选父级半联动

角色添加 <label>权限</label> <el-checkbox v-model="checkAll" @change="handleCheckAll

你的名字/ 2022年09月11日 13:28/ 0 赞/ 17 阅读

相关 js处理树形结构数据(查找父级节点)

原始数据： var treeData = [{ "id": 1135490, "username": "cowJun", "pas

野性酷女/ 2022年08月31日 05:58/ 0 赞/ 296 阅读

相关 JS获取节点的兄弟，父级，子级元素

先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行

秒速五厘米/ 2022年07月14日 09:55/ 0 赞/ 368 阅读

相关 JS 循环遍历JSON数据

JSON数据如：\{"options":"\[\{/"text/":/"王家湾/",/"value/":/"9/"\},\{/"text/":/"李家湾/",/"valu

朱雀/ 2022年04月24日 04:14/ 0 赞/ 441 阅读

相关 easyui combotree之选中子节点

$('#exp_eco_id').combotree({ data: data.data, ...

测试账号/ 2021年01月19日 14:43/ 0 赞/ 678 阅读