Lucid

Please wait...

TreeView

Bootstrap treeview

Default
Collapsed
Expanded

Custom Icons
Tags as Badges
Checkable Tree

Searchable Tree
Selectable Tree
Json Data

Treeview Official

Sample node

use jQuery('#jstree').jstree(); to element.

Selected node

use data-jstree='{"selected":true}' to selected node.

  • Root Node
    • Selected node
    • Simple node
Different icon format

use data-jstree='{"icon":"icon-name"}' to selected node.

  • Root Node
    • file icon node
    • custom icon node
    • internet icon node
Disabled node

use data-jstree='{"disabled":true}' to selected node.

  • Root Node
    • disabled node
    • simple node
JSON demo
Ajax demo
Callback function data demo
Interaction and events demo
either click the button or a node in the tree
Checkbox plugin

use "plugins":["checkbox"] to make checkbox jstree.

  • Root node
    • Child node 1
    • Child node 2
Drag and drop plugin

use "plugins":["dnd"] to make checkbox jstree.

  • Root node
    • Child node 1
    • Child node 2
  • Root node 2