Comment utiliser la bibliothèque d'interface utilisateur pour retracer le dernier nœud de données d'arbre au nœud racine et les étiquettes d'épissage?

Tracez vers le nœud racine à partir de l'extrémité des données de l'arborescence et épissez l'étiquette

Lors du traitement des données de la structure des arbores, il est souvent nécessaire de reculer la trace vers le nœud racine en fonction des informations de nœud de dernier niveau et d'épisser toutes les étiquettes de nœud sur le chemin. Par exemple, compte tenu des données d'arborescence suivantes:

 const triedata = [
  {
    Étiquette: "Node 1",
    Valeur: "1",
    enfants: [
      {étiquette: "Node 1-1", valeur: "1-1"},
      {label: "Node 1-2", valeur: "1-2"},
    ],
  },
  {
    Étiquette: "Node 2",
    Valeur: "2",
    Enfants: [{label: "Node 2-1", valeur: "2-1"}],
  },
]]

L'objectif est d'épisser toutes les balises de ce nœud au nœud racine en fonction de value du nœud de dernier niveau (par exemple, "1-2"), et le résultat attendu est "Node 1 / nœud 1-2".

La traversée inverse directe n'est pas possible car la structure des données fournit uniquement un chemin de la racine à la feuille. Mais nous pouvons utiliser les composants de l'arborescence et leurs mécanismes d'événements fournis par les bibliothèques d'interface utilisateur telles que TDesign ou Element-UI.

Les composants en forme d'arbre de ces bibliothèques fournissent généralement des objets node qui contiennent des informations sur les nœuds et leurs nœuds parents lorsqu'ils cliquent. Nous pouvons utiliser ces informations pour tracer vers le haut récursivement jusqu'au nœud racine.

En supposant que cliquer sur un nœud value de "1-2", le composant d'arbre de TDesign peut renvoyer l'objet node suivant:

 {
  Étiquette: "Node 1-2",
  Valeur: "1-2",
  parent: {
    Étiquette: "Node 1",
    Valeur: "1",
    Parent: NULL,
  },
}

Avec cet objet, nous pouvons accéder récursivement à la propriété parent jusqu'à ce que parent soit null (nœud racine). Dans ce processus, épissez label de chaque nœud pour obtenir le chemin complet.

Ce qui suit est une fonction JavaScript basée sur cette idée. Il faut des données d'arborescence et value cible en entrée et renvoie le chemin d'étiquette épissé:

 fonction getPathLabel (Treedata, TargetValue) {
  fonction Traverse (node) {
    if (node.value === TargetValue) {
      Soit Path = [];
      Laissez currentNode = Node;
      while (currentNode) {
        path.unshift (currentNode.Label); // Ajouter une étiquette au début du tableau CurrentNode = currentNode.parent;
      }
      return path.join ("/");
    }
    if (node.children) {
      pour (const child of node.children) {
        const result = Traverse (enfant);
        if (résultat) Retour Résultat;
      }
    }
    retourner null;
  }

  pour (const nœud de triedata) {
    const result = Traverse (nœud);
    if (résultat) Retour Résultat;
  }
  retourner null; // Valeur cible introuvable}


const path = getPathLabel (triedata, "1-2");
console.log (chemin); // sortie: nœud 1 / nœud 1-2

Cette fonction traverse les données de l'arborescence par la recherche en profondeur d'abord, trouve le nœud cible et traverse récursivement vers le haut et épissant les étiquettes. Il convient de noter que cela dépend de node fournie par la bibliothèque d'interface utilisateur, et l'implémentation spécifique peut varier d'une bibliothèque à l'autre. Il doit être ajusté en fonction de l'API réelle de la bibliothèque d'interface utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!