How to use the UI library to trace back from the last node of tree data to the root node and splice labels?

Trace back to the root node from the end of the tree data and splice the label

When processing tree structure data, it is often necessary to reverse trace back to the root node based on the last-level node information and splice all node labels on the path. For example, given the following tree data:

 const treeData = [
  {
    label: "Node 1",
    value: "1",
    children: [
      { label: "Node 1-1", value: "1-1" },
      { label: "Node 1-2", value: "1-2" },
    ],
  },
  {
    label: "Node 2",
    value: "2",
    children: [{ label: "Node 2-1", value: "2-1" }],
  },
];

The goal is to splice all tags from that node to the root node based on value value of the last-level node (for example, "1-2"), and the expected result is "Node 1/Node 1-2".

Direct reverse traversal is not feasible because the data structure only provides a path from the root to the leaf. But we can use the tree components and their event mechanisms provided by UI libraries such as tdesign or element-ui.

The tree-shaped components of these libraries usually provide node objects that contain information about nodes and their parent nodes when they click. We can use this information to trace upwards recursively until the root node.

Assuming that clicking on a node value of "1-2", the tree component of tdesign may return the following node object:

 {
  label: "Node 1-2",
  value: "1-2",
  parent: {
    label: "Node 1",
    value: "1",
    parent: null,
  },
}

With this object, we can recursively access the parent property until parent is null (root node). In this process, splice label of each node to get the complete path.

The following is a JavaScript function based on this idea. It takes tree data and target value as input and returns the spliced ​​label path:

 function getPathLabel(treeData, targetValue) {
  function traverse(node) {
    if (node.value === targetValue) {
      let path = [];
      let currentNode = node;
      while (currentNode) {
        path.unshift(currentNode.label); // Add label to the beginning of the array currentNode = currentNode.parent;
      }
      return path.join("/");
    }
    if (node.children) {
      for (const child of node.children) {
        const result = traverse(child);
        if (result) return result;
      }
    }
    return null;
  }

  for (const node of treeData) {
    const result = traverse(node);
    if (result) return result;
  }
  return null; // Target value not found}


const path = getPathLabel(treeData, "1-2");
console.log(path); // Output: Node 1/Node 1-2

This function traverses the tree data through depth-first search, finds the target node, and recursively traverses upwards and splices the labels. It should be noted that this depends on node object structure provided by the UI library, and the specific implementation may vary from library to library. It needs to be adjusted according to the actual UI library API.

The above is the detailed content of How to use the UI library to trace back from the last node of tree data to the root node and splice labels?. For more information, please follow other related articles on the PHP Chinese website!