jsTree JQuery Plugin

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.

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. The primary features of jsTree Plugin:

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

Live Demo

  • Root node
    • Child node 1
    • Child node 2

either click the button or a node in the tree

How to Use

Add the css below to your html page

<link rel="stylesheet" href="./../../dist/themes/default/style.min.css" />

Create a container where you want to render tree

<h1>HTML demo</h1>
<div id="html" class="demo">
   <ul>
      <li data-jstree='{ "opened" : true }'>
         Root node
         <ul>
            <li data-jstree='{ "selected" : true }'>Child node 1</li>
            <li>Child node 2</li>
         </ul>
      </li>
   </ul>
</div>

<h1>Inline data demo</h1>
<div id="data" class="demo"></div>

<h1>Data format demo</h1>
<div id="frmt" class="demo"></div>

<h1>AJAX demo</h1>
<div id="ajax" class="demo"></div>

<h1>Lazy loading demo</h1>
<div id="lazy" class="demo"></div>

<h1>Callback function data demo</h1>
<div id="clbk" class="demo"></div>

<h1>Interaction and events demo</h1>
<button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>
<div id="evts" class="demo"></div>

Load jQuery library together with the jsTree library into your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./../../dist/jstree.min.js"></script>
	
<script>
	// html demo
	$('#html').jstree();

	// inline data demo
	$('#data').jstree({
		'core' : {
			'data' : [
				{ "text" : "Root node", "children" : [
						{ "text" : "Child node 1" },
						{ "text" : "Child node 2" }
				]}
			]
		}
	});

	// data format demo
	$('#frmt').jstree({
		'core' : {
			'data' : [
				{
					"text" : "Root node",
					"state" : { "opened" : true },
					"children" : [
						{
							"text" : "Child node 1",
							"state" : { "selected" : true },
							"icon" : "jstree-file"
						},
						{ "text" : "Child node 2", "state" : { "disabled" : true } }
					]
				}
			]
		}
	});

	// ajax demo
	$('#ajax').jstree({
		'core' : {
			'data' : {
				"url" : "./root.json",
				"dataType" : "json" // needed only if you do not supply JSON headers
			}
		}
	});

	// lazy demo
	$('#lazy').jstree({
		'core' : {
			'data' : {
				"url" : "//www.jstree.com/fiddle/?lazy",
				"data" : function (node) {
					return { "id" : node.id };
				}
			}
		}
	});

	// data from callback
	$('#clbk').jstree({
		'core' : {
			'data' : function (node, cb) {
				if(node.id === "#") {
					cb([{"text" : "Root", "id" : "1", "children" : true}]);
				}
				else {
					cb(["Child"]);
				}
			}
		}
	});

	// interaction and events
	$('#evts_button').on("click", function () {
		var instance = $('#evts').jstree(true);
		instance.deselect_all();
		instance.select_node('1');
	});
	$('#evts')
		.on("changed.jstree", function (e, data) {
			if(data.selected.length) {
				alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
			}
		})
		.jstree({
			'core' : {
				'multiple' : false,
				'data' : [
					{ "text" : "Root node", "children" : [
							{ "text" : "Child node 1", "id" : 1 },
							{ "text" : "Child node 2" }
					]}
				]
			}
		});
</script>

Source Code

Download

This awesome jQuery plugin is developed by Ivan Bozhanov . For more Advanced Usages, please check the demo page or visit the official website.