Basic
- Parent 1
- Child 1
- Child 2
- Parent 2
- Parent 3
- Parent 4
- Parent 5
Collapsed
- Parent 1
- Parent 2
- Parent 3
- Parent 4
- Parent 5
Expanded
- Parent 1
- Child 1
- Grandchild 1
- Grandchild 2
- Child 2
- Parent 2
- Parent 3
- Parent 4
- Parent 5
Custom Icons
- Parent 1
- Child 1
- Child 2
- Parent 2
- Parent 3
- Parent 4
- Parent 5
Tags As Label pills
- Parent 14
- Child 12
- Child 20
- Parent 20
- Parent 30
- Parent 40
- Parent 50
Json Data
- Parent 1
- Child 1
- Child 2
- Parent 2
- Parent 3
- Parent 4
- Parent 5
Searchable Tree
- Parent 1
- Child 1
- Child 2
- Parent 2
- Parent 3
- Parent 4
- Parent 5
Expandible Tree
- Parent 1
- Child 1
- Child 2
- Parent 2
- Parent 3
- Parent 4
- Parent 5
Events
- Parent 1
- Child 1
- Child 2
- Parent 2
- Parent 3
- Parent 4
- Parent 5
jstree official website
Setting initial
use data-jstree='{"selected":true}' to selected node.
use JSON formart
Use AJAX format
Checkbox Plugin
use "plugins":["checkbox"] to make checkbox jstree.
Contextmenu Plugin
use "plugins":["contextmenu"] to make contextmenu jstree.
Search plugin
use "plugins":["search"] to make search jstree.
Drag & drop plugin
use "plugins":["dnd"] to make Drag & drop jstree.