解析tree结构 根据数据种类进行分类

28 阅读1分钟

源数据:

    {  
        id: 1,  
        name: "Node 1",  
        children: [  
            {  
                id: 2,  
                name: "Node 1.1",  
                children: [],
		
            },  
            {  
                id: 3,  
                name: "Node 1.2",  
                children: [  
                    {  
                        id: 4,  
                        name: "Node 1.1", // 与上面的Node 1.1同名  
                        children: []  
                    }  
                ]  
            }  
        ]  
    },  
    {  
        id: 5,  
        name: "Node 2",  
        children: [  
            {  
                id: 6,  
                name: "Node 2.1",  
                children: []  
            },  
            {  
                id: 7,  
                name: "Node 2.1", // 与上面的Node 2.1同名,但位于不同层级  
                children: []  
            }  
        ]  
    }  
];  
  

方法:

    const result = {};  
  
    function traverse(nodes) {  
        nodes.forEach(node => {  
            if (!result[node.name]) {  
                result[node.name] = [];  
            }  
            result[node.name].push(node);  
            if (node.children && node.children.length > 0) {  
                traverse(node.children);  
            }  
        });  
    }  
  
    traverse(tree);  
    return result;  
}  
  
// 使用示例  
const classifiedNodes = classifyByName(treeData);  
console.log(classifiedNodes);  
// 输出: 一个对象,其中每个键是一个唯一的name,值是具有该name的所有节点的数组

根据上面案例,运用到项目中,根据不同情况进行修改如下:

调用方法:

  // 切换作战力量和通信力量
    tabSelect(nv) {
      this.resourceData = []
      // 假设原始数据为 allTreeData  
      if (nv == 1) {
        this.resourceData = this.allTreeData;
      } else {
        const classifiedNodes = this.classifyByName(this.allTreeData);
        this.resourceData = classifiedNodes;
        console.log('classifiedNodes------------', this.resourceData);
      }
      
    },
}

封装方法:

    classifyByName(tree) {
      const result = {};
      function traverse(nodes) {
        nodes.forEach(node => {
          if (node.atttibuteValue !== '') {
            const filteredUsers = JSON.parse(node.atttibuteValue).filter(obj => obj.label === '资源类型');
            if (filteredUsers.length > 0) {
              if (!result[filteredUsers[0].typeValue]) {
                result[filteredUsers[0].typeValue] = [];
              } 
              // else {
              //   let obj = {
              //     atttibuteValue: node.atttibuteValue,
              //     children: [],
              //     nodeName: node.nodeName,
              //     parentId: node.parentId,
              //     templetId: node.templetId,
              //     nodeId: node.nodeId,
              //   }
              //   result[filteredUsers[0].typeValue].push(obj);
              // }
              let obj = {
                atttibuteValue: node.atttibuteValue,
                children: [],
                nodeName: node.nodeName,
                parentId: node.parentId,
                templetId: node.templetId,
                nodeId: node.nodeId,
              }
              result[filteredUsers[0].typeValue].push(obj);
            }

       
          }
          if (node.children && node.children.length > 0) {
            traverse(node.children);
          }
        });
      }

      traverse(tree);
      console.log('result', result)
      return result;
    },