jsTree

https://github.com/vakata/jstree
Admin
jsTree is a jQuery plugin that provides interactive, configurable, and themable tree views with...
Tokens:86,733
Snippets:542
Trust Score:9.3
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Example: open_all, close_all, open_node

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/state.md

Example usage of open_all, close_all, and open_node methods. Expands everything, collapses a subtree instantly, and opens multiple nodes with a callback and animation duration.

```javascript
inst.open_all();                // expand everything
inst.close_all('#folder', 0);   // collapse a subtree instantly
inst.open_node(['#a', '#b'], function (node, ok) { console.log(node.id, ok); }, 200);
```

--------------------------------

### Example — drag & drop equivalent done by hand

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/manipulation.md

Example usage of move_node and copy_node methods.

```APIDOC
## Example — drag & drop equivalent done by hand

```javascript
var inst = $('#tree').jstree(true);
inst.move_node('#a', '#folder', 'inside');
inst.copy_node('#a', '#folder', 0, function (new_node, par, pos) {
    inst.edit(new_node);
});
```
```

--------------------------------

### Search plugin usage examples

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/search.md

Examples of using the search plugin: calling `inst.search()` with various arguments and configuring server-backed search with AJAX.

```javascript
var inst = $('#tree').jstree(true);
inst.search('node');                       // mark & reveal matches
inst.search('nd3', false, true);           // fuzzy + show only matches given defaults
inst.search('', false);                    // clear (empty string)

// server-backed
$('#tree').jstree({
    'core' : { 'data' : { 'url' : '/api/tree' } },
    'search' : { 'ajax' : { 'url' : '/api/tree/search' } },  // receives ?str=...&inside=...
    'plugins' : ['search']
});
```

--------------------------------

### Example massload plugin configuration with URL and function forms

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/massload.md

Example configuration for the massload plugin. The first block uses a static URL for batch loading; the second uses a function to build the URL from the ids array. Both include a per-node fallback via core.data.url and enable the massload plugin.

```javascript
$('#tree').jstree({
    'core'    : { 'data' : { 'url' : '/api/node' } },          // per-node fallback
    'massload': { 'url' : '/api/massload' },                   // receives ?ids[]=... batch
    'plugins' : ['massload']
});

// data.url function form
$('#tree').jstree({
    'core'    : { 'data' : { 'url' : '/api/node' } },
    'massload': {
        'url'  : function (ids) { return '/api/massload?ids=' + ids.join(','); }
    },
    'plugins' : ['massload']
});
```

--------------------------------

### set_theme usage examples

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/appearance.md

Shows how to call set_theme with a theme name and with autoloading the CSS file.

```javascript
inst.set_theme('default-dark');
inst.set_theme('mytheme', true);   // autoload <dir>/mytheme/style.css
```

--------------------------------

### Custom keybinding example — core.keyboard

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/selection.md

Example of customizing keyboard bindings. Shows initializing a tree with a `core.keyboard` configuration (extend the defaults rather than replacing them) and then redefining a binding at runtime via `$('#tree').jstree(true)`. Defaults are read live from `settings.core.keyboard` on each keydown.

```javascript
$('#tree').jstree({
    'core' : {
        'data' : [...],
        'keyboard' : {
            // extend the defaults rather than replacing them
        }
    }
});
// redefine one binding at runtime:
var inst = $('#tree').jstree(true);
// (defaults are read live from settings.core.keyboard on each keydown)
```

--------------------------------

### set_icon usage examples

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/appearance.md

Example calls to set_icon showing the four icon types: class-based, image path, hide, and theme default. The image path is prefixed with './' to disambiguate from a class name.

```javascript
inst.set_icon('#file_1', 'jstree-file');          // class-based
inst.set_icon('#file_1', './custom/file.png');    // image (prefixed with ./ to disambiguate)
inst.set_icon('#file_1', false);                  // hide
inst.set_icon('#file_1', true);                   // theme default
```

--------------------------------

### load_node usage example

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/loading.md

Example usage of load_node: obtains the instance with $('#tree').jstree(true), then loads the node '#folder'. The callback receives (node, ok); on success it opens the node (this is the instance), on failure it logs this.last_error().

```javascript
var inst = $('#tree').jstree(true);
inst.load_node('#folder', function (node, ok) {
    if (ok) { this.open_node(node); }     // `this` is the instance
    else    { console.error(this.last_error()); }
});
```

--------------------------------

### get_path usage example

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/nodes.md

Shows get_path with different glue and ids options: array, slash-separated string, and arrow-separated with ids.

```javascript
inst.get_path('#leaf');                 // ["Root node", "Child", "leaf"]
inst.get_path('#leaf', '/');            // "Root node/Child/leaf"
inst.get_path('#leaf', ' > ', true);    // "a1 > a2 > leaf-id"
```

--------------------------------

### Example — guarding mutations with check()

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/manipulation.md

Shows how to call check() before a mutation and handle rejection. If check() returns false, last_error() provides the reason (e.g., core_03 from check_callback). The example attempts to create a node with text 'X' as the last child of '#'.

```javascript
var inst = $('#tree').jstree(true);
if (!inst.check('create_node', { text : 'X' }, '#', 'last')) {
    console.warn('blocked:', inst.last_error());   // e.g. core_03 from check_callback
}
```

--------------------------------

### create_node usage example

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/manipulation.md

Shows how to call `create_node` on an existing instance. Creates a root-level node with a string label and a child node with an object, passing a callback that logs the created node's id.

```javascript
var inst = $('#tree').jstree(true);
var id = inst.create_node('#', 'New root node', 'last');
inst.create_node('#folder', { text : 'Child', state : { opened : true } }, 'first',
    function (n) { console.log('created', n.id); });
```

--------------------------------

### Filter nodes by name and hide/show

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/nodes.md

Example that filters nodes by name (text starting with 'tmp') and hides them, then shows them later. Uses get_json with flat:true to collect node ids, then calls hide_node and show_node on the instance.

```javascript
var ids = [];
$('#tree').jstree(true).get_json('#', { flat : true }).forEach(function (n) {
    if (n.text.indexOf('tmp') === 0) { ids.push(n.id); }
});
var inst = $('#tree').jstree(true);
inst.hide_node(ids);
// later
inst.show_node(ids);
```

--------------------------------

### Open a closed parent node using is_parent and is_closed

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/nodes.md

Example using state predicates: checks if a node is a parent and closed, then opens it.

```javascript
var node = inst.get_node('#folder');
if (inst.is_parent(node) && inst.is_closed(node)) {
    inst.open_node(node);
}
```

--------------------------------

### Clipboard usage example (cut, copy, paste)

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/manipulation.md

Shows how to use the clipboard methods on a jstree instance: cut a node, paste it into a folder, copy multiple nodes, paste at a target position, and check if the buffer holds nodes.

```javascript
var inst = $('#tree').jstree(true);
inst.cut('#a');                 // buffer: move
inst.paste('#folder');          // move #a inside #folder
inst.copy(['#b', '#c']);        // buffer: copy
inst.paste('#root-target', 0);
if (inst.can_paste()) { /* ... */ }
```

--------------------------------

### Programmatic drag-and-drop equivalent using move_node and copy_node

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/manipulation.md

Example of performing drag-and-drop operations programmatically. It gets the jsTree instance, moves a node inside a folder, then copies another node and edits the new copy. The copy_node callback receives the new node, parent, and position.

```javascript
var inst = $('#tree').jstree(true);
inst.move_node('#a', '#folder', 'inside');
inst.copy_node('#a', '#folder', 0, function (new_node, par, pos) {
    inst.edit(new_node);
});
```

--------------------------------

### Create tree with checkbox plugin and use instance

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/index.md

Example usage of `$.jstree.create` with a selector and options including `core.data` and the `checkbox` plugin. The returned instance is used directly to call `open_node('#A')`.

```javascript
var tree = $.jstree.create('#tree', {
    core : { data : ['A', 'B'] },
    plugins : ['checkbox']
});
tree.open_node('#A'); // use the returned instance directly
```

--------------------------------

### Selection getters example

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/selection.md

Shows how to get a jstree instance and use selection getters. Selects nodes '#a1' and '#a2', then get_top_selected returns the topmost selected nodes (either the ids or a shared parent) and get_selected(true) returns full node objects.

```javascript
var inst = $('#tree').jstree(true);
inst.select_node(['#a1', '#a2']);
var ids = inst.get_top_selected();      // ["#a1", "#a2"] (or a shared parent)
var nodes = inst.get_selected(true);    // full node objects
```

--------------------------------

### get_node usage example

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/nodes.md

Shows how to call get_node with different inputs: id string, as_dom flag, root selector, and undefined. Returns model object, jQuery node, root model node, or false.

```javascript
var inst = $('#tree').jstree(true);
inst.get_node('#branch');          // model object { id, text, state, children, ... }
inst.get_node('#branch', true);    // jQuery <li class="jstree-node ...">
inst.get_node('#');                // root model node
inst.get_node(undefined);          // false
```

--------------------------------

### Keyboard-style iteration with get_next_dom

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/nodes.md

Example of keyboard-style iteration: retrieves the next visible node and focuses its anchor if it exists.

```javascript
var next = inst.get_next_dom('#node_1');
if (next && next.length) { next.children('.jstree-anchor').trigger('focus'); }
```

--------------------------------

### Initialize jsTree with node_customize plugin

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/plugin-overrides.md

Example of initializing jsTree with the node_customize plugin. It sets the key to 'type' and provides a switch function for nodes with type 'special' that changes the background color of the node's DOM element.

```javascript
$('#tree').jstree({
    'core' : { 'data' : [ { 'text' : 'A', 'type' : 'special' } ] },
    'node_customize' : {
        'key' : 'type',
        'switch' : {
            'special' : function (el, node) { el.style.backgroundColor = '#ffeeee'; }
        }
    },
    'plugins' : ['node_customize']
});
```

--------------------------------

### $.vakata.storage - localStorage wrapper

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/state-plugin.md

Thin wrapper around `window.localStorage` providing `set`, `get`, and `del` methods. Can be used directly to inspect or manipulate the persisted state blob.

```javascript
$.vakata.storage = {
    set : function (key, val) { return window.localStorage.setItem(key, val); },
    get : function (key) { return window.localStorage.getItem(key); },
    del : function (key) { return window.localStorage.removeItem(key); }
};
```

--------------------------------

### Log the text of the first selected node

Source: https://github.com/vakata/jstree/wiki/Home

Extends the previous example to log the text of the first selected node instead of its ID. The two lines achieve the same result using different methods: get_selected(true)[0].text and get_node(data.selected[0]).text.

```js
$('#container').on("changed.jstree", function (e, data) {
  console.log(data.instance.get_selected(true)[0].text);
  console.log(data.instance.get_node(data.selected[0]).text);
});
```

--------------------------------

### Simplified JSON array with string children

Source: https://github.com/vakata/jstree/wiki/Home

Shows the simplified JSON format where child nodes can be plain strings instead of objects. This is equivalent to the previous array example but uses strings for leaf nodes.

```js
[ { "text" : "Root node", "children" : [ "Child node 1", "Child node 2" ] } ]
```

--------------------------------

### conditionaldeselect plugin configuration example

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/plugin-overrides.md

Example of configuring the conditionaldeselect plugin to prevent deselection of nodes with data.locked set to true. The function is called with the node and returns a boolean; if false, deselection is prevented.

```javascript
$('#tree').jstree({
    'conditionaldeselect' : function (node) { return node.data.locked !== true; },
    'plugins' : ['conditionaldeselect']
});
```

--------------------------------

### Set up a jstree and listen for the changed event

Source: https://github.com/vakata/jstree/wiki/Home

Creates a jstree instance with sample data and attaches a handler for the 'changed.jstree' event. The handler logs the selected node IDs. Note that if IDs are not specified, they are autogenerated.

```html
<div id="container"></div>
<script>
$(function() {
  $('#container').jstree({
    'core' : {
      'data' : [
        {"id" : 1, "text" : "Node 1"},
        {"id" : 2, "text" : "Node 2"},
      ]
    }
  });
  $('#container').on("changed.jstree", function (e, data) {
    console.log("The selected nodes are:");
    console.log(data.selected);
  });
});
</script>
```

--------------------------------

### Edit method usage example

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/manipulation.md

Example of calling the edit method on a jstree instance after the tree is ready. It edits the first selected node and logs the node text, success status, cancellation flag, and the original value in the callback.

```javascript
$('#tree').on('ready.jstree', function () {
    var inst = $(this).jstree(true);
    inst.edit(inst.get_selected()[0], undefined, function (node, ok, cancelled, value) {
        console.log(node.text, ok, cancelled, value);
    });
});
```

--------------------------------

### Create jsTree instance with $.jstree.create

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/index.md

Creates a new jsTree instance on the given element. Deep-merges options over `$.jstree.defaults`, builds the plugin decoration chain (calling `instance.plugin(name, options[name])` for each plugin except `core`), stores the instance in `element.data('jstree')`, then calls `init(el, options)` and returns the instance.

```javascript
$.jstree.create = function (el, options) {
    var tmp = new $.jstree.core(++instance_counter),
        opt = options;
    options = $.extend(true, {}, $.jstree.defaults, options);
    if(opt && opt.plugins) {
        options.plugins = opt.plugins;
    }
    $.each(options.plugins, function (i, k) {
        if(i !== 'core') {
            tmp = tmp.plugin(k, options[k]);
        }
    });
    $(el).data('jstree', tmp);
    tmp.init(el, options);
    return tmp;
};
```

--------------------------------

### get_path method implementation

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/nodes.md

Builds a path from the node to the root, optionally joined by a glue string and using ids instead of text. Returns false for root or missing node.

```javascript
get_path : function (obj, glue, ids) {
    obj = obj.parents ? obj : this.get_node(obj);
    if(!obj || obj.id === $.jstree.root || !obj.parents) {
        return false;
    }
    var i, j, p = [];
    p.push(ids ? obj.id : obj.text);
    for(i = 0, j = obj.parents.length; i < j; i++) {
        p.push(ids ? obj.parents[i] : this.get_text(obj.parents[i]));
    }
    p = p.reverse().slice(1);
    return glue ? p.join(glue) : p;
},
```

--------------------------------

### Initialize jsTree with state plugin and programmatic state methods

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/state-plugin.md

Initializes a jsTree with the state plugin, setting a custom storage key and a TTL of 86400000 ms (1 day). The `state_ready.jstree` event fires after restoration or immediately if no state exists. Also shows programmatic calls to `save_state()`, `restore_state()`, and `clear_state()` on the instance.

```javascript
$('#tree').jstree({
    'core' : { 'data' : { 'url' : '/api/tree' } },
    'state' : { 'key' : 'my_tree_state', 'ttl' : 86400000 },
    'plugins' : ['state']
}).on('state_ready.jstree', function (e, data) {
    console.log('state restored (or no state existed)');
});

// programmatic save/restore/clear
var inst = $('#tree').jstree(true);
inst.save_state();
inst.restore_state();
inst.clear_state();
```

--------------------------------

### destroy(keep_html) - destroy instance and example usage

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/core.md

Destroys the tree instance. Triggers `destroy.jstree`, revokes the worker object URL, and empties the container unless `keep_html` is truthy. The example shows both direct and bridge usage, including keeping the rendered HTML with `true`.

```javascript
destroy : function (keep_html) {
    this.trigger("destroy");
    if(this._wrk) {
        try {
            window.URL.revokeObjectURL(this._wrk);
            this._wrk = null;
        }
        catch (ignore) { }
    }
    if(!keep_html) { this.element.empty(); }
    this.teardown();
},
```

```javascript
var inst = $('#tree').jstree(true);
inst.destroy();          // empty DOM, unbind, remove data
// or via the bridge:
$('#tree').jstree('destroy', true); // keep the rendered HTML
```

--------------------------------

### Enable responsive theme and initialize basic tree

Source: https://github.com/vakata/jstree/blob/master/test/visual/mobile/index.html

Sets the responsive theme option to true and initializes a basic jsTree instance on the element with id 'tree'.

```javascript
$.jstree.defaults.core.themes.responsive = true; $('#tree').jstree();
```

--------------------------------

### get_container() - get jQuery container

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/core.md

Returns the jQuery container element. Always available and chainable.

```javascript
get_container : function () { return this.element; },
```

--------------------------------

### show_contextmenu(obj [, x, y, e])

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/contextmenu.md

Documentation for the show_contextmenu instance method of jsTree.

```APIDOC
## show_contextmenu(obj [, x, y, e])

### Description
Shows the context menu for a given node. If `show_at_node` is enabled or coordinates are not provided, the menu is positioned at the node's anchor. If `select_node` is enabled and the node is not selected, it is activated first. The menu items can be a plain object or a function returning one.

### Method
Instance method

### Signature
`show_contextmenu(obj [, x, y, e])`

### Parameters
- **obj** (mixed) - Required - The node.
- **x** (Number) - Optional - Document x-coordinate. Defaults to derived from the node's anchor.
- **y** (Number) - Optional - Document y-coordinate. Defaults to derived from the node's anchor.
- **e** (Object) - Optional - The triggering event.

### Returns
Returns `false` for invalid or root nodes. Otherwise, prepares and shows the menu.

### Behavior
- If `settings.contextmenu.show_at_node` is true or `x`/`y` are undefined, the menu is positioned at the node's anchor.
- If `settings.contextmenu.select_node` is true and the node is not selected, `activate_node(obj, e)` is called.
- If `settings.contextmenu.items` is a function, it is called with the node and a callback that shows the menu with the returned items.
- If the items are a plain object, the menu is shown directly.
```

--------------------------------

### show_contextmenu method

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/contextmenu.md

Shows the context menu for a node. Returns false for invalid or root nodes. If `show_at_node` is true or coordinates are undefined, positions the menu at the node's anchor. When `select_node` is enabled and the node is not selected, it activates the node first. Supports both function and plain object items.

```javascript
this.show_contextmenu = function (obj, x, y, e) {
    obj = this.get_node(obj);
    if(!obj || obj.id === $.jstree.root) { return false; }
    var s = this.settings.contextmenu,
        d = this.get_node(obj, true),
        a = d.children(".jstree-anchor"),
        o = false,
        i = false;
    if(s.show_at_node || x === undefined || y === undefined) {
        o = a.offset();
        x = o.left;
        y = o.top + this._data.core.li_height;
    }
    if(this.settings.contextmenu.select_node && !this.is_selected(obj)) {
        this.activate_node(obj, e);
    }
    i = s.items;
    if($.vakata.is_function(i)) {
        i = i.call(this, obj, function (i) { this._show_contextmenu(obj, x, y, i); }.bind(this));
    }
    if($.isPlainObject(i)) {
        this._show_contextmenu(obj, x, y, i);
    }
};
```

--------------------------------

### get_container_ul() - get main UL node

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/core.md

Internal method that returns the main `<ul class="jstree-container-ul jstree-children">` node.

```javascript
get_container_ul : function () { return this.element.children(".jstree-children").first(); },
```

--------------------------------

### Use $.jstree.reference with different inputs

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/index.md

Example calls to `$.jstree.reference` with a container id, a nested node id, and a jQuery object, each returning the corresponding instance.

```javascript
$.jstree.reference('tree');          // instance of the container #tree
$.jstree.reference('#branch');       // found via a nested node id
$.jstree.reference($('#tree'));
```

--------------------------------

### Initialize jstree with config object

Source: https://github.com/vakata/jstree/wiki/Home

General form of initializing a jstree instance with a configuration object. Each key corresponds to a plugin, with special keys `core` and `plugins`.

```javascript
$("#tree").jstree({ /* config object goes here */ });
```

--------------------------------

### Sample plugin lifecycle contract (src/sample.js)

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/plugins.md

Shows the canonical structure of a jsTree plugin, overriding core methods with delegation to `parent`. Always call `parent.init` and `parent.bind` first, `parent.unbind` last, and `parent.teardown` first (plugins usually clean their own DOM first). Extend the state object in `get_state`, consume and delete your part in `set_state` (returning false to recurse), and augment output in `get_json`.

```javascript
$.jstree.plugins.sample = function (options, parent) {
    this.init = function (el, options) {
        parent.init.call(this, el, options);   // always call parent first
    };
    this.bind = function () {
        parent.bind.call(this);                // call parent first
    };
    this.unbind = function () {
        parent.unbind.call(this);              // call parent last
    };
    this.teardown = function () {
        parent.teardown.call(this);            // call parent (plugin decorators usually clean their own DOM first)
    };
    this.get_state = function () {
        var state = parent.get_state.call(this);   // extend the state object
        state.sample = { 'var' : 'val' };
        return state;
    };
    this.set_state = function (state, callback) {
        if(parent.set_state.call(this, state, callback)) {
            if(state.sample) {
                // consume your part, delete the key, recurse and return false
                delete state.sample;
                this.set_state(state, callback);
                return false;
            }
            return true;
        }
        return false;
    };
    this.get_json = function (obj, options, flat) {
        var tmp = parent.get_json.call(this, obj, options, flat);  // augment output
        return tmp;
    };
};
```

--------------------------------

### Get instance with $.jstree.reference

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/index.md

Returns the jsTree instance owning the given node/element, or `null` if not found. Accepts a DOM element, jQuery object, id string, selector, or id of a nested node.

```javascript
$.jstree.reference = function (needle) { ... };
```

--------------------------------

### open_all([obj, animation, original_obj])

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/state.md

Recursively opens all nodes under a given object.

```APIDOC
## open_all([obj, animation, original_obj])

### Description
Recursively opens all nodes under the given object (default root). When the node is not in the DOM, it sets `state.opened = true` for every loadable descendant and triggers `open_all.jstree`; otherwise it opens each closed node and continues recursively.

### Method
`open_all`

### Parameters
- `obj` (mixed) - Optional - Node to start from. Defaults to root.
- `animation` (Number | false) - Optional - Duration in ms; `false` disables animation.
- `original_obj` (mixed) - Optional - Original object passed to the function.

### Example
```javascript
inst.open_all();
```
```

--------------------------------

### open_node(obj [, callback, animation])

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/state.md

Opens a node or an array of nodes, loading it if necessary.

```APIDOC
## open_node(obj [, callback, animation])

### Description
Opens a node or an array of nodes. If the node is not loaded, it is loaded first. If the node is already open, the callback is called with status `false`. Triggers `before_open.jstree`, `open_node.jstree`, and `after_open.jstree` events.

### Method
`open_node`

### Parameters
- `obj` (mixed | Array) - Required - Node(s) to open.
- `callback` (Function) - Optional - Called with `(node, status)`; `status=false` when the node was already open or the load failed.
- `animation` (Number | false) - Optional - Duration in ms; `false` disables animation. Defaults to `core.animation`.

### Returns
- `true` for dispatched arrays, `false` for invalid input, `undefined` for single nodes.

### Example
```javascript
inst.open_node('#node', function (node, ok) { console.log(node.id, ok); }, 200);
```
```

--------------------------------

### Set node options with data-jstree attribute

Source: https://github.com/vakata/jstree/wiki/Home

HTML snippet showing how to add options to a node using the data-jstree attribute. The example sets 'selected' and 'opened' to true. Note the quotes around the JSON value.

```html
<li data-jstree='{ "selected" : true, "opened" : true }'>Root node ...
```

--------------------------------

### Initialize tree with dark theme and plugins

Source: https://github.com/vakata/jstree/blob/master/test/visual/mobile/index.html

Initializes a jsTree instance with plugins and the 'default-dark' theme, along with a custom type for 'file' nodes.

```javascript
$('#dark').jstree({ plugins : ["checkbox","sort","types","wholerow"], "core" : { "themes" : { "name" : "default-dark" } }, "types" : { "file" : { "icon" : "jstree-file" } } });
```

--------------------------------

### Define $.jstree.core constructor

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/index.md

Private constructor for the core instance, only created through `$.jstree.create`. Initializes internal state including `_data.core` with theme settings, selected nodes, last error, working flag, worker queue, and focused node. Documented for consumers who introspect `_data.core` (e.g., `instance._data.core.selected`).

```javascript
$.jstree.core = function (id) {
    this._id = id;
    this._cnt = 0;
    this._wrk = null;
    this._data = {
        core : {
            themes : { name : false, dots : false, icons : false, ellipsis : false },
            selected : [],
            last_error : {},
            working : false,
            worker_queue : [],
            focused : null
        }
    };
};
```

--------------------------------

### get_theme method definition

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/appearance.md

Returns the current theme name. Returns false before init, 'default' after.

```javascript
get_theme : function () { return this._data.core.themes.name; },
```

--------------------------------

### get_next_dom(obj [, strict])

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/nodes.md

Returns the next visible node below the given starting node in reading order as a jQuery collection, or false if no such node exists. The strict parameter, when true, restricts the search to sibling nodes only.

```APIDOC
## `get_next_dom(obj [, strict])`

### Description
Returns the next visible node below `obj` in reading order as a jQuery collection, or `false` if none.

### Method
`get_next_dom` (JavaScript method on jsTree instance)

### Signature
```javascript
get_next_dom : function (obj, strict) { ... }
```

### Parameters
- `obj` (mixed) - Required - Starting node.
- `strict` (Boolean) - Optional, default `false` - Only consider sibling nodes.

### Return Value
- jQuery collection of the next visible node, or `false`.

### Example
```javascript
var next = inst.get_next_dom('#node_1');
if (next && next.length) { next.children('.jstree-anchor').trigger('focus'); }
```
```

--------------------------------

### init(el, options) - initialize tree instance

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/core.md

Internal method that initializes the tree instance. It sets up the in-memory model, element, settings, and events, adds ARIA role and RTL class, stores the original HTML and measured row height, creates the prototype node, and triggers `init.jstree`, `loading.jstree`, and `load_node($.jstree.root)`. Called automatically by `$.jstree.create`.

```javascript
init : function (el, options) { ... }
```

--------------------------------

### set_theme(theme_name [, theme_url])

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/appearance.md

Sets the theme for the tree instance. Optionally loads the theme's CSS file if a URL is provided or if theme_url is true, in which case it constructs the URL from the configured themes directory.

```APIDOC
## set_theme(theme_name [, theme_url])

### Description
Sets the theme for the tree instance. Optionally loads the theme's CSS file if a URL is provided or if theme_url is true, in which case it constructs the URL from the configured themes directory.

### Method
set_theme

### Signature
`set_theme(theme_name, theme_url)`

### Parameters
- `theme_name` (String) - Required - Theme name; applied as the class `jstree-<name>`.
- `theme_url` (String | Boolean | false) - Optional - CSS url; `true` autoloads `<dir>/<name>/style.css` (see `core.themes.dir`); `false`/omitted assumes you included the CSS.

### Returns
Returns `false` for an empty name, otherwise `undefined`. CSS files are loaded at most once (module-level `themes_loaded` array). Triggers `set_theme.jstree { theme }`.

### Example
```javascript
inst.set_theme('default-dark');
inst.set_theme('mytheme', true);   // autoload <dir>/mytheme/style.css
```
```

--------------------------------

### open_all method

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/state.md

Recursively opens obj (default root). When the node is not in the DOM it sets state.opened to true for every loadable descendant and immediately triggers open_all.jstree; otherwise it opens each closed node and continues recursively, triggering open_all.jstree once no closed nodes remain.

```javascript
open_all : function (obj, animation, original_obj) { ... }
```

--------------------------------

### Persisted state JSON structure

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/state-plugin.md

Example of the JSON payload persisted by the state plugin. The `state` object contains the core tree state (open, loaded, scroll, selected) and any plugin-specific keys. `ttl` is `false` (never expires) and `sec` is the timestamp of the save.

```json
{ "state" : { "core" : { "open" : [...], "loaded" : [...], "scroll" : { "left" : 0, "top" : 0 }, "selected" : [...] } }, "ttl" : false, "sec" : 1697800000000 }
```

--------------------------------

### Create custom conditionalselect plugin

Source: https://github.com/vakata/jstree/wiki/Home

Shows how to create a custom plugin by defining a default config, adding functions to jstree, and overriding existing ones while retaining the ability to call the overridden function. The example defines a conditionalselect plugin that prevents selecting the root node.

```javascript
// conditional select
(function ($, undefined) {
  "use strict";
  $.jstree.defaults.conditionalselect = function () { return true; };
  $.jstree.plugins.conditionalselect = function (options, parent) {
    this.activate_node = function (obj, e) {
      if(this.settings.conditionalselect.call(this, this.get_node(obj))) {
        parent.activate_node.call(this, obj, e);
      }
    };
  };
})(jQuery);
$("#tree").jstree({
  "conditionalselect" : function (node) {
    return node.text === "Root node" ? false : true;
  },
  "plugins" : ["conditionalselect"]
});
```

--------------------------------

### Configure and use jsTree types plugin

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/types.md

Initializes a jsTree instance with the 'types' plugin, defining 'default', 'folder', and 'file' types with icons and constraints. Then retrieves the instance and demonstrates get_type, get_rules, and set_type methods.

```javascript
$('#tree').jstree({
    'core' : {
        'data' : [
            { 'id' : 'docs', 'text' : 'Docs', 'type' : 'folder' },
            { 'id' : 'readme', 'text' : 'README', 'type' : 'file', 'parent' : '#', 'children' : [] }
        ]
    },
    'types' : {
        'default' : { 'icon' : 'jstree-file' },
        'folder'  : { 'icon' : 'jstree-folder', 'max_children' : 5, 'max_depth' : 2, 'valid_children' : ['file', 'folder'] },
        'file'    : { 'icon' : 'jstree-file', 'valid_children' : -1 }
    },
    'plugins' : ['types']
});

var inst = $('#tree').jstree(true);
inst.get_type('#docs');          // "folder"
inst.get_rules('#docs');         // { type: 'folder', icon: 'jstree-folder', max_children: 5, max_depth: 2, valid_children: ['file','folder'] }
inst.set_type('#readme', 'folder');
```

--------------------------------

### set_icon(obj, icon) method

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/appearance.md

Sets the icon for a node or array of nodes. Accepts a class name (no '/' or '.'), an image path (contains '/' or '.'), true/null/'' for the theme default, or false to hide. Returns true on success, false for invalid/root nodes, and true for arrays.

```javascript
set_icon : function (obj, icon) {
    var t1, t2, dom, old;
    if($.vakata.is_array(obj)) {
        obj = obj.slice();
        for(t1 = 0, t2 = obj.length; t1 < t2; t1++) {
            this.set_icon(obj[t1], icon);
        }
        return true;
    }
    obj = this.get_node(obj);
    if(!obj || obj.id === $.jstree.root) { return false; }
    old = obj.icon;
    obj.icon = icon === true || icon === null || icon === undefined || icon === '' ? true : icon;
    dom = this.get_node(obj, true).children(".jstree-anchor").children(".jstree-themeicon");
    if(icon === false) {
        dom.removeClass('jstree-themeicon-custom ' + old).css("background","").removeAttr("rel");
        this.hide_icon(obj);
    }
    else if(icon === true || icon === null || icon === undefined || icon === '') {
        dom.removeClass('jstree-themeicon-custom ' + old).css("background","").removeAttr("rel");
        if(old === false) { this.show_icon(obj); }
    }
    else if(icon.indexOf("/") === -1 && icon.indexOf(".") === -1) {
        dom.removeClass(old).css("background","");
        dom.addClass(icon + ' jstree-themeicon-custom').attr("rel",icon);
        if(old === false) { this.show_icon(obj); }
    }
    else {
        dom.removeClass(old).css("background","");
        dom.addClass('jstree-themeicon-custom').css("background", "url('" + icon + "') center center no-repeat").attr("rel",icon);
        if(old === false) { this.show_icon(obj); }
    }
    return true;
},
```

--------------------------------

### Loading data via URL with jstree

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/loading.md

Shows the normal usage flow for loading data via a URL. The initial GET is `/api/tree/children` with `node.id === '#'`, and every expansion triggers `/api/tree/children?id=...` for that node. The response can be a JSON array/object (nested or flat) or an HTML string of `<ul><li>…</li></ul>`.

```javascript
$('#tree').jstree({
    'core' : {
        'data' : {
            'url' : '/api/tree/children',
            'data' : function (node) { return { 'id' : node.id }; }
        }
    }
});
// The initial GET is /api/tree/children (node.id === '#'),
// every expansion triggers /api/tree/children?id=... for that node.
```

--------------------------------

### Use $.fn.jstree bridge for creation, method calls, and instance retrieval

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/index.md

Shows common usage patterns of the $.fn.jstree bridge: creating an instance with options, calling a method with arguments, retrieving the instance, and accessing an instance from a nested element.

```javascript
// create
$('#tree').jstree({ 'core' : { 'data' : [ 'Root 1', 'Root 2' ] } });
// call a method with arguments; return value propagates
var id = $('#tree').jstree('create_node', '#', 'New node', 'last');
// get the instance
var inst = $('#tree').jstree(true);
// get an instance from a nested element and chain a call
$('#branch_1').jstree().select_node('#branch_1');
```

--------------------------------

### show_all([skip_redraw])

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/nodes.md

Shows all nodes in the tree. Returns an array of shown node ids.

```APIDOC
## show_all([skip_redraw])

### Description
Shows all nodes in the tree. Returns an array of shown node ids.

### Method
`show_all`

### Parameters
- `skip_redraw` (Boolean) - Optional - Internal flag to skip redraw.

### Return Value
- Array of shown node ids.

### Events
- `show_all.jstree` with `{ nodes }`

### Notes
- Forces a full redraw when applied (sets `_model.force_full_redraw`).
```

--------------------------------

### Load jsTree data via AJAX with server response

Source: https://github.com/vakata/jstree/wiki/Home

Configures jsTree to load data via AJAX by setting `core.data` to a jQuery AJAX config object. The server must return JSON in the required format; set `dataType` to "json" if proper JSON headers are not supplied. The example shows the expected server response with unique node IDs.

```html
<div id="container"></div>
<script>
$(function() {
  $('#container').jstree({
    'core' : {
      'data' : {
        "url" : "//www.jstree.com/fiddle/",
        "dataType" : "json" // needed only if you do not supply JSON headers
      }
    }
  });
});
</script>
```

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

--------------------------------

### $.jstree.create(el [, options])

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/index.md

Creates a new jsTree instance on the given element or selector. It deep-merges options over defaults, applies plugins, stores the instance in the element's data, and initializes the tree.

```APIDOC
## $.jstree.create(el [, options])

### Description
Creates a new jsTree instance on the specified element or selector. The options are deep-merged over `$.jstree.defaults`, plugins are applied, and the instance is stored in the element's data before initialization.

### Method
`$.jstree.create`

### Parameters
#### Parameters
- **el** (DOMElement | jQuery | String) - Required - Element or selector to instantiate the tree on.
- **options** (Object) - Optional - Instance options, deep-merged over `$.jstree.defaults`.

### Request Example
```javascript
var tree = $.jstree.create('#tree', {
    core : { data : ['A', 'B'] },
    plugins : ['checkbox']
});
tree.open_node('#A'); // use the returned instance directly
```

### Response
#### Returns
- **jsTree instance** - The newly created tree instance.

#### Response Example
```javascript
// Returns the new jsTree instance
var tree = $.jstree.create('#tree');
```
```

--------------------------------

### plugin(deco, opts) method

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/plugins.md

Internal plugin method (src/jstree.js:542). It looks up the plugin by name, seeds this._data[deco] for the plugin's bookkeeping, and returns a new instance of the plugin with the given options. If the plugin is not registered, it returns the same instance.

```javascript
plugin : function (deco, opts) {
    var Child = $.jstree.plugins[deco];
    if(Child) {
        this._data[deco] = {};
        Child.prototype = this;
        return new Child(opts, this);
    }
    return this;
},
```

--------------------------------

### jsTree with node state and icon options

Source: https://github.com/vakata/jstree/wiki/Home

Demonstrates node options: `state` (opened, selected, disabled), `icon` (CSS class), and `children`. The `state` object controls initial node state; `icon` can be a path or class name.

```html
<div id="container"></div>
<script>
$(function() {
  $('#container').jstree({
    'core' : {
      'data' : [
          {
              "text" : "Root node",
              "state" : {"opened" : true },
              "children" : [
                  {
                    "text" : "Child node 1",
                    "state" : { "selected" : true },
                    "icon" : "glyphicon glyphicon-flash"
                  },
                  { "text" : "Child node 2", "state" : { "disabled" : true } }
              ]
        }
      ]
    }
  });
});
</script>
```

--------------------------------

### Initialize tree with plugins and types

Source: https://github.com/vakata/jstree/blob/master/test/visual/mobile/index.html

Initializes a jsTree instance with checkbox, sort, types, and wholerow plugins, and defines a custom type for 'file' nodes.

```javascript
$('#full').jstree({ plugins : ["checkbox","sort","types","wholerow"], "types" : { "file" : { "icon" : "jstree-file" } } });
```

--------------------------------

### get_state() - Build state object

Source: https://github.com/vakata/jstree/blob/master/_autodocs/api-reference/state.md

Internal method that builds a state object with core keys: open, loaded, scroll (left/top), and selected. It iterates the model data, skipping the root node, and only pushes loaded nodes when settings.core.loaded_state is true. Plugins contribute their own keys to the returned state.

```javascript
get_state : function () {
    var state = {
        'core' : {
            'open' : [],
            'loaded' : [],
            'scroll' : { 'left' : this.element.scrollLeft(), 'top' : this.element.scrollTop() },
            'selected' : []
        }
    }, i;
    for(i in this._model.data) {
        if(this._model.data.hasOwnProperty(i)) {
            if(i !== $.jstree.root) {
                if(this._model.data[i].state.loaded && this.settings.core.loaded_state) {
                    state.core.loaded.push(i);
                }
                if(this._model.data[i].state.opened) {
                    state.core.open.push(i);
                }
                if(this._model.data[i].state.selected) {
                    state.core.selected.push(i);
                }
            }
        }
    }
    return state;
},
```

--------------------------------

### Data format demo initialization

Source: https://github.com/vakata/jstree/blob/master/demo/basic/index.html

Initializes jsTree with data that includes state properties like 'opened', 'selected', 'disabled', and custom icons.

```javascript
// data format demo
$('#frmt').jstree({
  'core' : {
    'data' : [
      { "text" : "Root node", "state" : { "opened" : true }, "children" : [
        { "text" : "Child node 1", "state" : { "selected" : true }, "icon" : "jstree-file" },
        { "text" : "Child node 2", "state" : { "disabled" : true } }
      ]}
    ]
  }
});
```
Tokens:
Raw