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

Clickable link node
- Child 1
- Child 2
Root node 2
- Child 1
- Child 2

<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();

About Privacy Contact