從樹(shù)形數(shù)據(jù)末節(jié)點(diǎn)回溯至根節(jié)點(diǎn)並拼接標(biāo)籤

處理樹(shù)形結(jié)構(gòu)數(shù)據(jù)時(shí)，常需根據(jù)末級(jí)節(jié)點(diǎn)信息逆向追溯至根節(jié)點(diǎn)，並拼接路徑上所有節(jié)點(diǎn)標(biāo)籤。例如，給定以下樹(shù)形數(shù)據(jù)：

 const treeData = [
  {
    label: "節(jié)點(diǎn)1",
    value: "1",
    children: [
      { label: "節(jié)點(diǎn)1-1", value: "1-1" },
      { label: "節(jié)點(diǎn)1-2", value: "1-2" },
    ],
  },
  {
    label: "節(jié)點(diǎn)2",
    value: "2",
    children: [{ label: "節(jié)點(diǎn)2-1", value: "2-1" }],
  },
];

目標(biāo)是根據(jù)末級(jí)節(jié)點(diǎn)的value值（例如"1-2"），拼接從該節(jié)點(diǎn)到根節(jié)點(diǎn)的所有標(biāo)籤，期望結(jié)果為"節(jié)點(diǎn)1/節(jié)點(diǎn)1-2"。

直接逆向遍歷不可行，因?yàn)閿?shù)據(jù)結(jié)構(gòu)僅提供從根到葉子的路徑。但我們可以利用UI 庫(kù)（如tdesign 或element-ui）提供的樹(shù)形組件及其事件機(jī)制來(lái)實(shí)現(xiàn)。

這些庫(kù)的樹(shù)形組件通常在節(jié)點(diǎn)點(diǎn)擊時(shí)提供包含節(jié)點(diǎn)及其父節(jié)點(diǎn)信息的node對(duì)象。我們可以利用此信息遞歸向上追溯，直到根節(jié)點(diǎn)。

假設(shè)點(diǎn)擊value為"1-2" 的節(jié)點(diǎn)，tdesign 的樹(shù)形組件可能返回如下node對(duì)象：

 {
  label: "節(jié)點(diǎn)1-2",
  value: "1-2",
  parent: {
    label: "節(jié)點(diǎn)1",
    value: "1",
    parent: null,
  },
}

利用此對(duì)象，我們可以遞歸訪問(wèn)parent屬性，直到parent為null （根節(jié)點(diǎn)）。在此過(guò)程中拼接每個(gè)節(jié)點(diǎn)的label ，即可得到完整路徑。

以下是一個(gè)基於此思路的JavaScript 函數(shù)，它接受樹(shù)形數(shù)據(jù)和目標(biāo)value值作為輸入，並返回拼接後的標(biāo)籤路徑：

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


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

此函數(shù)通過(guò)深度優(yōu)先搜索遍歷樹(shù)形數(shù)據(jù)，找到目標(biāo)節(jié)點(diǎn)後，遞歸向上遍歷並拼接標(biāo)籤。 需要注意的是，這依賴於UI 庫(kù)提供的node對(duì)象結(jié)構(gòu)，具體實(shí)現(xiàn)可能因庫(kù)而異。 需要根據(jù)實(shí)際的UI 庫(kù)API 進(jìn)行調(diào)整。

以上是如何利用UI庫(kù)從樹(shù)形數(shù)據(jù)的末節(jié)點(diǎn)回溯至根節(jié)點(diǎn)並拼接標(biāo)籤？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！