jsTree die Erste

Aus gegebenem Anlass beschäftige ich mich grade mit jsTree. Ich glaub, das kann ziemlich viel, allerdings find ich die Doku etwas dürftig. Aber da es sich um JavaScript handelt, hab ich damit weit weniger Probleme als mit der Doku von, sagen wir mal, Typo3.

1. Wie erstelle ich einen jsTree ?
Zuerst baue ich mir im HTML eine einfache Liste

<div id="treenav">
 <ul>
  <li id="Inhalte" rel="basis"><a href="">Inhalte</a>
   <ul>
    <li rel="seite"><a href="">Seiten</a></li>
    <li rel="news"><a href="">News</a></li>
   </ul>
  </li>
  <li id="Benutzerverwaltung" rel="basis"><a href="">Benutzerverwaltung</a>
   <ul>
    <li rel="benutzer"><a href="">Benutzer</a></li>
   </ul>
  </li>
 </ul>
</div>

Anschließend initalisiere ich den Tree

$('#treenav').jstree({
	"themes" : {
		"theme": "classic",
		"dots" : false
	},
	"types": {
		"types" : {
			"basis" : {	"icon" : { "image" : "_drive.png"} },
			"seite" : {	"icon" : { "image" : "icon_seite.png"} },
			"news" : {	"icon" : { "image" : "icon_news.png"} }
		}
	},
	"plugins" : [ "themes", "html_data", "types" ]
});

Mit „types“ definiere ich die Node Typen und kann so für einzelne Listeneinträge unterschiedliche Icons definieren.

2. Wie sorge ich dafür, dass gleich alles aufgeklappt ist ?
Nun wollte ich noch, dass der Tree gleich komplett aufgeklappt ist und das geht so:

$("#treenav").jstree("open_all");

Mehr Einträge zu jsTree werden sicher noch folgen…. 🙂