jsTree

Installation

aktuelles jQuery von http://jquery.com herunterladen
Software-Paket von der Seite https://www.jstree.com/ herunterladen und entpacken.
im Unterverzeichnis dist die Datei jstree.min.js sowie eines der themes-Unterverzeichnisse ins eigene Projekt kopieren und in die HTML-Seite einbauen.

Beispiel-Webseite

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsTree</title>
    <script src="js/jquery-2.1.4.min.js"></script> 
    <script src="js/jstree.min.js"></script> 
    <script src="js/basic.js"></script> 
    <link rel="stylesheet" href="css/style.min.css" /> 
</head> 
<body> 
    <div id="tree"> 
        <ul> 
            <li>Root node 
                <ul> 
                    <li>Child node 1</li> 
                    <li>Child node 2</li> 
                </ul> 
            </li> 
        </ul> 
    </div> 
</body> 
</html>

basic.js

$(function() {
    $('#tree').jstree();
});

Grundlagen

jsTree braucht ein div, das entweder wie im Beispiel mit einer unsortierten (verschachtelten) Liste gefüllt ist oder leer.
```
<div id="tree"></div>
```
Dann muss eine Instanz von jsTree auf diesem div erzeugt werden.
```
 $('#tree').jstree();
```
- Der Instanz kann beim Erzeugen ein Konfigurations-Objekt übergeben werden, um sein Verhalten zu steuern. siehe https://www.jstree.com/docs/config/
- Eine Liste der verfügbaren Optionen für das Konfigurationsobjekt findet sich unter https://www.jstree.com/api/#/?q=%28
Mit Hilfe dieser Instanz kann auf Events des Baums reagiert werden
```
$('#tree').on("changed.jstree", function (e, data) { 
        console.log(data);
      };
```
Eine vollständige Liste der Events findet sich auf der Seite https://www.jstree.com/api/#/?q=.jstree%20Event
Mit Hilfe dieser Instanz kann der Baum durch Methoden manipuliert werden. Eine Liste der Methoden findet sich auf der Seite https://www.jstree.com/api/#/?q=%28