jsTree
jsTree is jquery plugin, that provides interactive trees. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.
You can see more details from here.
Basic
Make a container div and insilize js tree on it. then use ul for tree list, also nested ul for nested tree.
- Root node 1
- Child Node
- Initially selected
- initially open
- Disabled Node
- Another node
- Root node 2
Code Example
<div id="basic-tree">
<ul>
<li>
Root node 1
<ul>
<li>
Child Node
</li>
<li data-jstree='{ "selected" : true }'>
Initially selected
</li>
<li data-jstree='{ "opened" : true }'>
initially open
<ul>
<li data-jstree='{ "disabled" : true }'>
Disabled Node
</li>
<li data-jstree='{ "type" : "file" }'>
Another node
</li>
</ul>
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file" }'>
Root node 2
</li>
</ul>
</div>
Custom Icon
you can use custom options in list item with data-jstree attribute. like this data-jstree='{ "icon" : "icon ni ni-calendar-fill" }' value for that icon must be classes to display or style that icon.
- Root node 1
- Child Node
- Initially selected
- initially open
- Disabled Node
- Another node
- Root node 2
Code Example
<div id="custom-icon-tree">
<ul>
<li>
Root node 1
<ul>
<li>
Child Node
</li>
<li data-jstree='{ "selected" : true, "icon" : "icon ni ni-calendar-fill text-info" }'>
Initially selected
</li>
<li data-jstree='{ "opened" : true }'>
initially open
<ul>
<li data-jstree='{ "disabled" : true , "icon" : "icon ni ni-archive-fill" }'>
Disabled Node
</li>
<li data-jstree='{ "type" : "file" }'>
Another node
</li>
</ul>
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file", "icon" : "icon ni ni-puzzle-fill text-success" }'>
Root node 2
</li>
</ul>
</div>
Context Menu
For content menu, you just need to include contextmenu in plugins option. For more information please check jsTree Plugin Page
Code Example
<div id="context-menu-tree">
<ul>
<li>
Root node 1
<ul>
<li>
Child Node
</li>
<li data-jstree='{ "selected" : true }'>
Initially selected
</li>
<li data-jstree='{ "opened" : true }'>
initially open
<ul>
<li data-jstree='{ "disabled" : true }'>
Disabled Node
</li>
<li data-jstree='{ "type" : "file" }'>
Another node
</li>
</ul>
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file" }'>
Root node 2
</li>
</ul>
</div>
Drag and Drop
To activate drag and drop option, you just need to include dnd in plugins option. For more information please check jsTree Plugin Page
- Root node 1
- Child Node
- Initially selected
- initially open
- Disabled Node
- Another node
- Root node 2
Code Example
<div id="drag-drop-tree">
<ul>
<li>
Root node 1
<ul>
<li>
Child Node
</li>
<li data-jstree='{ "selected" : true }'>
Initially selected
</li>
<li data-jstree='{ "opened" : true }'>
initially open
<ul>
<li data-jstree='{ "disabled" : true }'>
Disabled Node
</li>
<li data-jstree='{ "type" : "file" }'>
Another node
</li>
</ul>
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file" }'>
Root node 2
</li>
</ul>
</div>
Checkbox
To activate checkbox option with full row selection, you just need to include wholerow and checkbox in plugins option. For more information please check jsTree Plugin Page
- Root node 1
- Child Node
- Initially selected
- initially open
- Disabled Node
- Another node
- Root node 2
Code Example
<div id="checkbox-tree">
<ul>
<li>
Root node 1
<ul>
<li>
Child Node
</li>
<li data-jstree='{ "selected" : true }'>
Initially selected
</li>
<li data-jstree='{ "opened" : true }'>
initially open
<ul>
<li data-jstree='{ "disabled" : true }'>
Disabled Node
</li>
<li data-jstree='{ "type" : "file" }'>
Another node
</li>
</ul>
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file" }'>
Root node 2
</li>
</ul>
</div>
