JStree

by Brian Houlihan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<p>JSTree radiobutton behaviour example using checkbox plugin.</p>
<div id="tree">tree loading</div>
<div id="log"></div>

CSS

#multiselect, #tree, #log, p { margin-bottom: 20px; }

JavaScript

$(document).ready(function () {
	var $tree = $('#tree');
	var resetting = false;
		
	$('#tree').jstree({
		"core": {
			"data": [
                { id: "1", text: "Unit 1", parent: "#", state: { "opened": true }},
                { id: "2", text: "Unit 2", parent: "1", state: { "opened": true }},
                { id: "3", text: "Unit 3", parent: "2", state: { "opened": true }},
                { id: "4", text: "Unit 4", parent: "2", state: { "opened": true }},
                { id: "5", text: "Unit 5", parent: "#", state: { "opened": true }},
                { id: "6", text: "Unit 6", parent: "5", state: { "opened": true }}
            ]
		},
		"plugins": [
			"themes",
			"wholerow"
		]
	});

	$('#tree').on('changed.jstree', function (e, data) {
		$("#log").append("Selected nodes: " + data.instance.get_node(data.selected).id + "<br />");
	});
});