How To Create Expandable Tree View Menu Using jsTree

jsTree is an open-source jquery tree view plugin that is dependent on jquery 1.9.1 or a later version. The jsTree is developed and maintained at https://www.jstree.com/ or at https://github.com/vakata/jstree.Its supports all modern browsers and IE from version 8 up.

You can also read Dynamic Tree with JSTree, PHP and MySQL

What’s jsTree

jsTree is a jQuery plugin that allows for the creation of interactive tree view menus. These menus are useful for organizing and displaying hierarchical data such as categories, file directories, or organizational charts.

jsTree is used to display tree view by parsing HTML or JSON and supports AJAX. You can easily configure and customize jsTree with various themes. There is various plugin available to customize jstree like search, checkbox, inline editing etc.

The main features are:

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

How to Use jsTree

Step 1: Included js and CSS files in the head section of files.

<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"></script>

Step 2: Call jstree method on the target element using a jQuery selector.
$('#tree-container').jstree()

Where '#tree-container' is a target HTML element that is used for render jstree.

jsTree Example Using HTML

In this article, we will walk through the process of creating an expandable tree view menu using jsTree.We can create tree view using HTML.

This option is very suitable for constant-type tree menu like header menus. jsTree provide jstree() method to render tree.

We need to call .jstree() method on HTML element using jQuery selector. You can also be used $.jstree.create(element).

Earlier, We have learned about the use of jsTree, You need to include all CSS and js files in the head section of index.html file as Step 1. We will add below HTML code,

<div id="treeview_div" class="well">
<ul>
<li>Electronics
<ul>
<li>Mobile
<ul>
<li>Samsung</li>
<li>Apple</li>
</ul>
</li>
<li>Laptop
<ul>
<li>Dell</li>
<li>Computer Peripherals
<ul>
<li>Printers</li>
<li>Monitor</li>
</ul>
</li>
<li>Keyboard</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

As you can see, I have created a tree structure using ul and li HTML element. Now I will call jsTree method on tree container.

<script>
$(function() {
  $('#treeview_div').jstree();
});
</script>

.jstree() method to let jsTree know you want to render a tree inside the selected node. You can also add a few options when rendering a node using a data-attribute like the below code,

<ul>
 	<li data-jstree="{ &quot;selected&quot; : true, &quot;opened&quot; : true }">Electronics ....</li>
</ul>

jsTree Example Using JSON data

We will discuss about jsTree with JSON data.JSON is a very common format to exchange data between front-end and back-end application. We will use the same .jstree() method as the previous except we will pass the config object.

We will pass JSON data into core.data key and use it to create a tree. jsTree parse any data you specify in the core.data key and use this data to create a tree, If this key is missing jsTree will try to parse the inline HTML of the container.

We will include all js and CSS jstree file (as described in Step 1) and created tree container HTML which is used to render expandable tree view menu,

<div id="treeview_json" class="well">&nbsp;</div>

Defined sample JSON tree data

[{"id":"1","name":"Electronics","text":"Electronics","parent_id":"0","children":[{"id":"2","name":"Mobile","text":"Mobile","parent_id":"1","children":[{"id":"7","name":"Samsung","text":"Samsung","parent_id":"2","children":[],"data":{},"a_attr":{"href":"google.com"}},{"id":"8","name":"Apple","text":"Apple","parent_id":"2","children":[],"data":{},"a_attr":{"href":"google.com"}}],"data":{},"a_attr":{"href":"google.com"}},{"id":"3","name":"Laptop","text":"Laptop","parent_id":"1","children":[{"id":"4","name":"Keyboard","text":"Keyboard","parent_id":"3","children":[],"data":{},"a_attr":{"href":"google.com"}},{"id":"5","name":"Computer Peripherals","text":"Computer Peripherals","parent_id":"3","children":[{"id":"6","name":"Printers","text":"Printers","parent_id":"5","children":[],"data":{},"a_attr":{"href":"google.com"}},{"id":"10","name":"Monitors","text":"Monitors","parent_id":"5","children":[],"data":{},"a_attr":{"href":"google.com"}}],"data":{},"a_attr":{"href":"google.com"}},{"id":"11","name":"Dell","text":"Dell","parent_id":"3","children":[],"data":{},"a_attr":{"href":"google.com"}}],"data":{},"a_attr":{"href":"google.com"}}],"data":{},"a_attr":{"href":"google.com"}}]

We will call .jstree() on HTML element,

$('#treeview_json').jstree({
	'core' : {
		'data' : jsonTreeData
	}
});

I have added JSON data (jsonTreeData) with data key into jstree object.

Conclusion

We have created jstree using HTML and JSON data. We have added options with jstree on rendering of data or HTML tree.

You can download the source code and Demo from the below link.

Live Demo

Download Source Code