Treeview

We are using jsTree for treeview. JsTree is jquery plugin, that provides interactive trees. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading.
Read the official jsTree Documentation for a full list of instructions and other options.

Usage#

In order to use jstree on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header: 

<link rel="stylesheet" href="assets/vendor/libs/jstree/jstree.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer: 

<script src="assets/vendor/libs/jstree/jstree.js"/>

Examples#

Basic#

To create a basic treeview create a list and initialize like this: $(El).jstree() 

<div id="jstree-basic">
  <ul>
    <li data-jstree='{"icon" : "ri-folder-3-line"}'>
      css
      <ul>
        <li data-jstree='{"icon" : "ri-folder-3-line"}'>
          app.css
        </li>
        <li data-jstree='{"icon" : "ri-folder-3-line"}'>
          style.css
        </li>
      </ul>
    </li>
    <li class="jstree-open" data-jstree='{"icon" : "ri-folder-3-line"}'>
      img
      <ul data-jstree='{"icon" : "ri-folder-3-line"}'>
        <li data-jstree='{"icon" : "ri-folder-3-line"}'>
          bg.jpg
        </li>
        <li data-jstree='{"icon" : "ri-folder-3-line"}'>
          logo.png
        </li>
        <li data-jstree='{"icon" : "ri-folder-3-line"}'>
          avatar.png
        </li>
      </ul>
    </li>
    <li class="jstree-open" data-jstree='{"icon" : "ri-folder-3-line"}'>
      js
      <ul>
        <li data-jstree='{"icon" : "ri-folder-3-line"}'>jquery.js</li>
        <li data-jstree='{"icon" : "ri-folder-3-line"}'>app.js</li>
      </ul>
    </li>
    <li data-jstree='{"icon" : "ri-file-text-line"}'>
      index.html
    </li>
    <li data-jstree='{"icon" : "ri-file-text-line"}'>
      page-one.html
    </li>
    <li data-jstree='{"icon" : "ri-file-text-line"}'>
      page-two.html
    </li>
  </ul>
</div>
$("#jstree-basic").jstree()

Custom Icons#

You can customize icons by passing icon parameter.
You can also create a treeview with JS without writing HTML. 

 <div id="jstree-custom-icons"></div>  
$("#jstree-custom-icons").jstree({
  core: {
    data: [
      {
        text: 'css',
        children: [
          { text: 'app.css', type: 'css' },
          { text: 'style.css', type: 'css' }
        ]
      },
      {
        text: 'img',
        state: { opened: true },
        children: [
          { text: 'bg.jpg', type: 'img' },
          { text: 'logo.png', type: 'img' },
          { text: 'avatar.png', type: 'img' }
        ]
      },
      {
        text: 'js',
        state: { opened: true },
        children: [
          { text: 'jquery.js', type: 'js' },
          { text: 'app.js', type: 'js' }
        ]
      },
      { text: 'index.html', type: 'html' },
      { text: 'page-one.html', type: 'html' },
      { text: 'page-two.html', type: 'html' }
    ]
  },
  plugins: ['types'],
  types: {
    default: { icon: 'ri-folder-3-line' },
    html: { icon: 'ri-html5-fill text-danger' },
    css: { icon: 'ri-css3-fill text-info' },
    img: { icon: 'ri-image-fill text-success' },
    js: { icon: 'ri-javascript-line text-warning' }
  }
})

Context Menu#

Add contextmenu in plugins property and check_callback: true in core property to add a context menu to your treeview. 

 <div id="jstree-context-menu"></div>  
$("#jstree-context-menu").jstree({
  core: {
    check_callback: true,
    data: [
      {
        text: 'css',
        children: [
          { text: 'app.css', type: 'css' },
          { text: 'style.css', type: 'css' }
        ]
      },
      {
        text: 'img',
        state: { opened: true },
        children: [
          { text: 'bg.jpg', type: 'img' },
          { text: 'logo.png', type: 'img' },
          { text: 'avatar.png', type: 'img' }
        ]
      },
      {
        text: 'js',
        state: { opened: true },
        children: [
          { text: 'jquery.js', type: 'js' },
          { text: 'app.js', type: 'js' }
        ]
      },
      { text: 'index.html', type: 'html' },
      { text: 'page-one.html', type: 'html' },
      { text: 'page-two.html', type: 'html' }
    ]
  },
  plugins: ['types', 'contextmenu'],
  types: {
    default: { icon: 'ri-folder-3-line' },
    html: { icon: 'ri-html5-fill text-danger' },
    css: { icon: 'ri-css3-fill text-info' },
    img: { icon: 'ri-image-fill text-success' },
    js: { icon: 'ri-javascript-line text-warning' }
  }
})

Drag & Drop#

Add dnd in plugins property and check_callback: true in core property to be able to drag and drop your nodes. 

 <div id="jstree-drag-drop"></div>  
$("#jstree-drag-drop").jstree({
  core: {
    check_callback: true,
    data: [
      {
        text: 'css',
        children: [
          { text: 'app.css', type: 'css' },
          { text: 'style.css', type: 'css' }
        ]
      },
      {
        text: 'img',
        state: { opened: true },
        children: [
          { text: 'bg.jpg', type: 'img' },
          { text: 'logo.png', type: 'img' },
          { text: 'avatar.png', type: 'img' }
        ]
      },
      {
        text: 'js',
        state: { opened: true },
        children: [
          { text: 'jquery.js', type: 'js' },
          { text: 'app.js', type: 'js' }
        ]
      },
      { text: 'index.html', type: 'html' },
      { text: 'page-one.html', type: 'html' },
      { text: 'page-two.html', type: 'html' }
    ]
  },
  plugins: ['types', 'dnd'],
  types: {
    default: { icon: 'ri-folder-3-line' },
    html: { icon: 'ri-html5-fill text-danger' },
    css: { icon: 'ri-css3-fill text-info' },
    img: { icon: 'ri-image-fill text-success' },
    js: { icon: 'ri-javascript-line text-warning' }
  }
})

Checkbox#

Add checkbox and wholerow in plugins property to create selectable treeview. 

 <div id="jstree-checkbox"></div>  
$("#jstree-checkbox").jstree({
  core: {
    data: [
      {
        text: 'css',
        children: [
          { text: 'app.css', type: 'css' },
          { text: 'style.css', type: 'css' }
        ]
      },
      {
        text: 'img',
        state: { opened: true },
        children: [
          { text: 'bg.jpg', type: 'img' },
          { text: 'logo.png', type: 'img' },
          { text: 'avatar.png', type: 'img' }
        ]
      },
      {
        text: 'js',
        state: { opened: true },
        children: [
          { text: 'jquery.js', type: 'js' },
          { text: 'app.js', type: 'js' }
        ]
      },
      { text: 'index.html', type: 'html' },
      { text: 'page-one.html', type: 'html' },
      { text: 'page-two.html', type: 'html' }
    ]
  },
  plugins: ['types', 'checkbox', 'wholerow'],
  types: {
    default: { icon: 'ri-folder-3-line' },
    html: { icon: 'ri-html5-fill text-danger' },
    css: { icon: 'ri-css3-fill text-info' },
    img: { icon: 'ri-image-fill text-success' },
    js: { icon: 'ri-javascript-line text-warning' }
  }
})

Ajax#

Use url property in data property in core property to get your data with an AJAX call, refer below mentioned example for more info. 

 <div id="jstree-ajax"></div>  
$("#jstree-ajax").jstree({
  core: {
    data: {
      url: 'YOUR_URL',
      dataType: 'json', // IF IN JSON FORMAT
      data: function(node) {
        return { id: node.id }
      }
    }
  },
  plugins: ['types', 'state'],
  types: {
    default: { icon: 'ri-folder-3-line' },
    html: { icon: 'ri-html5-fill text-danger' },
    css: { icon: 'ri-css3-fill text-info' },
    img: { icon: 'ri-image-fill text-success' },
    js: { icon: 'ri-javascript-line text-warning' }
  }
})
© 2017- 2025 Pixinvent, Hand-crafted & Made with ❤️