Verschachtelter Baum vs. flacher Baum

Baumkomponenten sind sehr häufig und praktisch. Beachten Sie, dass nicht alle Baumkomponenten verschachtelte Strukturen sind?

Hintergrund

Unser Ziel ist es, die baumveränderte Datenstruktur im Browser zu visualisieren.

Es hat zwei Sub -Nodes und jeder Sub -Node hat einen Sub -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"
          }
        ]
      }
    ]
  };

Lokaler Baum <>

Ich nahm zunächst an, dass die Struktur der Baumkomponente verschachtelt war. Dies ist die intuitivste Möglichkeit, eine Baumstruktur zu erzeugen. Durchqueren Sie einfach die Datenstruktur und konvertieren Sie sie in HTML -Elemente.

generiert die folgende HTML -Struktur. Dies ist eine typische HTML -Struktur, und wir können dem Baum leicht Falten-/Erweiterungsfunktion hinzufügen.

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

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

flacher Baum <>

flacher Baum ist eine Liste, aber es sieht aus wie ein Baum.

Das Endergebnis entspricht dem folgenden. Ich habe Knoten -ID und übergeordnete ID gespeichert, sodass wir keine hierarchischen Strukturinformationen verlieren werden. Die Siedlung ist nicht natürlich gebildet, daher müssen Sie sich selbst damit befassen.

Volles Beispiel

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

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

Diese beiden Bäume sehen gleich aus. Hängen Sie die Maus jedoch auf den Baumknoten, Sie werden feststellen, dass das Verhalten etwas anders ist. Die Hintergrundfarbe des verschachtelten Baumes wurde immer eingerückt, während der flache Baum nicht ist.

Zusammenfassung

Nachdem ich den VS -Code heruntergeladen hatte, habe ich zum ersten Mal den flachen Baum gelernt. Ich fand, dass VS -Code meine Ordnerstruktur elegant gezeigt hat. Mein Lieblingspunkt ist, dass die gesamte Spalte beim Aufhängen des Cursors an einem Ordner oder einer Datei hervorgehoben wird.

flache Bäume sehen prägnanter aus. Aufgrund seiner einfachen Struktur ist es einfach, den CSS -Stil dafür anzuwenden.

Sie haben ihre eigenen Vor- und Nachteile, bitte wählen Sie den entsprechenden Typ entsprechend Ihren Anforderungen.

Das obige ist der detaillierte Inhalt vonVerschachtelter Baum vs. flacher Baum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!