js 树形结构根据id获取父级节点元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 树形结构根据id获取父级节点元素相关的知识,希望对你有一定的参考价值。

封装函数

// 传入 id、树形结构数据
export function getParentTree(id, tree) 
  let arr = [] //要返回的数组
  for (let i = 0; i < tree.length; i++) 
    let item = tree[i]
    arr = []
    arr.push(item) //保存当前节点id
    if (id== item.id) 
      //判断当前id是否是默认id
      return arr //是则退出循环、返回数据
     else 
      //否则进入下面判断,判断当前节点是否有子节点数据
      if (item.children && item.children.length > 0) 
        //合并子节点返回的数据
        arr = arr.concat(getParentTree(id, item.children ? item.children : []))
        console.log(arr)
        if (arr.map(item2 => (item2 ? item2.id : \'\')).includes(id)) 
          //如果当前数据中已包含默认节点,则退出循环、返回数据
          return arr
        
      
    
  

调用函数

const treeData = [
  name: \'1\',
  id: 1,
  children: [
    name: \'1-1\',
    id: 2,
    children: [
      name: \'1-1-1\',
      id: 4,
    ],
    name: \'1-2\',
    id: 3,
    children: [
      name: \'1-2-1\',
      id: 5,
    ],
  ]
,
  name: \'2\',
  id: 6,
  children: [
    name: \'2-1\',
    id: 7,
    children: [
      name: \'2-1-1\',
      id: 9,
    ],
    name: \'2-2\',
    id: 8,
    children: [
      name: \'2-2-1\',
      id: 10,
    ],
  ]
]
console.log(getParentTree(5, treeData))

树形结构拍平获取所有节点

打开收藏夹发现还有18年未完成的文章,
粗略看了下发现竟然还能看懂,
目的是把一个树形结构拍平获取所有的节点。

获取树形结构的所有节点

let tree = {
    "id": 1,
    "label": "一级 1",
    "children": [{
        "id": 3,
        "label": "二级 2-1",
        "children": [{
            "id": 4,
            "label": "三级 3-1-1"
        }, {
            "id": 5,
            "label": "三级 3-1-2",
            "disabled": true
        }]
    }, {
        "id": 2,
        "label": "二级 2-2",
        "disabled": true,
        "children": [{
            "id": 6,
            "label": "三级 3-2-1"
        }, {
            "id": 7,
            "label": "三级 3-2-2",
            "disabled": true
        }]
    }]
}
/**
 * 把树形结构拍平获取所有节点
 * @method   getNode
 * @param    {Object}                node 要拍平结构的树对象
 * @return   {Array}                      拍平后的节点数组,不包含节点的子节点信息
 * @author 朱阳星
 * @email  zhuyangxing@foxmail.com
 * @datetime 2018-04-01T16:42:52+080
 */
function getNode(node) {
    let result = []
    let _getNode = function (node) {
        let tmp =JSON.parse(JSON.stringify(node))
        delete tmp.children
        result.push(tmp) //移除拍平数组的子元素,只保留节点相关元素
        let child = node.children
        if (child != undefined && child.length > 0) {
            child.forEach(ele=>{
                arguments.callee(ele)
            })
        }
    }
    _getNode(node)
    _getNode=null
    return result
}
let result = getNode(tree)
console.log(result)
// 返回结果如下
[
  { id: 1, label: \'一级 1\' },
  { id: 3, label: \'二级 2-1\' },
  { id: 4, label: \'三级 3-1-1\' },
  { id: 5, label: \'三级 3-1-2\', disabled: true },
  { id: 2, label: \'二级 2-2\', disabled: true },
  { id: 6, label: \'三级 3-2-1\' },
  { id: 7, label: \'三级 3-2-2\', disabled: true }
]

以上是关于js 树形结构根据id获取父级节点元素的主要内容,如果未能解决你的问题,请参考以下文章

递归方法:对于树形结构的表,根据当前数据获取无限极的父级名称

DOM

Java返回树形结构的数据 (children方式)

MySQL查询父节点下面的所有子孙节点,查询用户列表时多级(公司)部门处理,根据反射,递归树形结构工具类

MySQL查询父节点下面的所有子孙节点,查询用户列表时多级(公司)部门处理,根据反射,递归树形结构工具类

JS根据子节点递归获取所有父节点的集合