© Matej Kotula/Shutterstock.com
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.

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.

<link rel="stylesheet" href="dist/themes/default/style.min.css" />
<script src="dist/libs/jquery.js"></script>
<script src="dist/jstree.min.js"></script>

Listing 1

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 ...

Neugierig geworden?

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