jsTree Documentation

jsTree is a jQuery plugin that provides interactive trees. It is highly configurable, themable, and extendable. Key features include:

• Data Sources: Supports both HTML and JSON data sources, as well as AJAX and asynchronous callback loading.
• Interactivity: Supports drag & drop, keyboard navigation, and inline editing (create, edit, and delete nodes).
• UI Components: Includes tri-state checkboxes and customizable node types.
• Search: Features fuzzy searching.
• Responsiveness: Includes a built-in mobile theme for responsive design and works correctly in both content-box and border-box CSS box models.
• Integration: Uses jQuery's event system for familiar callback binding and can be loaded as an AMD module.

The core.data option determines how the tree is populated. It supports several formats:

• false: Uses the existing HTML structure inside the container (unordered lists/list items).
• JSON Array: A direct array of node objects.
• AJAX Configuration: A standard jQuery AJAX object. jsTree will automatically detect if the response is JSON or HTML.
• Function: A function that receives (obj, callback). The callback is called with the data to be used.

The core.check_callback option allows you to intercept and validate operations that modify the tree structure. If the function returns false, the operation is prevented.

Supported operations: 'create_node', 'rename_node', 'delete_node', 'move_node', 'copy_node', or 'edit'.

The core.themes object controls the visual appearance of the tree. Key options include:

• name: The name of the theme (set to false for default).
• url: The URL of the theme's CSS file (true attempts to autoload).
• dir: The location of all jstree themes (used if url is true).
• dots: Boolean to show/hide connecting dots.
• icons: Boolean to show/hide node icons.
• ellipsis: Boolean to show node ellipsis (requires fixed width).
• stripes: Boolean to enable striped background.
• variant: A string or boolean specifying the theme variant.
• responsive: Boolean to enable responsive theme behavior on small screens.

The following methods allow you to query the current state of a node:

• is_parent(obj): Returns true if the node has children or if its children are not yet loaded.
• is_loaded(obj): Returns true if the node's children are currently available.
• is_loading(obj): Returns true if the node is currently fetching its children.
• is_open(obj): Returns true if the node is in an opened state.
• is_closed(obj): Returns true if the node is a parent but is currently closed.
• is_leaf(obj): Returns true if the node has no children.

Reloads the entire tree, clearing existing data and re-triggering node loading.

• refresh(skip_loading, forget_state):
  • skip_loading: Boolean. If true, skips showing the loading indicator.
  • forget_state: If true, the current state is discarded. If a function, it receives the current state and should return the new state to be applied.

Triggers refresh.jstree.

Control node selection programmatically.

• select_node(obj, [supress_event], [prevent_open], [e]): Selects a node or an array of nodes.
  • supress_event: If true, the changed.jstree event will not trigger.
  • prevent_open: If true, parents of the selected node will not be opened.
  • Triggers select_node.jstree and changed.jstree.
• deselect_node(obj, [supress_event], [e]): Deselects a node or an array of nodes.
  • supress_event: If true, the changed.jstree event will not trigger.
  • Triggers deselect_node.jstree and changed.jstree.
• select_all([supress_event]): Selects every node in the tree. Triggers select_all.jstree and changed.jstree.
• deselect_all([supress_event]): Deselects all nodes in the tree. Triggers deselect_all.jstree and changed.jstree.
• is_selected(obj): Returns true if the node is selected.

The $.fn.jstree plugin allows you to call instance methods directly using the jQuery syntax: $(el).jstree('method_name', arg1, arg2, ...).

• If the element has an instance and you pass a string, it executes that method.
• If the element has no instance and you pass an object or no arguments, it creates a new instance.
• If you pass true, it returns the existing instance without creating a new one.

You can programmatically set, get, show, or hide icons for specific nodes.

Set a node icon

Use set_icon(obj, icon).

• obj: The node object or ID.
• icon:
  • A string representing a CSS class name (e.g., 'fa fa-folder').
  • A string representing a path to an image (e.g., './icons/folder.png').
  • true, null, undefined, or '' to use the default theme icon.
  • false to hide the icon.

Get a node icon

Use get_icon(obj) to return the icon value of a node. Returns false if the node is the root or doesn't exist.

Use set_id(obj, id) to change the unique identifier of a node. This updates the internal model, parent/child relationships, and the DOM element's ID.

Parameters:

• obj: The node to modify.
• id: The new ID (converted to a String).

Returns: Boolean indicating success.

Events:

• set_id.jstree: Triggered when a node ID changes. Passes { "node": node, "new": new_id, "old": old_id }.