如何利用UI庫從樹形數據的末節點回溯至根節點並拼接標籤？

從樹形數據末節點回溯至根節點並拼接標籤

處理樹形結構數據時，常需根據末級節點信息逆向追溯至根節點，並拼接路徑上所有節點標籤。例如，給定以下樹形數據：

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

目標是根據末級節點的value值（例如"1-2"），拼接從該節點到根節點的所有標籤，期望結果為"節點1/節點1-2"。

直接逆向遍歷不可行，因為數據結構僅提供從根到葉子的路徑。但我們可以利用UI 庫（如tdesign 或element-ui）提供的樹形組件及其事件機制來實現。

這些庫的樹形組件通常在節點點擊時提供包含節點及其父節點信息的node對象。我們可以利用此信息遞歸向上追溯，直到根節點。

假設點擊value為"1-2" 的節點，tdesign 的樹形組件可能返回如下node對象：

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

利用此對象，我們可以遞歸訪問parent屬性，直到parent為null （根節點）。在此過程中拼接每個節點的label ，即可得到完整路徑。

以下是一個基於此思路的JavaScript 函數，它接受樹形數據和目標value值作為輸入，並返回拼接後的標籤路徑：

 function getPathLabel(treeData, targetValue) {
  function traverse(node) {
    if (node.value === targetValue) {
      let path = [];
      let currentNode = node;
      while (currentNode) {
        path.unshift(currentNode.label); // 將標籤添加到數組開頭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; // 目標值未找到}


const path = getPathLabel(treeData, "1-2");
console.log(path); // 輸出: 節點1/節點1-2

此函數通過深度優先搜索遍歷樹形數據，找到目標節點後，遞歸向上遍歷並拼接標籤。 需要注意的是，這依賴於UI 庫提供的node對象結構，具體實現可能因庫而異。 需要根據實際的UI 庫API 進行調整。

以上是如何利用UI庫從樹形數據的末節點回溯至根節點並拼接標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！