Arbre imbriqué vs arbre plat

Les composants des arbres sont très courants et pratiques. Remarquez-vous que tous les composants des arbres ne sont pas des structures imbriquées?

arrière-plan

Notre objectif est de visualiser la structure de données en forme d'arbre dans le navigateur.

Il a deux sous-codes et chaque sous-node a un sous-node.

  // 一个基本的树形数据结构
  const treeData = {
    id: 0,
    name: "root",
    children: [
      {
        id: 1,
        name: "node 1",
        children: [
          {
            id: 3,
            name: "node 1.1"
          }
        ]
      },
      {
        id: 2,
        name: "node 2",
        children: [
          {
            id: 4,
            name: "node 2.1"
          }
        ]
      }
    ]
  };

arbre local <>

J'ai initialement supposé que la structure de la composante arborée était imbriquée. C'est le moyen le plus intuitif de générer une structure d'arbres. Traversez simplement la structure des données et convertissez-les en éléments HTML.

Il générera la structure HTML suivante. Il s'agit d'une structure HTML typique, et nous pouvons facilement ajouter une fonction pliante / en expansion à l'arbre.

function nestedTreeGenerator(treeData, depth) {
  const nodes = [];

  // ... (代码略，与原文相同) ...
}

arbre plat <>

Flat Tree est une liste, mais il ressemble à un arbre.

Le résultat final est le même que le suivant. J'ai enregistré l'ID de nœud et l'ID parent, nous ne perdrons donc pas les informations de structure hiérarchiques. Le règlement n'est pas naturellement formé, vous devez donc y faire face vous-même.

Exemple complet

function flatTreeGenerator(treeData, depth, parentId) {
  let nodes = [];

  // ... (代码略，与原文相同) ...
}

Ces deux arbres se ressemblent. Cependant, accrochez la souris sur le nœud d'arbre, vous constaterez que le comportement est légèrement différent. La couleur d'arrière-plan de l'arbre imbriqué a toujours été en retrait, tandis que l'arbre plat ne l'est pas.

Résumé

Après avoir téléchargé le code VS, j'ai d'abord appris l'arbre plat pour la première fois. J'ai trouvé que le code VS montrait de manière élégamment de la structure de mon dossier. Mon point préféré est que lorsque vous accrochez le curseur sur un dossier ou un fichier, la colonne entière sera mise en évidence.

Les arbres plats ont l'air plus concis. En raison de sa structure simple, il est facile d'appliquer le style CSS pour lui.

Ils ont leurs propres avantages et inconvénients, veuillez choisir le type approprié en fonction de vos besoins.

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!