jsTree v.1.0

CORE

Description

Including the files

First of all, as jsTree is a jQuery component, you need to include jQuery itself. jsTree v.1.0 requires jQuery version 1.4.2

<script type="text/javascript" src="_lib/jquery.js"></script>

Then you need to include jsTree:

<script type="text/javascript" src="jquery.jstree.js"></script>

Or you could use the minified version:

<script type="text/javascript" src="jquery.jstree.min.js"></script>

You may change the path to whatever you like, but it is recommended not to rename jquery.tree.js or jquery.tree.min.js as the filenames may be used for path autodetection (for example in the themes plugin, but if you really need to rename the file most plugins will give you the option to set the path manually).

Additionally some plugins have dependencies - plugins that detect a dependency is missing will throw an error.

Creating and configuring an instance

You can create a tree in the following manner:

jQuery("some-selector-to-container-node-here").jstree([ config_object ]);

In the optional config object you specify all the options that you want to set. Each plugin will describe its configuration and defaults. In the configuration section below you will find the options defined by the core. Each plugin's options (even the core) are set in their own subobject, which is named after the plugin. For example all of the core's options are set in the core key of the config object:

jQuery("some-selector-to-container-node-here")
	.jstree({
		core : {
			/* core options go here */
		}
	});

Please note that if your options for a given plugin are the same as the defaults you may omit those options or omit the subobject completely (if you do not need to modify the defaults).

There is only one special config option that is not a part of any plugin - this is the plugins option, which defines a list of active plugins for the instance being created. Although many plugins may be included, only the ones listed in this option will be active. The only autoincluded "plugin" is the jstree core.

jQuery("some-selector-to-container-node-here")
	.jstree({
		core : { /* core options go here */ },
		plugins : [ "themes", "html_data", "some-other-plugin" ]
	});

Interacting with the tree

To perform an operation programatically on a given instance you can use two methods:

/* METHOD ONE */
jQuery("some-selector-to-container-node-here")
	.jstree("operation_name" [, argument_1, argument_2, ...]);

/* METHOD TWO */
jQuery.jstree._reference(needle) 
	/* NEEDLE can be a DOM node or selector for the container or a node within the container */
	.operation_name([ argument_1, argument_2, ...]);

NOTE: Functions prefixed with _ can not be called with method one.

jsTree uses events to notify of any changes happening in the tree. All events fire on the tree container in the jstree namespace and are named after the function that triggered them. Please note that for some events it is best to bind before creating the instance. For example:

jQuery("some-container")
	.bind("loaded.jstree", function (event, data) {
		alert("TREE IS LOADED");
	})
	.jstree({ /* configuration here */ });

Please note the second parameter data. Its structure is as follows:

{ 
	"inst" : /* the actual tree instance */, 
	"args" : /* arguments passed to the function */, 
	"rslt" : /* any data the function passed to the event */, 
	"rlbk" : /* an optional rollback object - it is not always present */
}

There is also one special event - before.jstree. This events enables you to prevent an operation from executing. Look at the demo below.

Configuration

html_titles

Boolean. Default is false.

Defines whether titles can contain HTML code.

animation

A number. Default is 500.

Defines the duration of open/close animations. 0 means no animation.

initially_open

An array. Default is [].

Defines which nodes are to be automatically opened (if they are not present they will first be loaded) when the tree finishes loading - a list of IDs is expected.

initially_load

An array. Default is [].

Defines which nodes are to be automatically loaded (but not opened) when the tree finishes loading - a list of IDs is expected.

load_open

A Boolean. Default is false.

When set to true forces loading of nodes marked as open, which do not have children. Otherwise nodes are only visualized as open without any children and opening/closing such a node won't cause it to load (make a server call).

open_parents

Boolean. Default is true.

If set to true opening a node will also open any closed ancestors it has (will open the whole chain down to this node).

notify_plugins

Boolean. Default is true.

If set to true loading nodes with some metadata will trigger some actions on the corresponding plugin. So you can actually set the selected/checked/etc

rtl

Boolean. Default is false.

Defines whether the tree is in right-to-left mode (also make sure you are using a RTL theme - for example the included default-rtl).

strings

Object. Default is { loading : "Loading ...", new_node : "New node" }.

Contains strings needed for the operation of the tree so that you can localize.

Demos

Binding to an event and executing an action

 

Preventing an action

This is the same demo as above, but this time the operation will be prevented.

 

The important part is e.stopImmediatePropagation(); return false.

API

Use extra caution when working with functions prefixed with an underscore - _!
Those functions are probably for internal usage only.

jQuery.jstree.defaults

An object. Default is a collection of all included plugin's defaults.

This object is exposed so that you can apply standart settings to all future instances

jQuery.jstree.plugin ( plugin_name , plugin_data )

This function is used by developers to extend jstree (add "plugins").

jQuery.jstree.rollback ( rollback_object )

This function will roll the tree back to the state specified by the rollback object

jQuery.jstree._focused ()

Returns the currently focused tree instance on the page. If not interaction has been made - it is the last one to be created.

jQuery.jstree._reference ( needle )

Returns the tree instance for the specified needle.

jQuery.jstree._instance ( index , container , settings )

This function is used internally when creating new tree instances. Calling this function by itself is not enough to create a new instance. To create a tree use the documented method $("selector").jstree([ options ]).

jQuery.jstree._fn

This object stores all functions included by plugins. It is used internally as a prototype for all instances - do not modify manually.

.data

An object where all plugins store instance specific data. Do not modify manually.

.get_settings ()

Returns a copy of the instance's settings object - the defaults, extended by your own config object.

._get_settings ()

Returns the instance's settings object - the defaults, extended by your own config object.

.get_index ()

Returns the internal instance index.

.get_container ()

Returns the jQuery extended container node of the tree.

.get_container_ul ()

Returns the jQuery extended first UL node in the container of the tree.

._set_settings ( settings )

Replace the settings object with the settings param. Please note that not all plugins will react to the change. Unless you know exactly what you are doing you'd be better off recreating the tree with the new settings.

.init ()

This function is used internally when creating a new instance. Triggers an event, which fires after the tree is initialized, but not yet loaded.

.destroy ()

Destroys the instance - it will automatically remove all bound events in the jstree namespace & remove all classes starting with jstree-. Triggers an event.

.save_opened ()

Stores the currently open nodes before refreshing. Used internally. Triggers an event.

.reopen ( is_callback )

Reopens all the nodes stored by save_opened or set in the initially_open config option on first load. It is called multiple times while reopening nodes - the is_callback param determines if this is the first call (false) or not. Used internally. Triggers an event.

.refresh ( node )

Refreshes the tree. Saves all open nodes, and reloads and then reopens all saved nodes. Triggers an event.

.loaded ()

A dummy function, whose purpose is only to trigger the loaded event. This event is triggered once after the tree's root nodes are loaded, but before any nodes set in initially_open are opened.

.set_focus ()

Makes the current instance the focused one on the page. Triggers an event.

.unset_focus ()

If the current instance is focused this removes the focus. Triggers an event.

.is_focused ()

Returns true if the current instance is the focused one, otherwise returns false.

.lock ()

Sets the tree to a locked state - no methods can be called on that instance except for unlock and is_locked.

.unlock ()

Sets the tree to a unlocked state (the default state).

.is_locked ()

Returns true if the tree is locked, otherwise returns false.

._get_node ( node )

Return the jQuery extended LI element of the node, -1 if the container node is passed, or false otherwise.

._get_next ( node , strict )

Gets the LI element representing the node next to the passed node. Returns false on failure.

._get_prev ( node , strict )

Gets the LI element representing the node previous to the passed node. Returns false on failure.

._get_parent ( node )

Gets the LI element representing the parent of the passed node. Returns false on failure.

._get_children ( node )

Gets the LI elements representing the children of the passed node. Returns false on failure (or if the node has no children).

.get_path ( node , id_mode )

Return the path to a node, either as an array of IDs or as an array of node names.

.correct_state ( node )

Corrects closed items to leaf items, if no children are found. Used internally, triggers an event.