logologo-dark

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

  • Root node 1
    • Child Node
    • Initially selected
    • initially open
      • Disabled Node
      • Another node
  • Root node 2
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>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Shady
Softy
Sidebar Style
White
Light
Dark
Theme
Header Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?