© Matej Kotula/Shutterstock.com
JavaScript Kompendium
Erste Schritte mit dem jQuery-Plug-in

Dynamische, interaktive Bäume mit jsTree

Mit dem kostenfreien jQuery-Plug-in jsTree lassen sich im Handumdrehen ansehnliche Baumstrukturen abbilden. Die Komponente bietet von Haus aus einige Komfortfeatures wie Drag-and-Drop, Inlinebearbeitung und Tastaturnavigation. Außerdem lässt sie sich dank Open Source auch beliebig anpassen. Der folgende Artikel beschäftigt sich mit den ersten Schritten zur Einbindung der Komponente und zeigt im weiteren Verlauf beispielhaft Anpassungsmöglichkeiten.

Patrick Echtenbruck


Im IT-Umfeld sind Bäume mittlerweile allgegenwärtig. Sie helfen zwar nicht gegen den weltweiten CO2-Anstieg, bieten aber eine intuitive Möglichkeit, um Hierarchien abzubilden. Da die Grundfunktionalität prinzipiell immer die gleiche ist, benötigt man auch keine Eingewöhnung. Man kann direkt produktiv damit arbeiten. Will man nun im Webumfeld einen solchen Baum implementieren, kann man das natürlich „von Hand“ machen, was sicherlich auch seinen Reiz hat, oder man bedient sich einfach einer der zahlreichen Bibliotheken. Eine davon ist das Open-Source-Projekt jsTree [1], das auch auf GitHub gehostet wird [2].Der Einstieg mit jsTree gestaltet sich recht einfach, da man als Quelle für den Baum die Wahl hat, eine unformatierte HTML-Liste oder JSON zu verwenden. Die jsTree-Bibliothek benötigt nur ein jQuery-Objekt der Quelle, der Rest geschieht anschließend automatisch. Um jsTree zu verwenden, muss die Bibliothek wie in Listing 1 beschrieben eingebunden werden. Da die Komponente auf jQuery aufsetzt, muss dies natürlich ebenfalls referenziert werden. Es wird davon ausgegangen, dass bereits mit jQuery gearbeitet wurde und entsprechende Grundkenntnisse vorhanden sind.Die Pfade entsprechen denen der offiziellen Seite der jsTree-Komponenten. Um nun eine simple HTML- oder auch JSON-Struktur in einen Baum, der zahlreiche Interaktionsmöglichkeiten bietet, zu verwandeln, muss die Komponente natürlich auch wissen, was das Quellmaterial ist. Dazu wird der jsTree-Konstruktor auf dem entsprechenden jQuery-Objekt initialisiert. Das reicht, um einen Baum zu erhalten. Das Besondere an der Komponente ist aber, dass sie zahlreiche Konfigurations- und Erweiterungsmöglichkeiten bietet (Listing 2).Ich persönlich bevorzuge es, den Baum im JSON-Format zu hinterlegen. Der Vollständigkeit halber werde ich zunächst aber auch ein HTML-Beispiel zeigen. Dieses Beispiel ist ebenfalls Teil des Downloads der offiziellen Seite.HTMLDer HTML-Baum wird ganz klassisch über eine ungeordnete Liste definiert. Jedes

  • -Element kann dabei wiederum eine Liste enthalten. Auf diese Art lässt sich der Baum abbilden und mit der in Listing 2 gezeigten Initialisierung in einen jsTree umwandeln. Im folgenden Listing 3 ist bereits eine data-Annotation zu sehen, die dem jsTree bei der Initialisierung angibt, dass der Root-Knoten schon aufgeklappt sein soll.
  • JavaScript Kompendium
    Erste Schritte mit dem jQuery-Plug-in

    Dynamische, interaktive Bäume mit jsTree

    Mit dem kostenfreien jQuery-Plug-in jsTree lassen sich im Handumdrehen ansehnliche Baumstrukturen abbilden. Die Komponente bietet von Haus aus einige Komfortfeatures wie Drag-and-Drop, Inlinebearbeitung und Tastaturnavigation. Außerdem lässt sie sich dank Open Source auch beliebig anpassen. Der folgende Artikel beschäftigt sich mit den ersten Schritten zur Einbindung der Komponente und zeigt im weiteren Verlauf beispielhaft Anpassungsmöglichkeiten.

    Patrick Echtenbruck


    Im IT-Umfeld sind Bäume mittlerweile allgegenwärtig. Sie helfen zwar nicht gegen den weltweiten CO2-Anstieg, bieten aber eine intuitive Möglichkeit, um Hierarchien abzubilden. Da die Grundfunktionalität prinzipiell immer die gleiche ist, benötigt man auch keine Eingewöhnung. Man kann direkt produktiv damit arbeiten. Will man nun im Webumfeld einen solchen Baum implementieren, kann man das natürlich „von Hand“ machen, was sicherlich auch seinen Reiz hat, oder man bedient sich einfach einer der zahlreichen Bibliotheken. Eine davon ist das Open-Source-Projekt jsTree [1], das auch auf GitHub gehostet wird [2].Der Einstieg mit jsTree gestaltet sich recht einfach, da man als Quelle für den Baum die Wahl hat, eine unformatierte HTML-Liste oder JSON zu verwenden. Die jsTree-Bibliothek benötigt nur ein jQuery-Objekt der Quelle, der Rest geschieht anschließend automatisch. Um jsTree zu verwenden, muss die Bibliothek wie in Listing 1 beschrieben eingebunden werden. Da die Komponente auf jQuery aufsetzt, muss dies natürlich ebenfalls referenziert werden. Es wird davon ausgegangen, dass bereits mit jQuery gearbeitet wurde und entsprechende Grundkenntnisse vorhanden sind.Die Pfade entsprechen denen der offiziellen Seite der jsTree-Komponenten. Um nun eine simple HTML- oder auch JSON-Struktur in einen Baum, der zahlreiche Interaktionsmöglichkeiten bietet, zu verwandeln, muss die Komponente natürlich auch wissen, was das Quellmaterial ist. Dazu wird der jsTree-Konstruktor auf dem entsprechenden jQuery-Objekt initialisiert. Das reicht, um einen Baum zu erhalten. Das Besondere an der Komponente ist aber, dass sie zahlreiche Konfigurations- und Erweiterungsmöglichkeiten bietet (Listing 2).Ich persönlich bevorzuge es, den Baum im JSON-Format zu hinterlegen. Der Vollständigkeit halber werde ich zunächst aber auch ein HTML-Beispiel zeigen. Dieses Beispiel ist ebenfalls Teil des Downloads der offiziellen Seite.HTMLDer HTML-Baum wird ganz klassisch über eine ungeordnete Liste definiert. Jedes

  • -Element kann dabei wiederum eine Liste enthalten. Auf diese Art lässt sich der Baum abbilden und mit der in Listing 2 gezeigten Initialisierung in einen jsTree umwandeln. Im folgenden Listing 3 ist bereits eine data-Annotation zu sehen, die dem jsTree bei der Initialisierung angibt, dass der Root-Knoten schon aufgeklappt sein soll.
  • Neugierig geworden?

    
        
    Loading...

    Angebote für Teams

    Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

    Das Library-Modell:
    IP-Zugang

    Das Company-Modell:
    Domain-Zugang