jsTree

jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading. For more, please visit the plugin's documentation .

Basic Example
Preview
  • Root node 1
    • Child 1
    • Child 2
  • Root node 2
    • Child 1
    • Child 2
<div class="lpx_jstree">
  <ul>
    <li data-jstree='{"opened": true }'>
      Root node 1
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
    <li>
      Root node 2
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
  </ul>
</div>
 
$(".lpx-jstree").jstree();
 
Initially Open Example
Preview
  • Initially Open
    • Child 1
    • Child 2
  • Root node 2
    • Child 1
    • Child 2
<div class="lpx_jstree">
  <ul>
    <li data-jstree='{ "opened" : true }'>
      Initially Open
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
    <li>
      Root node 2
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
  </ul>
</div>
 
$(".lpx-jstree").jstree();
 
Custom Icon Class (Bootstrap)
Preview
  • Custom icon class (bootstrap)
    • Child 1
    • Child 2
  • Root node 2
    • Child 1
    • Child 2
<div class="lpx_jstree">
  <ul>
    <li data-jstree='{"icon":"bi bi-star-fill text-brand", "opened":true}'>
      Custom icon class (bootstrap)
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
    <li>
      Root node 2
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
  </ul>
</div>
 
$(".lpx-jstree").jstree();
 
Initially Selected Example
Preview
  • Root node 1
    • Initially selected
    • Child 1
    • Child 2
  • Root node 2
    • Child 1
    • Child 2
<div class="lpx_jstree">
  <ul>
    <li>
      Root node 1
      <ul>
        <li data-jstree='{ "selected" : true }'>Initially selected</li>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
    <li>
      Root node 2
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
  </ul>
</div>
 
$(".lpx-jstree").jstree();
 
Disabled Example
Preview
  • Root node 1
    • Disabled child
    • Child 1
    • Child 2
  • Root node 2
    • Child 1
    • Child 2
<div class="lpx_jstree">
  <ul>
    <li data-jstree='{ "opened" : true }'>
      Root node 1
      <ul>
        <li data-jstree='{ "disabled" : true }'>Disabled child</li>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
    <li>
      Root node 2
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
  </ul>
</div>
 
$(".lpx-jstree").jstree();
 
Clickable Link Example
Preview
<div id="lpx_jstree_1">
  <ul>
    <li data-jstree='{"opened":true}'>
      <a href="https://www.google.com/"> Clickable link node </a>
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
    <li>
      Root node 2
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
  </ul>
</div>
 
$(".lpx-jstree-1").jstree();