holds all jstree related functions and variables, including the actual class and methods to create, access and manipulate instances.
$.jstree.version
specifies the jstree version in use
$.jstree.defaults
holds all the default options used when creating new instances
$.jstree.defaults.plugins
configure which plugins will be active on an instance. Should be an array of strings, where each element is a plugin name. The default is []
$.jstree.plugins
stores all loaded jstree plugins (used internally)
$.jstree.create (el [, options])
creates a jstree instance
el
DOMElementjQueryString the element to create the instance on, can be jQuery extended or a selector
options
Object options for this instance (extends `$.jstree.defaults`)
Returns
jsTree the new instance
$.jstree.destroy ()
remove all traces of jstree from the DOM and destroy all instances
$.jstree.core (id)private
the jstree class constructor, used only internally
id
Number this instance's index
$.jstree.reference (needle)
get a reference to an existing instance
needle
DOMElementjQueryString
Returns
jsTreenull the instance or `null` if not found
Examples
// provided a container with an ID of "tree", and a nested node with an ID of "branch"
// all of there will return the same instance
$.jstree.reference('tree');
$.jstree.reference('#tree');
$.jstree.reference($('#tree'));
$.jstree.reference(document.getElementByID('tree'));
$.jstree.reference('branch');
$.jstree.reference('#branch');
$.jstree.reference($('#branch'));
$.jstree.reference(document.getElementByID('branch'));
$().jstree([arg])
Create an instance, get an instance or invoke a command on a instance.
If there is no instance associated with the current node a new one is created and arg is used to extend $.jstree.defaults for this new instance. There would be no return value (chaining is not broken).
If there is an existing instance and arg is a string the command specified by arg is executed on the instance, with any additional arguments passed to the function. If the function returns a value it will be returned (chaining could break depending on function).
If there is an existing instance and arg is not a string the instance itself is returned (similar to $.jstree.reference).
In any other case - nothing is returned and chaining is not broken.
arg
StringObject
Returns
Mixed
Examples
$('#tree1').jstree(); // creates an instance
$('#tree2').jstree({ plugins : [] }); // create an instance with some options
$('#tree1').jstree('open_node', '#branch_1'); // call a method on an existing instance, passing additional arguments
$('#tree2').jstree(); // get an existing instance (or create an instance)
$('#tree2').jstree(true); // get an existing instance (will not create new instance)
$('#branch_1').jstree().select_node('#branch_1'); // get an instance (using a nested element and call a method)
If left as false the HTML inside the jstree container element is used to populate the tree (that should be an unordered list with list items).
You can also pass in a HTML string or a JSON array here.
It is possible to pass in a standard jQuery-like AJAX config and jstree will automatically determine if the response is JSON or HTML and use that to populate the tree. In addition to the standard jQuery ajax options here you can suppy functions for data and url, the functions will be run in the current instance's scope and a param will be passed indicating which node is being loaded, the return value of those functions will be used.
The last option is to specify a function, that function will receive the node being loaded as argument and a second param which is a function which should be called with the result.
configure the various strings used throughout the tree
You can use an object where the key is the string you need to replace and the value is your replacement. Another option is to specify a function which will be called with an argument of the needed string and should return the replacement. If left as false no replacement is made.
determines what happens when a user tries to modify the structure of the tree If left as false all operations like create, rename, delete, move or copy are prevented. You can set this to true to allow all interactions or use a function to have better control.
Examples
$('#tree').jstree({
'core' : {
'check_callback' : function (operation, node, node_parent, node_position, more) {
// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
// in case of 'rename_node' node_position is filled with the new node name
return operation === 'rename_node' ? true : false;
}
}
});
$.jstree.defaults.core.error
a callback called with a single object parameter in the instance's scope when something goes wrong (operation prevented, ajax failed, etc)
$.jstree.defaults.core.animation
the open / close animation duration in milliseconds - set this to false to disable the animation (default is 200)
$.jstree.defaults.core.multiple
a boolean indicating if multiple nodes can be selected
$.jstree.defaults.core.themes
theme configuration object
$.jstree.defaults.core.themes.name
the name of the theme to use (if left as false the default theme is used)
$.jstree.defaults.core.themes.url
the URL of the theme's CSS file, leave this as false if you have manually included the theme CSS (recommended). You can set this to true too which will try to autoload the theme.
$.jstree.defaults.core.themes.dir
the location of all jstree themes - only used if url is set to true
$.jstree.defaults.core.themes.dots
a boolean indicating if connecting dots are shown
$.jstree.defaults.core.themes.icons
a boolean indicating if node icons are shown
$.jstree.defaults.core.themes.stripes
a boolean indicating if the tree background is striped
$.jstree.defaults.core.themes.variant
a string (or boolean false) specifying the theme variant to use (if the theme supports variants)
$.jstree.defaults.core.themes.responsive
a boolean specifying if a reponsive version of the theme should kick in on smaller screens (if the theme supports it). Defaults to false.
$.jstree.defaults.core.expand_selected_onload
if left as true all parents of all selected nodes will be opened once the tree loads (so that all selected nodes are visible to the user)
$.jstree.defaults.core.worker
if left as true web workers will be used to parse incoming JSON data where possible, so that the UI will not be blocked by large requests. Workers are however about 30% slower. Defaults to true
$.jstree.defaults.core.force_text
Force node text to plain text (and escape HTML). Defaults to false
$.jstree.defaults.core.dblclick_toggle
Should the node should be toggled if the text is double clicked . Defaults to true
plugin (deco [, opts])private
used to decorate an instance with a plugin. Used internally.
deco
String the plugin to decorate with
opts
Object options for the plugin
Returns
jsTree
init (el, optons)private
initialize the instance. Used internally.
el
DOMElementjQueryString the element we are transforming
triggered after the loading text is shown and before loading starts
destroy ()
destroy an instance
keep_html
Boolean if not set to `true` the container will be emptied, otherwise the current DOM elements will be kept intact
teardown ()private
part of the destroying of an instance. Used internally.
bind ()private
bind all events. Used internally.
loaded.jstree Event
triggered after the root node is loaded for the first time
ready.jstree Event
triggered after all nodes are finished loading
unbind ()private
part of the destroying of an instance. Used internally.
trigger (ev [, data])private
trigger an event. Used internally.
ev
String the name of the event to trigger
data
Object additional data to pass with the event
get_container ()
returns the jQuery extended instance container
Returns
jQuery
get_container_ul ()private
returns the jQuery extended main UL node inside the instance container. Used internally.
Returns
jQuery
get_string (key)private
gets string replacements (localization). Used internally.
key
String
Returns
String
_firstChild (dom)private
gets the first child of a DOM node. Used internally.
dom
DOMElement
Returns
DOMElement
_nextSibling (dom)private
gets the next sibling of a DOM node. Used internally.
dom
DOMElement
Returns
DOMElement
_previousSibling (dom)private
gets the previous sibling of a DOM node. Used internally.
dom
DOMElement
Returns
DOMElement
get_node (obj [, as_dom])
get the JSON representation of a node (or the actual jQuery extended DOM node) by using any input (child DOM element, ID string, selector, etc)
obj
mixed
as_dom
Boolean
Returns
ObjectjQuery
get_path (obj [, glue, ids])
get the path to a node, either consisting of node texts, or of node IDs, optionally glued together (otherwise an array)
obj
mixed the node
glue
String if you want the path as a string - pass the glue here (for example '/'), if a falsy value is supplied here, an array is returned
ids
Boolean if set to true build the path using ID, otherwise node text is used
Returns
mixed
get_next_dom (obj [, strict])
get the next visible node that is below the obj node. If strict is set to true only sibling nodes are returned.
obj
mixed
strict
Boolean
Returns
jQuery
get_prev_dom (obj [, strict])
get the previous visible node that is above the obj node. If strict is set to true only sibling nodes are returned.
obj
mixed
strict
Boolean
Returns
jQuery
get_parent (obj)
get the parent ID of a node
obj
mixed
Returns
String
get_children_dom (obj)
get a jQuery collection of all the children of a node (node must be rendered)
obj
mixed
Returns
jQuery
is_parent (obj)
checks if a node has children
obj
mixed
Returns
Boolean
is_loaded (obj)
checks if a node is loaded (its children are available)
obj
mixed
Returns
Boolean
is_loading (obj)
check if a node is currently loading (fetching children)
obj
mixed
Returns
Boolean
is_open (obj)
check if a node is opened
obj
mixed
Returns
Boolean
is_closed (obj)
check if a node is in a closed state
obj
mixed
Returns
Boolean
is_leaf (obj)
check if a node has no children
obj
mixed
Returns
Boolean
load_node (obj [, callback])
loads a node (fetches its children using the core.data setting). Multiple nodes can be passed to by using an array.
obj
mixed
callback
function a function to be executed once loading is complete, the function is executed in the instance's scope and receives two arguments - the node and a boolean status
Returns
Boolean
Triggers
load_node.jstree
load_node.jstree Event
triggered after a node is loaded
node
Object the node that was loading
status
Boolean was the node loaded successfully
_load_nodes (nodes [, callback])private
load an array of nodes (will also load unavailable nodes as soon as the appear in the structure). Used internally.
nodes
array
callback
function a function to be executed once loading is complete, the function is executed in the instance's scope and receives one argument - the array passed to _load_nodes
load_all ([obj, callback])
loads all unloaded nodes
obj
mixed the node to load recursively, omit to load all nodes in the tree
callback
function a function to be executed once loading all the nodes is complete,
Triggers
load_all.jstree
load_all.jstree Event
triggered after a load_all call completes
node
Object the recursively loaded node
_load_node (obj [, callback])private
handles the actual loading of a node. Used only internally.
obj
mixed
callback
function a function to be executed once loading is complete, the function is executed in the instance's scope and receives one argument - a boolean status
Returns
Boolean
_node_changed (obj [, callback])private
adds a node to the list of nodes to redraw. Used only internally.
obj
mixed
_append_html_data (obj, data)private
appends HTML content to the tree. Used internally.
obj
mixed the node to append to
data
String the HTML string to parse and append
Triggers
model.jstree changed.jstree
model.jstree Event
triggered when new data is inserted to the tree model
nodes
Array an array of node IDs
parent
String the parent ID of the nodes
_append_json_data (obj, data)private
appends JSON content to the tree. Used internally.
obj
mixed the node to append to
data
String the JSON object to parse and append
force_processing
Boolean internal param - do not set
Triggers
model.jstree changed.jstree
_parse_model_from_html (d [, p, ps])private
parses a node from a jQuery object and appends them to the in memory tree model. Used internally.
d
jQuery the jQuery object to parse
p
String the parent ID
ps
Array list of all parents
Returns
String the ID of the object added to the model
_parse_model_from_flat_json (d [, p, ps])private
parses a node from a JSON object (used when dealing with flat data, which has no nesting of children, but has id and parent properties) and appends it to the in memory tree model. Used internally.
d
Object the JSON object to parse
p
String the parent ID
ps
Array list of all parents
Returns
String the ID of the object added to the model
_parse_model_from_json (d [, p, ps])private
parses a node from a JSON object and appends it to the in memory tree model. Used internally.
d
Object the JSON object to parse
p
String the parent ID
ps
Array list of all parents
Returns
String the ID of the object added to the model
_redraw ()private
redraws all nodes that need to be redrawn. Used internally.
Triggers
redraw.jstree
redraw.jstree Event
triggered after nodes are redrawn
nodes
array the redrawn nodes
redraw ([full])
redraws all nodes that need to be redrawn or optionally - the whole tree
full
Boolean if set to `true` all nodes are redrawn.
draw_children (node)private
redraws a single node's children. Used internally.
triggered when a node is about to be opened (if the node is supposed to be in the DOM, it will be, but it won't be visible yet)
node
Object the opened node
open_node.jstree Event
triggered when a node is opened (if there is an animation it will not be completed yet)
node
Object the opened node
after_open.jstree Event
triggered when a node is opened and the animation is complete
node
Object the opened node
_open_to (obj)private
opens every parent of a node (node should be loaded)
obj
mixed the node to reveal
close_node (obj [, animation])
closes a node, hiding its children
obj
mixed the node to close
animation
Number the animation duration in milliseconds when closing the node (overrides the `core.animation` setting). Use `false` for no animation.
Triggers
close_node.jstree after_close.jstree
close_node.jstree Event
triggered when a node is closed (if there is an animation it will not be complete yet)
node
Object the closed node
after_close.jstree Event
triggered when a node is closed and the animation is complete
node
Object the closed node
toggle_node (obj)
toggles a node - closing it if it is open, opening it if it is closed
obj
mixed the node to toggle
open_all ([obj, animation, original_obj])
opens all nodes within a node (or the tree), revaling their children. If the node is not loaded it will be loaded and opened once ready.
obj
mixed the node to open recursively, omit to open all nodes in the tree
animation
Number the animation duration in milliseconds when opening the nodes, the default is no animation
reference
jQuery to the node that started the process (internal use)
Triggers
open_all.jstree
open_all.jstree Event
triggered when an open_all call completes
node
Object the opened node
close_all ([obj, animation])
closes all nodes within a node (or the tree), revaling their children
obj
mixed the node to close recursively, omit to close all nodes in the tree
animation
Number the animation duration in milliseconds when closing the nodes, the default is no animation
Triggers
close_all.jstree
close_all.jstree Event
triggered when an close_all call completes
node
Object the closed node
is_disabled (obj)
checks if a node is disabled (not selectable)
obj
mixed
Returns
Boolean
enable_node (obj)
enables a node - so that it can be selected
obj
mixed the node to enable
Triggers
enable_node.jstree
enable_node.jstree Event
triggered when an node is enabled
node
Object the enabled node
disable_node (obj)
disables a node - so that it can not be selected
obj
mixed the node to disable
Triggers
disable_node.jstree
disable_node.jstree Event
triggered when an node is disabled
node
Object the disabled node
is_hidden (obj)
determines if a node is hidden
obj
mixed the node
hide_node (obj)
hides a node - it is still in the structure but will not be visible
obj
mixed the node to hide
redraw
Boolean internal parameter controlling if redraw is called
Triggers
hide_node.jstree
hide_node.jstree Event
triggered when an node is hidden
node
Object the hidden node
show_node (obj)
shows a node
obj
mixed the node to show
skip_redraw
Boolean internal parameter controlling if redraw is called
Triggers
show_node.jstree
show_node.jstree Event
triggered when an node is shown
node
Object the shown node
hide_all ()
hides all nodes
Triggers
hide_all.jstree
hide_all.jstree Event
triggered when all nodes are hidden
nodes
Array the IDs of all hidden nodes
show_all ()
shows all nodes
Triggers
show_all.jstree
show_all.jstree Event
triggered when all nodes are shown
nodes
Array the IDs of all shown nodes
activate_node (obj, e)private
called when a node is selected by the user. Used internally.
obj
mixed the node
e
Object the related event
Triggers
activate_node.jstree changed.jstree
activate_node.jstree Event
triggered when an node is clicked or intercated with by the user
node
Object
event
Object the ooriginal event (if any) which triggered the call (may be an empty object)
hover_node (obj)private
applies the hover state on a node, called when a node is hovered by the user. Used internally.
obj
mixed
Triggers
hover_node.jstree
hover_node.jstree Event
triggered when an node is hovered
node
Object
dehover_node (obj)private
removes the hover state from a nodecalled when a node is no longer hovered by the user. Used internally.
obj
mixed
Triggers
dehover_node.jstree
dehover_node.jstree Event
triggered when an node is no longer hovered
node
Object
select_node (obj [, supress_event, prevent_open])
select a node
obj
mixed an array can be used to select multiple nodes
supress_event
Boolean if set to `true` the `changed.jstree` event won't be triggered
prevent_open
Boolean if set to `true` parents of the selected node won't be opened
Triggers
select_node.jstree changed.jstree
select_node.jstree Event
triggered when an node is selected
node
Object
selected
Array the current selection
event
Object the event (if any) that triggered this select_node
changed.jstree Event
triggered when selection changes
node
Object
action
Object the action that caused the selection to change
selected
Array the current selection
event
Object the event (if any) that triggered this changed event
deselect_node (obj [, supress_event])
deselect a node
obj
mixed an array can be used to deselect multiple nodes
supress_event
Boolean if set to `true` the `changed.jstree` event won't be triggered
Triggers
deselect_node.jstree changed.jstree
deselect_node.jstree Event
triggered when an node is deselected
node
Object
selected
Array the current selection
event
Object the event (if any) that triggered this deselect_node
select_all ([supress_event])
select all nodes in the tree
supress_event
Boolean if set to `true` the `changed.jstree` event won't be triggered
Triggers
select_all.jstree changed.jstree
select_all.jstree Event
triggered when all nodes are selected
selected
Array the current selection
deselect_all ([supress_event])
deselect all selected nodes
supress_event
Boolean if set to `true` the `changed.jstree` event won't be triggered
Triggers
deselect_all.jstree changed.jstree
deselect_all.jstree Event
triggered when all nodes are deselected
node
Object the previous selection
selected
Array the current selection
is_selected (obj)
checks if a node is selected
obj
mixed
Returns
Boolean
get_selected ([full])
get an array of all selected nodes
full
mixed if set to `true` the returned array will consist of the full node objects, otherwise - only IDs will be returned
Returns
Array
get_top_selected ([full])
get an array of all top level selected nodes (ignoring children of selected nodes)
full
mixed if set to `true` the returned array will consist of the full node objects, otherwise - only IDs will be returned
Returns
Array
get_bottom_selected ([full])
get an array of all bottom level selected nodes (ignoring selected parents)
full
mixed if set to `true` the returned array will consist of the full node objects, otherwise - only IDs will be returned
Returns
Array
get_state ()private
gets the current state of the tree so that it can be restored later with set_state(state). Used internally.
Returns
Object
set_state (state [, callback])private
sets the state of the tree. Used internally.
state
Object the state to restore. Keep in mind this object is passed by reference and jstree will modify it.
callback
Function an optional function to execute once the state is restored.
Triggers
set_state.jstree
set_state.jstree Event
triggered when a set_state call completes
refresh ()
refreshes the tree - all nodes are reloaded with calls to load_node.
skip_loading
Boolean an option to skip showing the loading indicator
forget_state
Mixed if set to `true` state will not be reapplied, if set to a function (receiving the current state as argument) the result of that function will be used as state
Triggers
refresh.jstree
refresh.jstree Event
triggered when a refresh call completes
refresh_node (obj)
refreshes a node in the tree (reload its children) all opened nodes inside that node are reloaded with calls to load_node.
obj
mixed the node
Triggers
refresh_node.jstree
refresh_node.jstree Event
triggered when a node is refreshed
node
Object - the refreshed node
nodes
Array - an array of the IDs of the nodes that were reloaded
set_id (obj, id)
set (change) the ID of a node
obj
mixed the node
id
String the new ID
Returns
Boolean
Triggers
set_id.jstree
set_id.jstree Event
triggered when a node id value is changed
node
Object
old
String the old id
get_text (obj)
get the text value of a node
obj
mixed the node
Returns
String
set_text (obj, val)private
set the text value of a node. Used internally, please use rename_node(obj, val).
obj
mixed the node, you can pass an array to set the text on multiple nodes
val
String the new text value
Returns
Boolean
Triggers
set_text.jstree
set_text.jstree Event
triggered when a node text value is changed
obj
Object
text
String the new value
get_json ([obj, options])
gets a JSON representation of a node (or the whole tree)
mixed the parent node (to create a root node use either "#" (string) or `null`)
node
mixed the data for the new node (a valid JSON object, or a simple string with the name)
pos
mixed the index at which to insert the node, "first" and "last" are also supported, default is "last"
callback
Function a function to be called once the node is created
is_loaded
Boolean internal argument indicating if the parent node was succesfully loaded
Returns
String the ID of the newly create node
Triggers
model.jstree create_node.jstree
create_node.jstree Event
triggered when a node is created
node
Object
parent
String the parent's ID
position
Number the position of the new node among the parent's children
rename_node (obj, val)
set the text value of a node
obj
mixed the node, you can pass an array to rename multiple nodes to the same name
val
String the new text value
Returns
Boolean
Triggers
rename_node.jstree
rename_node.jstree Event
triggered when a node is renamed
node
Object
text
String the new value
old
String the old value
delete_node (obj)
remove a node
obj
mixed the node, you can pass an array to delete multiple nodes
Returns
Boolean
Triggers
delete_node.jstree changed.jstree
delete_node.jstree Event
triggered when a node is deleted
node
Object
parent
String the parent's ID
check (chk, obj, par, pos)private
check if an operation is premitted on the tree. Used internally.
chk
String the operation to check, can be "create_node", "rename_node", "delete_node", "copy_node" or "move_node"
obj
mixed the node
par
mixed the parent
pos
mixed the position to insert at, or if "rename_node" - the new name
more
mixed some various additional information, for example if a "move_node" operations is triggered by DND this will be the hovered node
Returns
Boolean
last_error ()
get the last error
Returns
Object
move_node (obj, par [, pos, callback, is_loaded])
move a node to a new parent
obj
mixed the node to move, pass an array to move multiple nodes
par
mixed the new parent
pos
mixed the position to insert at (besides integer values, "first" and "last" are supported, as well as "before" and "after"), defaults to integer `0`
callback
function a function to call once the move is completed, receives 3 arguments - the node, the new parent and the position
is_loaded
Boolean internal parameter indicating if the parent node has been loaded
skip_redraw
Boolean internal parameter indicating if the tree should be redrawn
instance
Boolean internal parameter indicating if the node comes from another instance
Triggers
move_node.jstree
move_node.jstree Event
triggered when a node is moved
node
Object
parent
String the parent's ID
position
Number the position of the node among the parent's children
old_parent
String the old parent of the node
old_position
Number the old position of the node
is_multi
Boolean do the node and new parent belong to different instances
old_instance
jsTree the instance the node came from
new_instance
jsTree the instance of the new parent
copy_node (obj, par [, pos, callback, is_loaded])
copy a node to a new parent
obj
mixed the node to copy, pass an array to copy multiple nodes
par
mixed the new parent
pos
mixed the position to insert at (besides integer values, "first" and "last" are supported, as well as "before" and "after"), defaults to integer `0`
callback
function a function to call once the move is completed, receives 3 arguments - the node, the new parent and the position
is_loaded
Boolean internal parameter indicating if the parent node has been loaded
skip_redraw
Boolean internal parameter indicating if the tree should be redrawn
instance
Boolean internal parameter indicating if the node comes from another instance
Triggers
model.jstree copy_node.jstree
copy_node.jstree Event
triggered when a node is copied
node
Object the copied node
original
Object the original node
parent
String the parent's ID
position
Number the position of the node among the parent's children
old_parent
String the old parent of the node
old_position
Number the position of the original node
is_multi
Boolean do the node and new parent belong to different instances
old_instance
jsTree the instance the node came from
new_instance
jsTree the instance of the new parent
cut (obj)
cut a node (a later call to paste(obj) would move the node)
obj
mixed multiple objects can be passed using an array
Triggers
cut.jstree
cut.jstree Event
triggered when nodes are added to the buffer for moving
node
Array
copy (obj)
copy a node (a later call to paste(obj) would copy the node)
obj
mixed multiple objects can be passed using an array
Triggers
copy.jstree
copy.jstree Event
triggered when nodes are added to the buffer for copying
node
Array
get_buffer ()
get the current buffer (any nodes that are waiting for a paste operation)
Returns
Object an object consisting of `mode` ("copy_node" or "move_node"), `node` (an array of objects) and `inst` (the instance)
can_paste ()
check if there is something in the buffer to paste
Returns
Boolean
paste (obj [, pos])
copy or move the previously cut or copied nodes to a new parent
obj
mixed the new parent
pos
mixed the position to insert at (besides integer, "first" and "last" are supported), defaults to integer `0`
Triggers
paste.jstree
paste.jstree Event
triggered when paste is invoked
parent
String the ID of the receiving node
node
Array the nodes in the buffer
mode
String the performed operation - "copy_node" or "move_node"
clear_buffer ()
clear the buffer of previously copied or cut nodes
Triggers
clear_buffer.jstree
clear_buffer.jstree Event
triggered when the copy / cut buffer is cleared
edit (obj [, default_text, callback])
put a node in edit mode (input field to rename the node)
obj
mixed
default_text
String the text to populate the input with (if omitted or set to a non-string value the node's text value is used)
callback
Function a function to be called once the text box is blurred, it is called in the instance's scope and receives the node, a status parameter (true if the rename is successful, false otherwise) and a boolean indicating if the user cancelled the edit. You can access the node's title using .text
set_theme (theme_name [, theme_url])
changes the theme
theme_name
String the name of the new theme to apply
theme_url
mixed the location of the CSS file for this theme. Omit or set to `false` if you manually included the file. Set to `true` to autoload from the `core.themes.dir` directory.
Triggers
set_theme.jstree
set_theme.jstree Event
triggered when a theme is set
theme
String the new theme
get_theme ()
gets the name of the currently applied theme name
Returns
String
set_theme_variant (variant_name)
changes the theme variant (if the theme has variants)
variant_name
StringBoolean the variant to apply (if `false` is used the current variant is removed)
get_theme ()
gets the name of the currently applied theme variant
Returns
String
show_stripes ()
shows a striped background on the container (if the theme supports it)
hide_stripes ()
hides the striped background on the container
toggle_stripes ()
toggles the striped background on the container
show_dots ()
shows the connecting dots (if the theme supports it)
hide_dots ()
hides the connecting dots
toggle_dots ()
toggles the connecting dots
show_icons ()
show the node icons
hide_icons ()
hide the node icons
toggle_icons ()
toggle the node icons
set_icon (obj, icon)
set the node icon for a node
obj
mixed
icon
String the new icon - can be a path to an icon or a className, if using an image that is in the current directory use a `./` prefix, otherwise it will be detected as a class
get_icon (obj)
get the node icon for a node
obj
mixed
Returns
String
hide_icon (obj)
hide the icon on an individual node
obj
mixed
show_icon (obj)
show the icon on an individual node
obj
mixed
Changed plugin
This plugin adds more information to the changed.jstree event. The new data is contained in the changed event data property, and contains a lists of selected and deselected nodes.
changed.jstree Event changed plugin
triggered when selection changes (the "changed" plugin enhances the original event with more data)
node
Object
action
Object the action that caused the selection to change
selected
Array the current selection
changed
Object an object containing two properties `selected` and `deselected` - both arrays of node IDs, which were selected or deselected since the last changed event
event
Object the event (if any) that triggered this changed event
Checkbox plugin
This plugin renders checkbox icons in front of each node, making multiple selection much easier. It also supports tri-state behavior, meaning that if a node has a few of its children checked it will be rendered as undetermined, and state will be propagated up.
This setting controls how cascading and undetermined nodes are applied. If 'up' is in the string - cascading up is enabled, if 'down' is in the string - cascading down is enabled, if 'undetermined' is in the string - undetermined nodes will be used. If three_state is set to true this setting is automatically set to 'up+down+undetermined'. Defaults to ''.
This setting controls if checkbox are bound to the general tree selection or to an internal array maintained by the checkbox plugin. Defaults to true, only set to false if you know exactly what you are doing.
_undetermined () checkbox pluginprivate
set the undetermined state where and if necessary. Used internally.
show_checkboxes () checkbox plugin
show the node checkbox icons
hide_checkboxes () checkbox plugin
hide the node checkbox icons
toggle_checkboxes () checkbox plugin
toggle the node icons
is_undetermined (obj)
checks if a node is in an undetermined state
obj
mixed
Returns
Boolean
disable_checkbox (obj) checkbox plugin
disable a node's checkbox
obj
mixed an array can be used too
Triggers
disable_checkbox.jstree
disable_checkbox.jstree Event checkbox plugin
triggered when an node's checkbox is disabled
node
Object
disable_checkbox (obj) checkbox plugin
enable a node's checkbox
obj
mixed an array can be used too
Triggers
enable_checkbox.jstree
enable_checkbox.jstree Event checkbox plugin
triggered when an node's checkbox is enabled
node
Object
check_node (obj) checkbox plugin
check a node (only if tie_selection in checkbox settings is false, otherwise select_node will be called internally)
obj
mixed an array can be used to check multiple nodes
Triggers
check_node.jstree
check_node.jstree Event checkbox plugin
triggered when an node is checked (only if tie_selection in checkbox settings is false)
node
Object
selected
Array the current selection
event
Object the event (if any) that triggered this check_node
uncheck_node (obj) checkbox plugin
uncheck a node (only if tie_selection in checkbox settings is false, otherwise deselect_node will be called internally)
obj
mixed an array can be used to uncheck multiple nodes
Triggers
uncheck_node.jstree
uncheck_node.jstree Event checkbox plugin
triggered when an node is unchecked (only if tie_selection in checkbox settings is false)
node
Object
selected
Array the current selection
event
Object the event (if any) that triggered this uncheck_node
check_all () checkbox plugin
checks all nodes in the tree (only if tie_selection in checkbox settings is false, otherwise select_all will be called internally)
Triggers
check_all.jstree changed.jstree
check_all.jstree Event checkbox plugin
triggered when all nodes are checked (only if tie_selection in checkbox settings is false)
selected
Array the current selection
uncheck_all () checkbox plugin
uncheck all checked nodes (only if tie_selection in checkbox settings is false, otherwise deselect_all will be called internally)
Triggers
uncheck_all.jstree
uncheck_all.jstree Event checkbox plugin
triggered when all nodes are unchecked (only if tie_selection in checkbox settings is false)
node
Object the previous selection
selected
Array the current selection
is_checked (obj) checkbox plugin
checks if a node is checked (if tie_selection is on in the settings this function will return the same as is_selected)
obj
mixed
Returns
Boolean
get_checked ([full]) checkbox plugin
get an array of all checked nodes (if tie_selection is on in the settings this function will return the same as get_selected)
full
mixed if set to `true` the returned array will consist of the full node objects, otherwise - only IDs will be returned
Returns
Array
get_top_checked ([full]) checkbox plugin
get an array of all top level checked nodes (ignoring children of checked nodes) (if tie_selection is on in the settings this function will return the same as get_top_selected)
full
mixed if set to `true` the returned array will consist of the full node objects, otherwise - only IDs will be returned
Returns
Array
get_bottom_checked ([full]) checkbox plugin
get an array of all bottom level checked nodes (ignoring selected parents) (if tie_selection is on in the settings this function will return the same as get_bottom_selected)
full
mixed if set to `true` the returned array will consist of the full node objects, otherwise - only IDs will be returned
Returns
Array
Conditionalselect plugin
This plugin allows defining a callback to allow or deny node selection by user input (activate node method).
a callback (function) which is invoked in the instance's scope and receives two arguments - the node and the event that triggered the activate_node call. Returning false prevents working with the node, returning true allows invoking activate_node. Defaults to returning true.
Contextmenu plugin
Shows a context menu when a node is right-clicked.
an object of actions, or a function that accepts a node and a callback function and calls the callback function with an object of actions available for that node (you can also return the items too).
Each action consists of a key (a unique name) and a value which is an object with the following properties (only label and action are required). Once a menu item is activated the action function will be invoked with an object containing the following keys: item - the contextmenu item definition as seen below, reference - the DOM node that was used (the tree node), element - the contextmenu DOM element, position - an object with x/y properties indicating the position of the menu.
separator_before - a boolean indicating if there should be a separator before this item
separator_after - a boolean indicating if there should be a separator after this item
_disabled - a boolean indicating if this action should be disabled
label - a string - the name of the action (could be a function returning a string)
title - a string - an optional tooltip for the item
action - a function to be executed if this item is chosen, the function will receive
icon - a string, can be a path to an icon or a className, if using an image that is in the current directory use a ./ prefix, otherwise it will be detected as a class
shortcut - keyCode which will trigger the action if the menu is open (for example 113 for rename, which equals F2)
shortcut_label - shortcut label (like for example F2 for rename)
submenu - an object with the same structure as $.jstree.defaults.contextmenu.items which can be used to create a submenu - each key will be rendered as a separate option in a submenu that will appear once the current item is hovered
Number the x-coordinate relative to the document to show the menu at
y
Number the y-coordinate relative to the document to show the menu at
e
Object the event if available that triggered the contextmenu
Triggers
show_contextmenu.jstree
_show_contextmenu (obj, x, y, i) contextmenu pluginprivate
show the prepared context menu for a node
obj
mixed the node
x
Number the x-coordinate relative to the document to show the menu at
y
Number the y-coordinate relative to the document to show the menu at
i
Number the object of items to show
Triggers
show_contextmenu.jstree
show_contextmenu.jstree Event contextmenu plugin
triggered when the contextmenu is shown for a node
node
Object the node
x
Number the x-coordinate of the menu relative to the document
y
Number the y-coordinate of the menu relative to the document
context_parse.vakata Event contextmenu plugin
triggered on the document when the contextmenu is parsed (HTML is built)
reference
jQuery the element that was right clicked
element
jQuery the DOM element of the menu itself
position
Object the x & y coordinates of the menu
context_show.vakata Event contextmenu plugin
triggered on the document when the contextmenu is shown
reference
jQuery the element that was right clicked
element
jQuery the DOM element of the menu itself
position
Object the x & y coordinates of the menu
context_hide.vakata Event contextmenu plugin
triggered on the document when the contextmenu is hidden
reference
jQuery the element that was right clicked
element
jQuery the DOM element of the menu itself
position
Object the x & y coordinates of the menu
Drag'n'drop plugin
Enables dragging and dropping of nodes in the tree, resulting in a move or copy operations.
$.jstree.defaults.dnd dnd plugin
stores all defaults for the drag'n'drop plugin
$.jstree.defaults.dnd.copy dnd plugin
a boolean indicating if a copy should be possible while dragging (by pressint the meta key or Ctrl). Defaults to true.
$.jstree.defaults.dnd.open_timeout dnd plugin
a number indicating how long a node should remain hovered while dragging to be opened. Defaults to 500.
$.jstree.defaults.dnd.is_draggable dnd plugin
a function invoked each time a node is about to be dragged, invoked in the tree's scope and receives the nodes about to be dragged as an argument (array) and the event that started the drag - return false to prevent dragging
a boolean indicating if checks should constantly be made while the user is dragging the node (as opposed to checking only on drop), default is true
$.jstree.defaults.dnd.always_copy dnd plugin
a boolean indicating if nodes from this tree should only be copied with dnd (as opposed to moved), default is false
$.jstree.defaults.dnd.inside_pos dnd plugin
when dropping a node "inside", this setting indicates the position the node should go to - it can be an integer or a string: "first" (same as 0) or "last", default is 0
$.jstree.defaults.dnd.drag_selection dnd plugin
when starting the drag on a node that is selected this setting controls if all selected nodes are dragged or only the single node, default is true, which means all selected nodes are dragged when the drag is started on a selected node
$.jstree.defaults.dnd.touch dnd plugin
controls whether dnd works on touch devices. If left as boolean true dnd will work the same as in desktop browsers, which in some cases may impair scrolling. If set to boolean false dnd will not work on touch devices. There is a special third option - string "selected" which means only selected nodes can be dragged on touch devices.
controls whether items can be dropped anywhere on the node, not just on the anchor, by default only the node anchor is a valid drop target. Works best with the wholerow plugin. If enabled on mobile depending on the interface it might be hard for the user to cancel the drop, since the whole tree container will be a valid drop target.
controls whether a drag can be initiated from any part of the node and not just the text/icon part, works best with the wholerow plugin. Keep in mind it can cause problems with tree scrolling on mobile depending on the interface - in that case set the touch option to "selected".
$.jstree.defaults.dnd.use_html5 dnd plugin
controls whether use HTML5 dnd api instead of classical. That will allow better integration of dnd events with other HTML5 controls.
dnd_scroll.vakata Event dnd plugin
triggered on the document when a drag causes an element to scroll
data
Mixed any data supplied with the call to $.vakata.dnd.start
element
DOM the DOM element being dragged
helper
jQuery the helper shown next to the mouse
event
jQuery the element that is scrolling
dnd_start.vakata Event dnd plugin
triggered on the document when a drag starts
data
Mixed any data supplied with the call to $.vakata.dnd.start
element
DOM the DOM element being dragged
helper
jQuery the helper shown next to the mouse
event
Object the event that caused the start (probably mousemove)
dnd_move.vakata Event dnd plugin
triggered on the document when a drag is in progress
data
Mixed any data supplied with the call to $.vakata.dnd.start
element
DOM the DOM element being dragged
helper
jQuery the helper shown next to the mouse
event
Object the event that caused this to trigger (most likely mousemove)
dnd_stop.vakata Event dnd plugin
triggered on the document when a drag stops (the dragged element is dropped)
data
Mixed any data supplied with the call to $.vakata.dnd.start
element
DOM the DOM element being dragged
helper
jQuery the helper shown next to the mouse
event
Object the event that caused the stop
Massload plugin
Adds massload functionality to jsTree, so that multiple nodes can be loaded in a single request (only useful with lazy loading).
$.jstree.defaults.massload massload plugin
massload configuration
It is possible to set this to a standard jQuery-like AJAX config. In addition to the standard jQuery ajax options here you can supply functions for data and url, the functions will be run in the current instance's scope and a param will be passed indicating which node IDs need to be loaded, the return value of those functions will be used.
You can also set this to a function, that function will receive the node IDs being loaded as argument and a second param which is a function (callback) which should be called with the result.
Both the AJAX and the function approach rely on the same return value - an object where the keys are the node IDs, and the value is the children of that node as an array.
a jQuery-like AJAX config, which jstree uses if a server should be queried for results.
A str (which is the search string) parameter will be added with the request, an optional inside parameter will be added if the search is limited to a node id. The expected result is a JSON array with nodes that need to be opened so that matching nodes will be revealed. Leave this setting as false to not query the server. You can also set this to a function, which will be invoked in the instance's scope and receive 3 parameters - the search string, the callback to call with the array of nodes to load, and the optional node ID to limit the search to
$.jstree.defaults.search.fuzzy search plugin
Indicates if the search should be fuzzy or not (should chnd3 match child node 3). Default is false.
Indicates if the tree should be filtered (by default) to show only matching nodes (keep in mind this can be a heavy on large trees in old browsers). This setting can be changed at runtime when calling the search method. Default is false.
Indicates if the children of matched element are shown (when show_only_matches is true) This setting can be changed at runtime when calling the search method. Default is false.
If set to a function it wil be called in the instance's scope with two arguments - search string and node (where node will be every node in the structure, so use with caution). If the function returns a truthy value the node will be considered a match (it might not be displayed if search_only_leaves is set to true and the node is not a leaf). Default is false.
search (str [, skip_async]) search plugin
used to search the tree nodes for a given string
str
String the search string
skip_async
Boolean if set to true server will not be queried even if configured
show_only_matches
Boolean if set to true only matching nodes will be shown (keep in mind this can be very slow on large trees or old browsers)
inside
mixed an optional node to whose children to limit the search
append
Boolean if set to true the results of this search are appended to the previous search
Triggers
search.jstree
search.jstree Event search plugin
triggered after search is complete
nodes
jQuery a jQuery collection of matching nodes
str
String the search string
res
Array a collection of objects represeing the matching nodes
clear_search () search plugin
used to clear the last search (removes classes and shows all nodes if filtering is on)
Triggers
clear_search.jstree
clear_search.jstree Event search plugin
triggered after search is complete
nodes
jQuery a jQuery collection of matching nodes (the result from the last search)
str
String the search string (the last search string)
res
Array a collection of objects represeing the matching nodes (the result from the last search)
Sort plugin
Automatically sorts all siblings in the tree according to a sorting function.
$.jstree.defaults.sort sort plugin
the settings function used to sort the nodes. It is executed in the tree's context, accepts two nodes as arguments and should return 1 or -1.
sort (obj [, deep]) sort pluginprivate
used to sort a node's children
obj
mixed the node
deep
Boolean if set to `true` nodes are sorted recursively.
Triggers
search.jstree
State plugin
Saves the state of the tree (selected nodes, opened nodes) on the user's computer using available options (localStorage, cookies, etc)
$.jstree.defaults.state state plugin
stores all defaults for the state plugin
$.jstree.defaults.state.key state plugin
A string for the key to use when saving the current tree (change if using multiple trees in your project). Defaults to jstree.
$.jstree.defaults.state.events state plugin
A space separated list of events that trigger a state save. Defaults to changed.jstree open_node.jstree close_node.jstree.
$.jstree.defaults.state.ttl state plugin
Time in milliseconds after which the state will expire. Defaults to 'false' meaning - no expire.
$.jstree.defaults.state.filter state plugin
A function that will be executed prior to restoring state with one argument - the state object. Can be used to clear unwanted parts of the state.
state_ready.jstree Event state plugin
triggered when the state plugin is finished restoring the state (and immediately after ready if there is no state to restore).
save_state () state plugin
save the state
restore_state () state plugin
restore the state from the user's computer
clear_state () state plugin
clear the state on the user's computer
Types plugin
Makes it possible to add predefined types for groups of nodes, which make it possible to easily control nesting rules and icon for each group.
$.jstree.defaults.types types plugin
An object storing all types as key value pairs, where the key is the type name and the value is an object that could contain following keys (all optional).
max_children the maximum number of immediate children this node type can have. Do not specify or set to -1 for unlimited.
max_depth the maximum number of nesting this node type can have. A value of 1 would mean that the node can have children, but no grandchildren. Do not specify or set to -1 for unlimited.
valid_children an array of node type strings, that nodes of this type can have as children. Do not specify or set to -1 for no limits.
icon a string - can be a path to an icon or a className, if using an image that is in the current directory use a ./ prefix, otherwise it will be detected as a class. Omit to use the default icon from your theme.
li_attr an object of values which will be used to add HTML attributes on the resulting LI DOM node (merged with the node's own data)
a_attr an object of values which will be used to add HTML attributes on the resulting A DOM node (merged with the node's own data)
There are two predefined types:
# represents the root of the tree, for example max_children would control the maximum number of root nodes.
default represents the default node - any settings here will be applied to all nodes that do not have a type specified.
get_rules (obj) types plugin
used to retrieve the type settings object for a node
obj
mixed the node to find the rules for
Returns
Object
get_type (obj [, rules]) types plugin
used to retrieve the type string or settings object for a node
obj
mixed the node to find the rules for
rules
Boolean if set to `true` instead of a string the settings object will be returned
Returns
StringObject
set_type (obj, type) types plugin
used to change a node's type
obj
mixed the node to change
type
String the new type
Unique plugin
Enforces that no nodes with the same name can coexist as siblings.
Indicates if the comparison should be case sensitive. Default is false.
$.jstree.defaults.unique.duplicate unique plugin
A callback executed in the instance's scope when a new node is created and the name is already taken, the two arguments are the conflicting name and the counter. The default will produce results like New node (2).
Wholerow plugin
Makes each node appear block level. Making selection easier. May cause slow down for large trees in old browsers.