Wie benutze ich die UI -Bibliothek, um vom letzten Knoten von Baumdaten zum Root -Knoten und Spleißkennzeichnungen zurückzuverfolgen?

Verfolgen Sie vom Ende der Baumdaten zum Wurzelknoten zurück und spleißen Sie die Etikett

Bei der Verarbeitung von Baumstrukturdaten ist es häufig notwendig, die Verfolgung auf den Stammknoten auf der Grundlage der Knoteninformationen der letzten Stufe zurückzukehren und alle Knotenbezeichnungen auf dem Pfad zu spleißen. Zum Beispiel bei den folgenden Baumdaten:

 const treedata = [
  {
    Etikett: "Knoten 1",
    Wert: "1",
    Kinder: [
      {Label: "Knoten 1-1", Wert: "1-1"},
      {Label: "Knoten 1-2", Wert: "1-2"},
    ],
  },
  {
    Etikett: "Knoten 2",
    Wert: "2",
    Kinder: [{Label: "Knoten 2-1", Wert: "2-1"}],
  },
];

Das Ziel ist es, alle Tags von diesem Knoten an den Stammknoten basierend auf value des Last-Level-Knotens (z. B. "1-2") zu spleißen, und das erwartete Ergebnis ist "Knoten 1/Knoten 1-2".

Direkte umgekehrte Traversal ist nicht machbar, da die Datenstruktur nur einen Pfad von der Wurzel zum Blatt bietet. Wir können jedoch die Baumkomponenten und ihre Ereignismechanismen verwenden, die von UI-Bibliotheken wie Tdesign oder Element-UI bereitgestellt werden.

Die baumförmigen Komponenten dieser Bibliotheken liefern normalerweise node , die Informationen über Knoten und ihre übergeordneten Knoten enthalten, wenn sie klicken. Wir können diese Informationen verwenden, um bis zum Stammknoten rekursiv nach oben nachzuverfolgen.

Unter der Annahme, dass das Klicken auf einen Knoten value von "1-2" kann die Baumkomponente von TDesign das folgende node zurückgeben:

 {
  Etikett: "Knoten 1-2",
  Wert: "1-2",
  Elternteil: {
    Etikett: "Knoten 1",
    Wert: "1",
    Elternteil: NULL,
  },
}

Mit diesem Objekt können wir rekursiv auf die parent Eigenschaft zugreifen, bis parent null ist (Rootknoten). Spleißen Sie bei diesem Prozess label jedes Knotens, um den vollständigen Pfad zu erhalten.

Das Folgende ist eine JavaScript -Funktion, die auf dieser Idee basiert. Es nimmt Baumdaten und value als Eingabe auf und gibt den Spleißkennzeichen zurück:

 Funktion getPathLabel (treedata, targetValue) {
  Funktion traverse (Knoten) {
    if (node.value === targetValue) {
      lass path = [];
      lass currentNode = node;
      while (currentNode) {
        path.unshift (currentNode.label); // Beschriftung zum Beginn des Array currentNode = currentNode.Parent;
      }
      return path.join ("/");
    }
    if (node.children) {
      für (const Child of Node.Children) {
        const Ergebnis = Traverse (Kind);
        Wenn (Ergebnis) Rückgabeergebnis;
      }
    }
    null zurückkehren;
  }

  für (const node von treedata) {
    const result = Traverse (Knoten);
    Wenn (Ergebnis) Rückgabeergebnis;
  }
  null zurückkehren; // Zielwert nicht gefunden}


const path = getPathLabel (Treedata, "1-2");
console.log (Pfad); // Ausgabe: Knoten 1/Knoten 1-2

Diese Funktion durchquert die Baumdaten durch Tiefen-First-Suche, findet den Zielknoten und durchquert rekursiv nach oben und spleißt die Beschriftungen. Es ist zu beachten, dass dies von node abhängt, und die spezifische Implementierung kann von Bibliothek zu Bibliothek variieren. Es muss gemäß der tatsächlichen UI -Bibliothek -API eingestellt werden.

Das obige ist der detaillierte Inhalt vonWie benutze ich die UI -Bibliothek, um vom letzten Knoten von Baumdaten zum Root -Knoten und Spleißkennzeichnungen zurückzuverfolgen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!