or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

checkbox.mdconfiguration.mdcontextmenu.mdcore.mddnd.mdevents.mdindex.mdplugins.mdsearch.md
tile.json

tessl/npm-jstree

jQuery tree plugin for creating interactive tree components with drag & drop, inline editing, checkboxes, search, and customizable node types

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jstree@3.3.x

To install, run

npx @tessl/cli install tessl/npm-jstree@3.3.0

index.mddocs/

jsTree

jsTree is a comprehensive jQuery plugin that provides interactive tree components for web applications. It offers a feature-rich tree interface with support for drag & drop, keyboard navigation, inline editing (create/edit/delete), tri-state checkboxes, fuzzy searching, and customizable node types. The library is designed for maximum flexibility with support for HTML & JSON data sources, AJAX & async callback loading, and works with both box-model types (content-box or border-box).

Package Information

  • Package Name: jstree
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install jstree

Core Imports

// ES6 Module
import $ from "jquery";
import "jstree";

// Or if jQuery is already available globally
import "jstree";

For CommonJS:

const $ = require("jquery");
require("jstree");

For browser usage via CDN:

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="path/to/jstree.min.js"></script>

Basic Usage

// Initialize a tree
$("#tree").jstree({
  "core": {
    "data": [
      { "text": "Root node", "children": [
        { "text": "Child node 1" },
        { "text": "Child node 2" }
      ]}
    ]
  }
});

// Get the tree instance
const tree = $("#tree").jstree(true);

// Select a node
tree.select_node("node_id");

// Create a new node
tree.create_node("#", { "text": "New node" });

// Listen to events
$("#tree").on("select_node.jstree", function (e, data) {
  console.log("Selected node:", data.node.text);
});

Architecture

jsTree is built around several key components:

  • Core API: Essential tree functionality including node management, selection, and state
  • Plugin System: Modular extensions for specialized functionality (checkboxes, drag & drop, search, etc.)
  • Event System: jQuery-based event system for handling tree interactions
  • Data Sources: Support for HTML, JSON, AJAX, and function-based data loading
  • Theme System: Customizable appearance with built-in themes and mobile support
  • Configuration: Extensive options for customizing behavior and appearance

Capabilities

Core Tree Management

Essential tree functionality including initialization, node manipulation, selection, and basic operations.

// Main plugin function
$(selector).jstree(options?: object): jQuery;
$(selector).jstree(method: string, ...args: any[]): any;
$(selector).jstree(true): jsTree;

// Static methods
$.jstree.create(el: Element|jQuery|string, options?: object): jsTree;
$.jstree.destroy(): void;
$.jstree.reference(needle: Element|jQuery|string): jsTree;

// Static properties
$.jstree.version: string;
$.jstree.defaults: object;
$.jstree.plugins: object;
$.jstree.path: string;
$.jstree.idregex: RegExp;
$.jstree.root: string;

Core Tree Management

Checkbox Plugin

Tri-state checkbox functionality with support for cascading selection, parent-child relationships, and individual checkbox control.

// Checkbox configuration
interface CheckboxConfig {
  visible?: boolean;
  three_state?: boolean;
  whole_node?: boolean;
  keep_selected_style?: boolean;
  cascade?: string;
  tie_selection?: boolean;
}

// Key checkbox methods
tree.check_node(obj: string|object): boolean;
tree.uncheck_node(obj: string|object): boolean;
tree.get_checked(full?: boolean): Array<string|object>;

Checkbox Functionality

Drag & Drop Plugin

Advanced drag and drop support with customizable constraints, foreign element support, and visual feedback during operations.

// DnD configuration  
interface DnDConfig {
  copy?: boolean;
  open_timeout?: number;
  move_timeout?: number;
  is_draggable?: boolean|function;
  check_while_dragging?: boolean;
  drag_selection?: boolean;
  touch?: boolean|string;
  large_drop_target?: boolean;
  large_drag_target?: boolean;
  use_html5?: boolean;
}

Drag & Drop Operations

Context Menu Plugin

Customizable right-click context menus with support for custom items, submenus, and conditional visibility.

// Context menu configuration
interface ContextMenuConfig {
  select_node?: boolean;
  show_at_node?: boolean;
  items?: object|function;
}

// Show context menu
tree.show_contextmenu(obj: string|object, x?: number, y?: number, e?: Event): void;

Context Menu System

Search Plugin

Fuzzy search functionality with highlighting, show-only-matches mode, and customizable search patterns.

// Search configuration
interface SearchConfig {
  ajax?: object|function;
  fuzzy?: boolean;
  case_sensitive?: boolean;
  show_only_matches?: boolean;
  show_only_matches_children?: boolean;
  close_opened_onclear?: boolean;
  search_leaves_only?: boolean;
  search_callback?: function;
}

// Search methods  
tree.search(str: string, skip_async?: boolean, show_only_matches?: boolean, inside?: string, append?: boolean): void;
tree.clear_search(): void;

Search and Filter

Additional Plugins

State management, node types, sorting, and other specialized functionality.

// State plugin
tree.save_state(): void;
tree.restore_state(): void;
tree.get_state(): object;
tree.set_state(state: object, callback?: function): void;

// Types plugin  
tree.get_type(obj: string|object): string;
tree.set_type(obj: string|object, type: string): boolean;

// Sort plugin
tree.sort(obj?: string|object, deep?: boolean): void;

Additional Plugins

Configuration System

Core Configuration

interface CoreConfig {
  data?: any;
  strings?: object;
  check_callback?: boolean|function;
  error?: function;
  animation?: number|boolean;
  multiple?: boolean;
  themes?: ThemesConfig;
  expand_selected_onload?: boolean;
  worker?: boolean;
  force_text?: boolean;
  dblclick_toggle?: boolean;
  loaded_state?: boolean;
  restore_focus?: boolean;
  compute_elements_positions?: boolean;
  keyboard?: object;
}

interface ThemesConfig {
  name?: string|boolean;
  url?: string|boolean;
  dir?: string;
  dots?: boolean;
  icons?: boolean;
  ellipsis?: boolean;
  stripes?: boolean;
  variant?: string|boolean;
  responsive?: boolean;
}

Configuration and Options

Event System

Core Events

// Tree lifecycle events
"init.jstree": TreeEvent;
"loading.jstree": TreeEvent;
"loaded.jstree": TreeEvent;
"ready.jstree": TreeEvent;
"redraw.jstree": TreeEvent;
"refresh.jstree": TreeEvent;

// Node events
"changed.jstree": SelectionEvent;
"select_node.jstree": NodeEvent;
"deselect_node.jstree": NodeEvent; 
"open_node.jstree": NodeEvent;
"close_node.jstree": NodeEvent;
"create_node.jstree": NodeEvent;
"rename_node.jstree": RenameEvent;
"delete_node.jstree": NodeEvent;
"move_node.jstree": MoveEvent;
"copy_node.jstree": MoveEvent;

interface NodeEvent {
  node: TreeNode;
  instance: jsTree;
}

interface RenameEvent extends NodeEvent {
  text: string;
  old: string;
}

interface MoveEvent extends NodeEvent {
  parent: string;
  position: number;
  old_parent: string;
  old_position: number;
  is_multi: boolean;
  old_instance: jsTree;
  new_instance: jsTree;
}

interface SelectionEvent {
  selected: Array<string>;
  instance: jsTree;
  action: string;
  node: TreeNode;
}

Events and Callbacks

Types

// Main jsTree instance type
interface jsTree {
  // Core properties
  element: jQuery;
  settings: object;
  _id: number;
  _cnt: number;
  _data: object;
  _wrk: Worker|null;
  
  // All instance methods documented in sub-docs
  // (This interface would be extremely large, so methods are documented
  // in their respective capability sections)
}

// Tree node data structure  
interface TreeNode {
  id: string;
  text: string;
  icon?: string|boolean;
  state?: {
    loaded?: boolean;
    opened?: boolean;
    selected?: boolean;
    disabled?: boolean;  
    hidden?: boolean;
    checked?: boolean;
    undetermined?: boolean;
  };
  children?: Array<TreeNode>|boolean;
  li_attr?: object;
  a_attr?: object;
  parent?: string;
  parents?: Array<string>;
  data?: any;
  type?: string;
}

// Global jsTree namespace
interface jstreeStatic {
  version: string;
  defaults: object;
  plugins: object;
  path: string;
  idregex: RegExp;
  root: string;
}

// jQuery extensions
interface jQuery {
  jstree(options?: object): jQuery;
  jstree(method: string, ...args: any[]): any;
  jstree(getinstance: true): jsTree;
}

interface JQueryStatic {
  jstree: jstreeStatic;
}