• home > webfront > ECMAS > javascript >

    树形结构已知子节点获取子节点所有父节点——任意目录/树

    Author:zhoulujun Date:

    JS树结构操作:查找、遍历、筛选、树和列表相互转这些还是功能代码还是好找的。但是给定一个子结点,如何查找其所有的父节(比如返回结点id数组,下面我给一个通用的函数给大家用

    JS 树形结构 根据子节点找到所有上级,比如element-tree,已知路由上的子结点id,如何回填的 展开目录树?

    树的查找与遍历都非常简单,具体可以查看我之前写的:《讲透学烂二叉树(三):二叉树的遍历图解算法步骤及JS代码

    或者:JS树结构操作:查找、遍历、筛选、树和列表相互转换 https://wintc.top/article/20

    但是 如何根据子结点找所有父节点的目录的呢?之前的遍历与查找的代码并不能解决这个问题,这里我单独给出一段代码:

    export default function findParents(arr, id, findProps = 'id', childProps = 'children') {
      const stock = [];
      let going = true;
      function recursion(arr, id, findProps, childProps) {
        arr.forEach((item) => {
          if (!going) return;
          stock.push(item[findProps]);
          if (item[findProps] === id) {
            going = false;
          } else if (item[childProps]) {
            recursion(item[childProps], id, findProps, childProps);
          } else {
            stock.pop();
          }
        });
        if (going)  stock.pop();
      }
      recursion(arr, id, findProps, childProps);
      return stock;
    }

    比如:

    function findParents(arr, id, findProps = 'id', childProps = 'children') {
      const stock = [];
      let going = true;
      function recursion(arr, id, findProps, childProps) {
        arr.forEach((item) => {
          if (!going) return;
          stock.push(item[findProps]);
          if (item[findProps] === id) {
            going = false;
          } else if (item[childProps]) {
            recursion(item[childProps], id, findProps, childProps);
          } else {
            stock.pop();
          }
        });
        if (going)  stock.pop();
      }
      recursion(arr, id, findProps, childProps);
      return stock;
    }
    
    
    
    var a = [
      {
        'id': 68,
        'space_id': 1,
        'title': '33333',
        'folder_id': 0,
        'is_folder': true,
        'is_default': false,
        'build_in': true,
        'created_by': 'andyljzhou',
        'updated_by': 'andyljzhou',
        'created_time': '2022-04-21T11:41:09.863650Z',
        'updated_time': '2022-04-21T11:42:56.004976Z',
        'children': [
          {
            'id': 72,
            'space_id': 1,
            'title': '333',
            'folder_id': 68,
            'is_folder': true,
            'is_default': false,
            'build_in': true,
            'created_by': 'andyljzhou',
            'updated_by': 'andyljzhou',
            'created_time': '2022-04-21T11:58:03.376084Z',
            'updated_time': '2022-04-21T11:58:03.376115Z',
            'children': [
              {
              'id': 82,
              'space_id': 1,
              'title': '面板',
              'folder_id': 72,
              'is_folder': false,
              'is_default': false,
              'build_in': true,
              'created_by': 'andyljzhou',
              'updated_by': 'andyljzhou',
              'created_time': '2022-04-22T03:36:44.364097Z',
              'updated_time': '2022-04-22T03:36:44.364130Z',
              'children': []
            }]
          }, {
            'id': 75,
            'space_id': 1,
            'title': '222',
            'folder_id': 68,
            'is_folder': true,
            'is_default': false,
            'build_in': true,
            'created_by': 'andyljzhou',
            'updated_by': 'andyljzhou',
            'created_time': '2022-04-21T12:06:48.781045Z',
            'updated_time': '2022-04-21T12:06:48.781077Z',
            'children': []
          }]
      }
    ]
    
    
    console.log(findParents(a,82))

    这样就可以查找满足任意前端组件 tree 的回填了



    转载本站文章《树形结构已知子节点获取子节点所有父节点——任意目录/树》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2022_0422_8797.html