8/28/2017 jsTree

3.3.4

Home (/) Demo (/demo) API (/api) Plugins (/plugins)

API search

What is jsTree?

jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source (https://github.com/vakata/jstree/) and distributed under the
MIT license (https://raw.githubusercontent.com/vakata/jstree/master/LICENSE-MIT). 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.

Just a few of the features worth noting:

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

customizable node types

Chrome 14+, Firefox 3.5+, Opera 12+, Safari 4+, IE8+

older versions may work, but are not tested

Download (https://github.com/vakata/jstree/zipball/3.3.4)
Discuss (https://groups.google.com/forum/#!forum/jstree)
Report bugs (https://github.com/vakata/jstree/issues?state=open)
Donate (https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&b

Root node 1
initially selected
custom icon URL
initially open
Another node
Custom icon class (bootstrap)
Root node 2 (//www.jstree.com)

Overview (/) Configuration (/docs/config) HTML data (/docs/html) JSON data (/docs/json)

Events (/docs/events) Interaction (/docs/interaction)

Getting Started - everything at a glance

1. Download jsTree (https://github.com/vakata/jstree/zipball/3.3.4) or use CDNJS

If you choose to download - all the files you need are in the dist/ folder of the download

2. Include a jsTree theme

Themes can be autloaded too, but it is best for performance to include the CSS file.
If hosting the files yourself:

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

If using CDNJS:

https://www.jstree.com/ 1/2
8/28/2017 jsTree

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

3. Setup a container
This is the element where you want the tree to appear, a <div> is enough. This example has a nested <ul> as there is no other data source
configured (such as JSON).

<div id="jstree_demo_div"></div>

4. Include jQuery
jsTree requires 1.9.0 or greater in your webpage. You can use a CDN version or include a local copy.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

5. Include jsTree
If hosting the files yourself: for production include the minified version: dist/jstree.min.js , there is a development version too:
dist/jstree.js

<script src="dist/jstree.min.js"></script>

If using CDNJS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

6. Create an instance
Once the DOM is ready you can start creating jstree instances.

$(function () { $('#jstree_demo_div').jstree(); });

7. Listen for events

jsTree uses events to notify you when something changes while users (or you) interact with the tree. So binding to jstree events is as easy
binding to a click. There is a list of events (/api/#/?q=.jstree%20Event) and what information they provide in the API documentation.

$('#jstree_demo_div').on("changed.jstree", function (e, data) {

console.log(data.selected);
});

8. Interact with your instances

Once an instance is ready you can invoke methods on it. There is a list of available methods (/api/#/?q=() in the API documentation. The three
examples below do exactly the same thing

$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});

show the complete code

click here for the old site (v.1) (//old.jstree.com)

https://www.jstree.com/ 2/2