Using JsTree

Posted 8 years ago - updated 8 years ago jstree

JStree

Bootstrap plugin

Setup

<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">
     <ul>
            <li>Root node
                    <ul>
                            <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
                                    <ul>
                                            <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>
                                    </ul>
                            </li>
                    </ul>
            </li>
    </ul>
</div>

Simple with theme

    $('#container').jstree({
            'core': {
                    'themes': {
                            'name': 'proton',
                            'responsive': true
                    }
            }
    });

Populating the tree with Json

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

Populating the tree using AJAX

$('#container').jstree({
        'core' : {
            'data' : {
                "url" : "//www.jstree.com/fiddle/",
                "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

https://www.jstree.com/docs/json/

Drag and drop

 $(function() {
                $('#tree1').jstree({
                        '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':node.id}, function(data) 
        { 
                data = JSON.parse(data);
                $("#contents").html();

                if(data.success =='yes')
                {
                        $("#contents").html(data.message);
                }
                else
                {
                        alert(data.message);
                }
        });
});

Saving

.on('rename_node.jstree', function(object, value) {
        console.log('saved');
});

• example of saving

Plugins

Search

https://github.com/vakata/jstree/issues/1022

contextmenu

Allows right click

State

Remembers state of tree

Database backend

• example

Drag from a treeview and drop on div

https://groups.google.com/forum/#!category-topic/jstree/BYppISuCFRE

Get the id of selected element

$('#tree').jstree('get_selected').attr('id')

Move Node

$(document).on("move_node.jstree", function (e, data) {
        var nodeType = $(data.rslt.o).attr("rel");
        var parentType = $(data.rslt.np).attr("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

$('#domelement').jstree('select_node','1282');

Select all nodes

$('#domelement').jstree("select_all");

Deselect all nodes

$('#domelement').jstree("deselect_all");

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).settings.core.data = newData;
$('#treeId').jstree(true).refresh();