Using JsTree


Bootstrap plugin


<script src="/vendor/jstree/3.0.4/jstree.js"></script>
<link rel="stylesheet" href="/vendor/jstree/3.0.4/themes/proton/style.css" />

<div id="container">
            <li>Root node
                            <li id="child_node">Child node</li>
                            <li id="child_node_2">Child node 2</li>
                            <li id="child_node_3">Child node 3</li>
                            <li id="child_node_4">Child node 4
                                            <li id="grandchild_node_4">GrandChild node 4</li>
                                            <li id="grandchild_node_5">GrandChild node 5</li>
                                            <li id="grandchild_node_6">GrandChild node 6</li>

Simple with theme

            'core': {
                    'themes': {
                            'name': 'proton',
                            'responsive': true

Populating the tree with Json

        'core' : {
            'data' : [
                { "text" : "Root node", "children" : [
                        { "text" : "Child node 1" },
                        { "text" : "Child node 2" }

Populating the tree using AJAX

        'core' : {
            'data' : {
                "url" : "//",
                "dataType" : "json" // needed only if you do not supply JSON headers

Should respond with:

    "id":1,"text":"Root node","children":[
        {"id":2,"text":"Child node 1"},
        {"id":3,"text":"Child node 2"}

More on Json Formats

Drag and drop

 $(function() {
                        'plugins' : ["dnd"],
                        'core': {
                                "check_callback" : true,

Check_callback: true means the operation will be allowed, false means it won't. You can also set this to a function rather than boolean.

Responding to clicks

.on('changed.jstree',function (e, data){
        node = data.node;
        //send AJAX request and retrieve blog
        $.post("load_post.php",{'id'}, function(data) 
                data = JSON.parse(data);

                if(data.success =='yes')


.on('rename_node.jstree', function(object, value) {




Allows right click


Remembers state of tree

Database backend

Drag from a treeview and drop on div!category-topic/jstree/BYppISuCFRE

Get the id of selected element


Move Node

$(document).on("move_node.jstree", function (e, data) {
        var nodeType = $(data.rslt.o).attr("rel");
        var parentType = $("rel");
        do stuff

Variables accessible to you include:

.o - the node being moved
.r - the reference node in the move
.ot - the origin tree instance
.rt - the reference tree instance
.p - the position to move to (may be a string - "last", "first", etc)
.cp - the calculated position to move to (always a number)
.np - the new parent
.oc - the original node (if there was a copy)
.cy - boolen indicating if the move was a copy
.cr - same as np, but if a root node is created this is -1
.op - the former parent
.or - the node that was previously in the position of the moved node */

Note you need the CRRM plugin for this

Close a node

$('#tree').jstree('close_node', '1097');

Open a node

$('#tree').jstree('open_node', '1097');

The open_node function deals with IDs or DOM objects or jQuery collections, not selectors. To use a selector you must use jquery:

$('#container').jstree('open_node', $('.expand-menu'));

Open a node and its parent nodes

$("#domelement").jstree('open_node', '1097', function(e,d) {
        for (var i = 0; i < e.parents.length; i++) {
            $("#domelement").jstree('open_node', e.parents[i]);

Select/Highlight a node


Select all nodes


Deselect all nodes


Get parent node

    nodeID = $("#domelement").jstree("get_parent", thisNode);

Old Deprecated

before.jstree doesn't exist - use check_callback instead

Triggering events

To select a node and trigger an event

$("#domelement").jstree("select_node", selector).trigger("select_node.jstree");

Refreshing a jstree

$('#treeId').jstree(true) = newData;