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

css
- app.css
- style.css
img
- bg.jpg
- logo.png
- avatar.png
js
- jquery.js
- app.js
index.html
page-one.html
page-two.html

<div id="jstree-basic">
  <ul>
    <li data-jstree='{"icon" : "ti ti-folder"}'>
      css
      <ul>
        <li data-jstree='{"icon" : "ti ti-folder"}'>
          app.css
        </li>
        <li data-jstree='{"icon" : "ti ti-folder"}'>
          style.css
        </li>
      </ul>
    </li>
    <li class="jstree-open" data-jstree='{"icon" : "ti ti-folder"}'>
      img
      <ul data-jstree='{"icon" : "ti ti-folder"}'>
        <li data-jstree='{"icon" : "ti ti-folder"}'>
          bg.jpg
        </li>
        <li data-jstree='{"icon" : "ti ti-folder"}'>
          logo.png
        </li>
        <li data-jstree='{"icon" : "ti ti-folder"}'>
          avatar.png
        </li>
      </ul>
    </li>
    <li class="jstree-open" data-jstree='{"icon" : "ti ti-folder"}'>
      js
      <ul>
        <li data-jstree='{"icon" : "ti ti-folder"}'>jquery.js</li>
        <li data-jstree='{"icon" : "ti ti-folder"}'>app.js</li>
      </ul>
    </li>
    <li data-jstree='{"icon" : "ti ti-file-text"}'>
      index.html
    </li>
    <li data-jstree='{"icon" : "ti ti-file-text"}'>
      page-one.html
    </li>
    <li data-jstree='{"icon" : "ti ti-file-text"}'>
      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: 'ti ti-folder' },
    html: { icon: 'ti ti-brand-html5 text-danger' },
    css: { icon: 'ti ti-brand-css3 text-info' },
    img: { icon: 'ti ti-photo text-success' },
    js: { icon: 'ti ti-brand-javascript text-warning' }
  }
})

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: 'ti ti-folder' },
    html: { icon: 'ti ti-brand-html5 text-danger' },
    css: { icon: 'ti ti-brand-css3 text-info' },
    img: { icon: 'ti ti-photo text-success' },
    js: { icon: 'ti ti-brand-javascript 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: 'ti ti-folder' },
    html: { icon: 'ti ti-brand-html5 text-danger' },
    css: { icon: 'ti ti-brand-css3 text-info' },
    img: { icon: 'ti ti-photo text-success' },
    js: { icon: 'ti ti-brand-javascript 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: 'ti ti-folder' },
    html: { icon: 'ti ti-brand-html5 text-danger' },
    css: { icon: 'ti ti-brand-css3 text-info' },
    img: { icon: 'ti ti-photo text-success' },
    js: { icon: 'ti ti-brand-javascript 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: 'ti ti-folder' },
    html: { icon: 'ti ti-brand-html5 text-danger' },
    css: { icon: 'ti ti-brand-css3 text-info' },
    img: { icon: 'ti ti-photo text-success' },
    js: { icon: 'ti ti-brand-javascript text-warning' }
  }
})