Create Nice Responsive Tree View Menu Using Jquery jsTree Plugin

In this post I am going to introduce one more awesome jquery plugin to create nice responsive tree view with inline add edit and delete feature. jsTree is jquery plugin, that provides interactive trees. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and also support AJAX loading. jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery’s event system, so binding callbacks on various events in the tree is familiar and easy.
tree-view-menu

jsTree Features:

* drag & drop support
* keyboard navigation
* inline edit, create and delete
* tri-state checkboxes
* fuzzy searching
* customizable node types


Integrate jsTree Plugin In your website to create Tree View menu

Follow below steps to configure jsTree Plugin In your website.

Libraries

First Include jsTree CSS + JS library on page, Default theme can be auto-loaded, but it is best to include the CSS file. jsTree dependent on jquery library, Include jquery 1.9+ before jstree js library.

<!--CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
 
<!--JS-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

HTML

Setup a container element for your Tree view menu. In below example choose div as container where created tree view using ul li tag.

<div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
    <ul>
      <li>Root node 1
        <ul>
          <li id="child_node_1">Child node 1</li>
          <li>Child node 2</li>
        </ul>
      </li>
      <li>Root node 2</li>
    </ul>
  </div>



JS

Create an instance when the DOM is ready

$(function() {  
  $('#jstree').jstree();
});

Bind to events triggered on the tree

$(function() {  
 $('#jstree').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });
});

You can change the defaults for all future instances:

$(function() {  
 $.jstree.defaults.core.themes.variant = "large";
 $('#jstree').jstree();
});

But most of the time you will want to change the defaults only for the instance that is being created. This is achieved by passing in a config object when creating the instance:

$(function() {  
 $('#jstree').jstree({
  "plugins" : [ "wholerow", "checkbox" ]
 });
});

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.Don’t forget to read license for using above plugin in your commercial project.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.