树状图点击子节点如何获取所有父节点数据

Question

点击第三层的节点，如何通过js拿到第一层和第二层的节点数据，数据就像下面的这样

[
  { 
    key: '1', 
    value:'第一层', 
    children:[
        {
          key: '2', 
          value:'第二层', 
          children:[
            {
              key: '3', 
              value:'第三层', 
              children:[]
            }
    ]
  },
   { 
    key: '4', 
    value:'第一层', 
    children:[
        {
          key: '5', 
          value:'第二层', 
          children:[
            {
              key: '6', 
              value:'第三层', 
              children:[]
            }
    ]
  }
]

Answer 1

可以点击的时候拿到 key 值 dfs 找到子节点，再回溯找到所有父节点；

或者一开始构建一个map，再内部定义一个 _key: 1-2-3 后面直接通过 _key 查找；

Answer 2

/**
 * @desc 根据子节点id查询所有父节点id
 * @author Lee
 * @date 2020年5月22日12:38:39
 * @param {Array<object>} array 需要遍历的数组
 * @param {string|number} key 要遍历的key值
 * @return Array;
 * */export function getParent(array: Array<object>, key: string|number): Array<string|number> {
  let result: Array<string|number> = [];
  let toToo = true;
  const catchData = (array: Array<object>, key: string|number) => {
    array.forEach((item: any) => {
      if (!toToo) return;
      result.push(String(item['id']));
      if (item['id'] === key) {
        toToo = false;
      } else if (item['children']) {
        catchData(item['children'], key);
      } else {
        result.pop();
      }
    });
    toToo && result.pop();
  };
  catchData(array, key);
  return result;
}

Answer 3

树结构处理库：https://www.npmjs.com/package/tree-tool

const result = treeTool.findPath(treeData, node => node.key == '6')

result即为所有祖先节点组成的数组。示例代码：http://jsrun.net/E36Kp/edit