CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-jstree

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jstree@3.3.x
Publish Source
CLI
Badge
tessl/npm-jstree badge