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>
