jQuery tree plugin for creating interactive tree components with drag & drop, inline editing, checkboxes, search, and customizable node types
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Essential tree functionality including initialization, node manipulation, selection, and basic operations. The core provides all fundamental tree operations and serves as the foundation for plugin extensions.
Main entry point for creating and interacting with jsTree instances.
/**
* Initialize jsTree on selected elements or call methods on existing instances
* @param options - Configuration object for new instances
* @returns jQuery object for chaining
*/
$(selector).jstree(options?: object): jQuery;
/**
* Call methods on existing jsTree instances
* @param method - Method name to call
* @param args - Arguments to pass to the method
* @returns Method return value
*/
$(selector).jstree(method: string, ...args: any[]): any;
/**
* Get reference to jsTree instance without calling methods
* @param getinstance - Must be true to get instance
* @returns jsTree instance or false if not found
*/
$(selector).jstree(getinstance: true): jsTree|false;Usage Examples:
// Initialize with options
$("#tree").jstree({
"core": {
"data": ["Root", "Child 1", "Child 2"]
},
"plugins": ["checkbox", "search"]
});
// Call method on existing instance
$("#tree").jstree("select_node", "node_id");
// Get instance reference
const tree = $("#tree").jstree(true);
if (tree) {
tree.select_node("node_id");
}Global jsTree methods for instance management and utilities.
/**
* Create a jsTree instance programmatically
* @param el - Element, jQuery object, or selector
* @param options - Configuration options
* @returns New jsTree instance
*/
$.jstree.create(el: Element|jQuery|string, options?: object): jsTree;
/**
* Destroy all jsTree instances globally
*/
$.jstree.destroy(): void;
/**
* Get reference to existing jsTree instance
* @param needle - Element, jQuery object, selector, or instance ID
* @returns jsTree instance or null if not found
*/
$.jstree.reference(needle: Element|jQuery|string): jsTree|null;Methods for finding and navigating between nodes in the tree.
/**
* Get node object by ID, element, or selector
* @param obj - Node identifier
* @param as_dom - Return DOM element instead of node object
* @returns Node object or DOM element
*/
get_node(obj: string|object|Element, as_dom?: boolean): object|Element|false;
/**
* Get the tree container element
* @returns Tree container jQuery object
*/
get_container(): jQuery;
/**
* Get the main UL element of the tree
* @returns Main UL jQuery object
*/
get_container_ul(): jQuery;
/**
* Get path from root to specified node
* @param obj - Target node
* @param glue - String to join path segments (default: "/")
* @param ids - Use node IDs instead of text (default: false)
* @returns Path string or array
*/
get_path(obj: string|object, glue?: string, ids?: boolean): string|Array<string>;
/**
* Get next visible node in DOM order
* @param obj - Current node
* @param strict - Only return nodes at same level
* @returns Next node object or false
*/
get_next_dom(obj: string|object, strict?: boolean): object|false;
/**
* Get previous visible node in DOM order
* @param obj - Current node
* @param strict - Only return nodes at same level
* @returns Previous node object or false
*/
get_prev_dom(obj: string|object, strict?: boolean): object|false;
/**
* Get parent node
* @param obj - Child node
* @returns Parent node object or false if root
*/
get_parent(obj: string|object): object|false;
/**
* Get children DOM elements
* @param obj - Parent node
* @returns jQuery object containing child elements
*/
get_children_dom(obj: string|object): jQuery;Methods for checking various states and properties of nodes.
/**
* Check if node has children
* @param obj - Node to check
* @returns True if node has children
*/
is_parent(obj: string|object): boolean;
/**
* Check if node's children are loaded
* @param obj - Node to check
* @returns True if children are loaded
*/
is_loaded(obj: string|object): boolean;
/**
* Check if node is currently loading
* @param obj - Node to check
* @returns True if loading
*/
is_loading(obj: string|object): boolean;
/**
* Check if node is open/expanded
* @param obj - Node to check
* @returns True if open
*/
is_open(obj: string|object): boolean;
/**
* Check if node is closed/collapsed
* @param obj - Node to check
* @returns True if closed
*/
is_closed(obj: string|object): boolean;
/**
* Check if node is a leaf (has no children)
* @param obj - Node to check
* @returns True if leaf node
*/
is_leaf(obj: string|object): boolean;
/**
* Check if node is disabled
* @param obj - Node to check
* @returns True if disabled
*/
is_disabled(obj: string|object): boolean;
/**
* Check if node is hidden
* @param obj - Node to check
* @returns True if hidden
*/
is_hidden(obj: string|object): boolean;
/**
* Check if node is selected
* @param obj - Node to check
* @returns True if selected
*/
is_selected(obj: string|object): boolean;Methods for loading node data and managing tree state.
/**
* Load node children via AJAX or callback
* @param obj - Node to load children for
* @param callback - Function to call when loading completes
* @returns True if loading started
*/
load_node(obj: string|object, callback?: function): boolean;
/**
* Load all descendants of a node
* @param obj - Node to load descendants for (default: root)
* @param callback - Function to call when loading completes
* @returns True if loading started
*/
load_all(obj?: string|object, callback?: function): boolean;
/**
* Refresh the entire tree or specific node
* @param skip_loading - Don't trigger loading events
* @param forget_state - Don't restore previous state
* @returns True if refresh started
*/
refresh(skip_loading?: boolean, forget_state?: boolean): boolean;
/**
* Refresh a specific node
* @param obj - Node to refresh
* @returns True if refresh started
*/
refresh_node(obj: string|object): boolean;
/**
* Export tree data as JSON
* @param obj - Node to export (default: all)
* @param options - Export options
* @param flat - Return flat array instead of nested
* @returns JSON representation of tree data
*/
get_json(obj?: string|object, options?: object, flat?: boolean): Array<object>|object;
/**
* Get current tree state (selected, opened nodes, etc.)
* @returns State object
*/
get_state(): object;
/**
* Restore tree state
* @param state - State object to restore
* @param callback - Function to call when restoration completes
*/
set_state(state: object, callback?: function): void;Methods for creating, modifying, and removing nodes.
/**
* Create a new node
* @param parent - Parent node ID or object (# for root)
* @param node - Node data object or string
* @param position - Position to insert ("first", "last", number, or "before"/"after" existing node)
* @param callback - Function to call when creation completes
* @param is_loaded - Skip loading parent node children
* @returns New node ID or false on failure
*/
create_node(parent: string|object, node: object|string, position?: string|number, callback?: function, is_loaded?: boolean): string|false;
/**
* Rename a node
* @param obj - Node to rename
* @param text - New text for the node
* @returns True on success
*/
rename_node(obj: string|object, text: string): boolean;
/**
* Delete a node and all its children
* @param obj - Node to delete
* @returns True on success
*/
delete_node(obj: string|object): boolean;
/**
* Move a node to a new parent/position
* @param obj - Node to move
* @param parent - New parent node
* @param position - Position in new parent
* @param callback - Function to call when move completes
* @param is_loaded - Skip loading parent children
* @param skip_redraw - Don't redraw after move
* @param origin - Internal parameter for tracking move origin
* @returns True on success
*/
move_node(obj: string|object, parent: string|object, position?: string|number, callback?: function, is_loaded?: boolean, skip_redraw?: boolean, origin?: object): boolean;
/**
* Copy a node to a new parent/position
* @param obj - Node to copy
* @param parent - New parent node
* @param position - Position in new parent
* @param callback - Function to call when copy completes
* @param is_loaded - Skip loading parent children
* @param skip_redraw - Don't redraw after copy
* @param origin - Internal parameter for tracking copy origin
* @returns New node ID or false on failure
*/
copy_node(obj: string|object, parent: string|object, position?: string|number, callback?: function, is_loaded?: boolean, skip_redraw?: boolean, origin?: object): string|false;Methods for controlling node visibility and expansion state.
/**
* Open/expand a node
* @param obj - Node to open
* @param callback - Function to call when opening completes
* @param animation - Animation duration (overrides global setting)
* @returns True on success
*/
open_node(obj: string|object, callback?: function, animation?: number|boolean): boolean;
/**
* Close/collapse a node
* @param obj - Node to close
* @param animation - Animation duration (overrides global setting)
* @returns True on success
*/
close_node(obj: string|object, animation?: number|boolean): boolean;
/**
* Toggle node open/closed state
* @param obj - Node to toggle
* @returns True on success
*/
toggle_node(obj: string|object): boolean;
/**
* Open all nodes in the tree
* @param obj - Starting node (default: root)
* @param animation - Animation duration
* @param original_obj - Internal parameter
* @returns True on success
*/
open_all(obj?: string|object, animation?: number|boolean, original_obj?: object): boolean;
/**
* Close all nodes in the tree
* @param obj - Starting node (default: root)
* @param animation - Animation duration
* @returns True on success
*/
close_all(obj?: string|object, animation?: number|boolean): boolean;
/**
* Enable a disabled node
* @param obj - Node to enable
* @returns True on success
*/
enable_node(obj: string|object): boolean;
/**
* Disable a node (prevents interaction)
* @param obj - Node to disable
* @returns True on success
*/
disable_node(obj: string|object): boolean;
/**
* Hide a node
* @param obj - Node to hide
* @param skip_redraw - Don't redraw after hiding
* @returns True on success
*/
hide_node(obj: string|object, skip_redraw?: boolean): boolean;
/**
* Show a hidden node
* @param obj - Node to show
* @param skip_redraw - Don't redraw after showing
* @returns True on success
*/
show_node(obj: string|object, skip_redraw?: boolean): boolean;
/**
* Hide all nodes in the tree
* @param skip_redraw - Don't redraw after hiding
* @returns True on success
*/
hide_all(skip_redraw?: boolean): boolean;
/**
* Show all hidden nodes in the tree
* @param skip_redraw - Don't redraw after showing
* @returns True on success
*/
show_all(skip_redraw?: boolean): boolean;Methods for managing node selection state.
/**
* Select a node
* @param obj - Node to select
* @param supress_event - Don't trigger select event
* @param prevent_open - Don't open parent nodes
* @param e - Original event object
* @returns True on success
*/
select_node(obj: string|object, supress_event?: boolean, prevent_open?: boolean, e?: Event): boolean;
/**
* Deselect a node
* @param obj - Node to deselect
* @param supress_event - Don't trigger deselect event
* @param e - Original event object
* @returns True on success
*/
deselect_node(obj: string|object, supress_event?: boolean, e?: Event): boolean;
/**
* Select all nodes
* @param supress_event - Don't trigger select events
* @returns True on success
*/
select_all(supress_event?: boolean): boolean;
/**
* Deselect all nodes
* @param supress_event - Don't trigger deselect events
* @returns True on success
*/
deselect_all(supress_event?: boolean): boolean;
/**
* Get selected nodes
* @param full - Return full node objects instead of IDs
* @returns Array of selected node IDs or objects
*/
get_selected(full?: boolean): Array<string|object>;
/**
* Get top-level selected nodes (selected nodes with no selected ancestors)
* @param full - Return full node objects instead of IDs
* @returns Array of top-level selected node IDs or objects
*/
get_top_selected(full?: boolean): Array<string|object>;
/**
* Get bottom-level selected nodes (selected nodes with no selected descendants)
* @param full - Return full node objects instead of IDs
* @returns Array of bottom-level selected node IDs or objects
*/
get_bottom_selected(full?: boolean): Array<string|object>;Methods for programmatic node interaction and focus management.
/**
* Activate a node (focus and trigger activation events)
* @param obj - Node to activate
* @param e - Original event object
* @returns True on success
*/
activate_node(obj: string|object, e?: Event): boolean;
/**
* Apply hover state to a node
* @param obj - Node to hover
* @returns True on success
*/
hover_node(obj: string|object): boolean;
/**
* Remove hover state from a node
* @param obj - Node to remove hover from
* @returns True on success
*/
dehover_node(obj: string|object): boolean;Methods for getting and setting node text and IDs.
/**
* Get the text content of a node
* @param obj - Node to get text from
* @returns Node text content
*/
get_text(obj: string|object): string;
/**
* Set the text content of a node
* @param obj - Node to set text for
* @param text - New text content
* @returns True on success
*/
set_text(obj: string|object, text: string): boolean;
/**
* Set the ID of a node
* @param obj - Node to set ID for
* @param id - New ID (must be unique)
* @returns True on success
*/
set_id(obj: string|object, id: string): boolean;Methods for cut, copy, and paste operations on nodes.
/**
* Cut nodes to clipboard
* @param obj - Nodes to cut
* @returns True on success
*/
cut(obj: string|object|Array): boolean;
/**
* Copy nodes to clipboard
* @param obj - Nodes to copy
* @returns True on success
*/
copy(obj: string|object|Array): boolean;
/**
* Paste nodes from clipboard
* @param obj - Target parent node
* @param pos - Position to paste ("first", "last", etc.)
* @returns True on success
*/
paste(obj: string|object, pos?: string|number): boolean;
/**
* Get clipboard contents
* @returns Clipboard object with nodes and mode
*/
get_buffer(): object;
/**
* Check if paste operation is possible
* @returns True if paste is valid
*/
can_paste(): boolean;
/**
* Clear the clipboard
*/
clear_buffer(): void;Methods for enabling inline text editing of nodes.
/**
* Start inline editing of a node
* @param obj - Node to edit
* @param default_text - Default text to show in editor
* @param callback - Function to call when editing completes
* @returns True if editing started
*/
edit(obj: string|object, default_text?: string, callback?: function): boolean;Methods for controlling visual appearance and themes.
/**
* Set the theme for the tree
* @param theme_name - Theme name to use
* @param theme_url - URL to theme CSS file
* @returns True on success
*/
set_theme(theme_name: string, theme_url?: string): boolean;
/**
* Get the current theme name
* @returns Current theme name
*/
get_theme(): string;
/**
* Set theme variant
* @param variant - Variant name (e.g., "large", "small")
* @returns True on success
*/
set_theme_variant(variant: string): boolean;
/**
* Get current theme variant
* @returns Current variant name
*/
get_theme_variant(): string;
/**
* Show connecting dots/lines
* @returns True on success
*/
show_dots(): boolean;
/**
* Hide connecting dots/lines
* @returns True on success
*/
hide_dots(): boolean;
/**
* Toggle connecting dots/lines visibility
* @returns True on success
*/
toggle_dots(): boolean;
/**
* Show node icons
* @returns True on success
*/
show_icons(): boolean;
/**
* Hide node icons
* @returns True on success
*/
hide_icons(): boolean;
/**
* Toggle node icon visibility
* @returns True on success
*/
toggle_icons(): boolean;
/**
* Show alternating row stripes
* @returns True on success
*/
show_stripes(): boolean;
/**
* Hide alternating row stripes
* @returns True on success
*/
hide_stripes(): boolean;
/**
* Toggle stripe visibility
* @returns True on success
*/
toggle_stripes(): boolean;
/**
* Show text ellipsis for long node names
* @returns True on success
*/
show_ellipsis(): boolean;
/**
* Hide text ellipsis
* @returns True on success
*/
hide_ellipsis(): boolean;
/**
* Toggle ellipsis visibility
* @returns True on success
*/
toggle_ellipsis(): boolean;Methods for managing node icons.
/**
* Get the icon class or URL for a node
* @param obj - Node to get icon for
* @returns Icon class name or URL
*/
get_icon(obj: string|object): string|false;
/**
* Set the icon for a node
* @param obj - Node to set icon for
* @param icon - Icon class name, URL, or false to remove
* @returns True on success
*/
set_icon(obj: string|object, icon: string|false): boolean;Methods for controlling tree rendering and redrawing.
/**
* Redraw the entire tree
* @param full - Perform full redraw (slower but more thorough)
* @returns True on success
*/
redraw(full?: boolean): boolean;
/**
* Redraw a specific node
* @param node - Node to redraw
* @param deep - Also redraw all descendants
* @param callback - Function to call when redraw completes
* @param force_render - Force rendering even if not visible
* @returns True on success
*/
redraw_node(node: string|object, deep?: boolean, callback?: function, force_render?: boolean): boolean;
/**
* Draw children of a node
* @param node - Parent node
* @returns True on success
*/
draw_children(node: string|object): boolean;Methods for validation and utility functions.
/**
* Check if an operation is allowed by the check_callback
* @param operation - Operation name ("create_node", "rename_node", etc.)
* @param node - Node being operated on
* @param parent - Parent node for the operation
* @param position - Position for the operation
* @param more - Additional operation-specific data
* @returns True if operation is allowed
*/
check(operation: string, node: object, parent: object, position: string|number, more?: object): boolean;
/**
* Get the last error that occurred
* @returns Error object or empty object
*/
last_error(): object;
/**
* Get a localized string
* @param key - String key to look up
* @returns Localized string
*/
get_string(key: string): string;interface jsTree {
// Instance properties
element: jQuery;
settings: object;
_id: number;
_cnt: number;
_data: object;
_wrk: Worker|null;
// All methods documented above are available on instances
}
// Static namespace properties
interface jstreeStatic {
version: string;
defaults: object;
plugins: object;
path: string;
idregex: RegExp;
root: string;
}