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>
