jsTree: Erstellen Sie interaktive Baumstrukturen mit jQuery

Was ist die jsTree API?

jsTree wandelt komplexe JSON-Daten in interaktive, hierarchische Baumstrukturen um und bietet Entwicklern eine leistungsstarke Möglichkeit, verschachtelte JSON-Objekte zu visualisieren und zu navigieren. Als jQuery-Plugin konvertiert es rohe JSON-Daten in aufklappbare/zuklappbare Knotenbäume – perfekt zur Inspektion von API-Antworten, Konfigurationsdateien oder beliebigen hierarchischen Datensätzen.

Wichtige Funktionen für die JSON-Visualisierung:

• JSON-zu-Baum-Konvertierung: Rendert JSON-Arrays/Objekte automatisch als Eltern-/Kind-Knoten
• Interaktive Erkundung: Knoten auf-/zuklappen, um tiefe JSON-Strukturen zu durchdringen
• Dynamisches Laden: Nachträgliches Laden (Lazy Loading) großer JSON-Datensätze zur Leistungsoptimierung
• Benutzerdefiniertes Knoten-Rendering: Stilisiert Knoten basierend auf JSON-Datentypen (Arrays, Objekte, Werte)
• Suche & Filter: Schnelles Auffinden von Schlüsseln/Werten in komplexen JSON-Bäumen

Im Gegensatz zu flachen JSON-Viewern bewahrt jsTree die Hierarchie und Beziehungen in Ihren Daten, was es ideal für das Debuggen von APIs oder die Dokumentation verschachtelter JSON-Schemata macht.

GitHub-Statistiken

Name:
Sprache:
Sterne:
Gabeln:
Lizenz:
Das Repository wurde zuletzt aktualisiert unter

Warum jsTree wählen?

• Bewährte Lösung: 10+ Jahre aktive Entwicklung
• Leichtgewichtig: Benötigt nur jQuery als Abhängigkeit
• Barrierefrei: WCAG 2.0-konform
• Umfangreiche Dokumentation: Vollständige API-Referenz
• MIT-lizenziert: Kostenlos für kommerzielle Nutzung

Installation

jsTree kann über Paketmanager installiert oder direkt von einem CDN eingebunden werden.

npm install jstree

Hinweis: Vergessen Sie nicht, jQuery vor jsTree einzubinden.

Codebeispiele

Entdecken Sie die Möglichkeiten von jsTree mit diesen Beispielen:

Beispiel 1: Grundlegender Baum aus HTML

Die einfachste Möglichkeit, ein jsTree zu erstellen, ist die Konvertierung verschachtelter HTML-Listen. Dieser Ansatz ist ideal, wenn Ihre Baumstruktur statisch ist oder Sie Prototypen erstellen. Das Plugin konvertiert automatisch die verschachtelte UL/LI-Struktur in einen interaktiven Baum mit Auf-/Zuklapp-Funktionalität. Die grundlegende Implementierung erfordert minimalen JavaScript-Code und eignet sich gut für einfache Navigationsmenüs oder Inhaltsstrukturen.

Demonstrierte Funktionen:

• HTML-zu-Baum-Konvertierung
• Auf-/Zuklapp-Funktionalität
• Grundlegendes Styling

Beispiel 2: Laden von Daten über JSON

Für dynamische Anwendungen kann jsTree Daten aus JSON laden. Dieser Ansatz ist flexibler und ermöglicht es Ihnen, die Baumstruktur programmatisch aufzubauen. Das JSON-Format ist einfach, wobei jeder Knoten Eigenschaften wie "id", "text", "children" und "state" hat. Sie können auch Symbole, deaktivierte Zustände und andere Attribute für jeden Knoten angeben. Diese Methode ist besonders nützlich, wenn Ihre Baumdaten aus einer Datenbank oder API stammen.

Beispiel 3: Checkboxen und Drag & Drop

jsTree bietet Plugins, die seine Kernfunktionalität erweitern. Das Checkbox-Plugin fügt jedem Knoten auswählbare Checkboxen hinzu, während das dnd-Plugin Drag-and-Drop-Operationen ermöglicht. Diese Funktionen sind entscheidend für die Erstellung von Oberflächen wie Dateimanagern oder Berechtigungssystemen, in denen Benutzer mehrere Elemente auswählen oder die Hierarchie neu organisieren müssen. Die Plugins erhalten die Leistung des Baums selbst bei Hunderten von Knoten.

Erweiterte Funktionen

jsTree unterstützt professionelle Workflows:

• Nachträgliches Laden: Knoten bei Bedarf laden:

  Lazy Loading

  
      $('#tree').jstree({
        'core': {
          'data': {
            'url': '/nodes/',
            'data': function (node) {
              return { 'id': node.id };
            }
          }
        }
      });
      
  

• Ereignisbehandlung: Auf Bauminteraktionen reagieren:

  Ereignis-Listener

  
      $('#tree').on('changed.jstree', function (e, data) {
        console.log('Ausgewählte Knoten:', data.selected);
      });
      
  

• Benutzerdefinierte Designs: Gestalten Sie Ihren Baum:

  Benutzerdefiniertes Design

  
      $('#tree').jstree({
        'themes': {
          'name': 'custom',
          'dots': false,
          'icons': false
        }
      });
      
  

Fazit

jsTree bietet eine robuste Lösung zur Visualisierung hierarchischer Daten. Ideal für:

• Dateibrowser: Navigieren durch Verzeichnisstrukturen
• Navigationsmenüs: Erstellen von mehrstufigen Menüs
• CMS-Oberflächen: Verwalten von Inhaltshierarchien
• Konfigurationstools: Bearbeiten verschachtelter Einstellungen

Mit seinem umfangreichen Plugin-System und aktiver Wartung bleibt jsTree die bevorzugte Lösung für Baumstrukturen in Webanwendungen.

Ähnliche Produkte