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

configuration.mddocs/

Configuration and Options

Comprehensive guide to jsTree configuration options, themes, and global settings. This document covers all core configuration options and how to customize jsTree behavior to meet specific requirements.

Capabilities

Core Configuration

Primary configuration object for jsTree initialization.

/**
 * Core configuration options
 */
interface CoreConfig {
  /** Data source configuration */
  data?: DataConfig;
  /** Localized strings */
  strings?: StringsConfig;
  /** Operation validation callback */
  check_callback?: boolean|CheckCallbackFunction;
  /** Error handling callback */
  error?: ErrorCallback;
  /** Animation settings */
  animation?: number|boolean;
  /** Allow multiple node selection */
  multiple?: boolean;
  /** Theme configuration */
  themes?: ThemesConfig;
  /** Auto-expand to selected nodes on load */
  expand_selected_onload?: boolean;
  /** Use web workers for performance */
  worker?: boolean;
  /** Force text-only mode (no HTML) */
  force_text?: boolean;
  /** Double-click to toggle node state */
  dblclick_toggle?: boolean;
  /** Preserve loaded state on refresh */
  loaded_state?: boolean;
  /** Restore focus after operations */
  restore_focus?: boolean;
  /** Compute element positions for performance */
  compute_elements_positions?: boolean;
  /** Keyboard navigation settings */
  keyboard?: KeyboardConfig;
}

type CheckCallbackFunction = (
  operation: string,
  node: object,
  parent: object,
  position: string|number,
  more?: object
) => boolean;

type ErrorCallback = (error: object) => void;

Usage Examples:

// Basic configuration
$("#tree").jstree({
  "core": {
    "data": ["Item 1", "Item 2", "Item 3"],
    "multiple": true,
    "animation": 200,
    "check_callback": true
  }
});

// Advanced configuration
$("#tree").jstree({
  "core": {
    "data": {
      "url": "/api/tree-data",
      "dataType": "json"
    },
    "check_callback": function(operation, node, parent, position, more) {
      // Custom validation logic
      if (operation === "delete_node") {
        return confirm("Are you sure you want to delete this node?");
      }
      return true;
    },
    "error": function(error) {
      console.error("jsTree error:", error);
      showErrorMessage("Tree operation failed");
    },
    "themes": {
      "name": "default",
      "dots": true,
      "icons": true,
      "stripes": true
    }
  }
});

Data Configuration

Configuration for various data sources and formats.

/**
 * Data source configuration
 */
interface DataConfig {
  /** Static data array */
  data?: Array<NodeData>|Array<string>;
  /** AJAX configuration */
  url?: string;
  /** AJAX data parameters */
  ajax?: AjaxConfig;
  /** Custom data function */
  dataType?: string;
  /** Data processing function */
  success?: function;
  /** Error handling for data loading */
  error?: function;
}

interface NodeData {
  /** Node display text */
  text: string;
  /** Node ID (auto-generated if not provided) */
  id?: string;
  /** Parent node ID */
  parent?: string;
  /** Child nodes */
  children?: Array<NodeData>|boolean;
  /** Node state */
  state?: NodeState;
  /** Additional data */
  data?: object;
  /** HTML attributes for LI element */
  li_attr?: object;
  /** HTML attributes for A element */
  a_attr?: object;
  /** Node icon */
  icon?: string|boolean;
  /** Node type (for types plugin) */
  type?: string;
}

interface NodeState {
  /** Node is opened */
  opened?: boolean;
  /** Node is selected */
  selected?: boolean;
  /** Node is disabled */
  disabled?: boolean;
  /** Node has children to load */
  loaded?: boolean;
}

interface AjaxConfig {
  /** Request URL */
  url?: string|function;
  /** HTTP method */
  method?: string;
  /** Request data */
  data?: object|function;
  /** Data type */
  dataType?: string;
  /** Content type */
  contentType?: string;
  /** Success callback */
  success?: function;
  /** Error callback */
  error?: function;
}

Usage Examples:

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

// AJAX data loading
$("#tree").jstree({
  "core": {
    "data": {
      "url": "/api/tree-nodes",
      "dataType": "json",
      "data": function(node) {
        return {
          "id": node.id,
          "parent": node.parent
        };
      },
      "success": function(data) {
        return data.nodes;
      },
      "error": function(xhr, status, error) {
        console.error("Failed to load tree data:", error);
      }
    }
  }
});

// Function-based data
$("#tree").jstree({
  "core": {
    "data": function(node, callback) {
      if (node.id === "#") {
        // Root nodes
        callback([
          {"id": "1", "text": "Root 1", "children": true},
          {"id": "2", "text": "Root 2", "children": false}
        ]);
      } else {
        // Child nodes
        loadChildNodes(node.id, callback);
      }
    }
  }
});

// Complex node data
$("#tree").jstree({
  "core": {
    "data": [
      {
        "text": "Important Document",
        "id": "doc_1",
        "state": {"opened": true, "selected": true},
        "data": {"file_type": "pdf", "size": "2.5MB"},
        "li_attr": {"class": "important-node"},
        "a_attr": {"href": "/documents/1", "target": "_blank"},
        "icon": "fa fa-file-pdf-o",
        "type": "document",
        "children": [
          {"text": "Page 1", "type": "page"},
          {"text": "Page 2", "type": "page"}
        ]
      }
    ]
  }
});

Theme Configuration

Appearance and styling options for the tree.

/**
 * Theme configuration options
 */
interface ThemesConfig {
  /** Theme name or false to disable */
  name?: string|boolean;
  /** Theme CSS file URL */
  url?: string|boolean;
  /** Theme directory path */
  dir?: string;
  /** Show connecting dots/lines */
  dots?: boolean;
  /** Show node icons */
  icons?: boolean;
  /** Show text ellipsis for long names */
  ellipsis?: boolean;
  /** Show alternating row stripes */
  stripes?: boolean;
  /** Theme variant (e.g., "large", "small") */
  variant?: string|boolean;
  /** Enable responsive design */
  responsive?: boolean;
}

Usage Examples:

// Custom theme configuration
$("#tree").jstree({
  "core": {
    "themes": {
      "name": "default",
      "url": "/css/custom-jstree-theme.css",
      "dots": true,
      "icons": true,
      "stripes": true,
      "variant": "large",
      "responsive": true
    }
  }
});

// Programmatic theme changes
const tree = $("#tree").jstree(true);
tree.set_theme("proton");
tree.set_theme_variant("large");
tree.show_dots();
tree.show_stripes();

Keyboard Configuration

Keyboard navigation and shortcut settings.

/**
 * Keyboard configuration options
 */
interface KeyboardConfig {
  /** Enable keyboard navigation */
  keyboard?: boolean;
  /** Custom key bindings */
  bindings?: {[key: string]: KeyBinding};
}

interface KeyBinding {
  /** Key combination (e.g., "ctrl+c", "del") */
  key: string;
  /** Callback function */
  callback: function;
  /** Action description */
  label?: string;
}

Usage Examples:

// Custom keyboard shortcuts
$("#tree").jstree({
  "core": {
    "keyboard": {
      "bindings": {
        "ctrl+c": function(e) {
          const selected = this.get_selected();
          if (selected.length) {
            this.copy(selected);
          }
          e.preventDefault();
        },
        "ctrl+v": function(e) {
          const selected = this.get_selected();
          if (selected.length && this.can_paste()) {
            this.paste(selected[0]);
          }
          e.preventDefault();
        },
        "del": function(e) {
          const selected = this.get_selected();
          if (selected.length) {
            this.delete_node(selected);
          }
          e.preventDefault();
        },
        "f2": function(e) {
          const selected = this.get_selected();
          if (selected.length === 1) {
            this.edit(selected[0]);
          }
          e.preventDefault();
        }
      }
    }
  }
});

Strings Configuration

Localization and customizable text strings.

/**
 * Localized strings configuration
 */
interface StringsConfig {
  /** Loading text */
  "Loading ..."?: string;
  /** New node default text */
  "New node"?: string;
  /** Multiple selection text format */
  "Multiple selection"?: string;
  /** Custom strings */
  [key: string]: string;
}

Usage Examples:

// Localized strings
$("#tree").jstree({
  "core": {
    "strings": {
      "Loading ...": "Cargando...",
      "New node": "Nuevo nodo",
      "Multiple selection": "Selección múltiple",
      "Nothing selected": "Nada seleccionado"
    }
  }
});

// Get localized string
const tree = $("#tree").jstree(true);
const loadingText = tree.get_string("Loading ...");

Global Configuration

Default settings that apply to all jsTree instances.

/**
 * Global default configuration
 */
interface GlobalDefaults {
  /** Core defaults */
  core: CoreConfig;
  /** Plugin defaults */
  [plugin: string]: any;
}

// Access global defaults
$.jstree.defaults.core.animation = 150;
$.jstree.defaults.core.themes.stripes = true;

// Plugin defaults
$.jstree.defaults.checkbox = {
  "visible": true,
  "three_state": true
};

Usage Examples:

// Set global defaults
$.jstree.defaults.core.animation = 300;
$.jstree.defaults.core.multiple = true;
$.jstree.defaults.core.themes.stripes = true;

// All subsequent trees will use these defaults
$("#tree1").jstree(); // Uses global defaults
$("#tree2").jstree(); // Also uses global defaults

// Override defaults for specific instance
$("#tree3").jstree({
  "core": {
    "animation": 0, // Override global default
    "multiple": false
  }
});

Advanced Configuration Patterns

Complex configuration scenarios and patterns.

/**
 * Configuration factories and builders
 */
interface ConfigurationFactory {
  /** Build configuration based on context */
  buildConfig: (context: object) => object;
  /** Merge configurations */
  mergeConfigs: (...configs: object[]) => object;
  /** Validate configuration */
  validateConfig: (config: object) => boolean;
}

Usage Examples:

// Configuration factory pattern
function createTreeConfig(options) {
  const baseConfig = {
    "core": {
      "animation": 200,
      "check_callback": true,
      "themes": {"stripes": true}
    },
    "plugins": ["search", "state"]
  };
  
  if (options.editable) {
    baseConfig.plugins.push("contextmenu");
    baseConfig.contextmenu = {
      "items": editableContextMenu
    };
  }
  
  if (options.checkboxes) {
    baseConfig.plugins.push("checkbox");
    baseConfig.checkbox = {
      "three_state": true
    };
  }
  
  if (options.dragDrop) {
    baseConfig.plugins.push("dnd");
    baseConfig.dnd = {
      "check_while_dragging": true
    };
  }
  
  return $.extend(true, baseConfig, options.customConfig || {});
}

// Usage
$("#tree1").jstree(createTreeConfig({
  editable: true,
  checkboxes: true,
  customConfig: {
    "core": {"data": treeData1}
  }
}));

// Environment-specific configuration
const isDevelopment = process.env.NODE_ENV === "development";
const config = {
  "core": {
    "animation": isDevelopment ? 0 : 200, // No animation in dev
    "error": isDevelopment ? console.error : logError,
    "check_callback": isDevelopment || hasAdminRole()
  }
};

// Responsive configuration
function getResponsiveConfig() {
  const isMobile = window.innerWidth < 768;
  return {
    "core": {
      "themes": {
        "variant": isMobile ? "large" : false,
        "responsive": true
      }
    },
    "dnd": {
      "large_drop_target": isMobile,
      "touch": isMobile
    }
  };
}

$("#tree").jstree(
  $.extend(true, baseConfig, getResponsiveConfig())
);

Configuration Validation

Methods for validating and debugging configuration.

/**
 * Configuration validation utilities
 */
interface ConfigValidation {
  /** Validate configuration object */
  validate: (config: object) => ValidationResult;
  /** Get configuration warnings */
  getWarnings: (config: object) => Array<string>;
  /** Check plugin compatibility */
  checkPluginCompatibility: (plugins: Array<string>) => boolean;
}

interface ValidationResult {
  valid: boolean;
  errors: Array<string>;
  warnings: Array<string>;
}

Usage Examples:

// Configuration validation
function validateTreeConfig(config) {
  const errors = [];
  const warnings = [];
  
  // Check required properties
  if (!config.core) {
    errors.push("Core configuration is required");
  }
  
  // Validate plugins
  if (config.plugins && config.plugins.includes("checkbox") && config.plugins.includes("conditionalselect")) {
    warnings.push("checkbox and conditionalselect plugins may conflict");
  }
  
  // Check data configuration
  if (config.core.data && typeof config.core.data === "object" && !config.core.data.url && !Array.isArray(config.core.data)) {
    errors.push("Invalid data configuration");
  }
  
  return {
    valid: errors.length === 0,
    errors: errors,
    warnings: warnings
  };
}

const config = {
  "core": {"data": "invalid"},
  "plugins": ["checkbox", "conditionalselect"]
};

const validation = validateTreeConfig(config);
if (!validation.valid) {
  console.error("Configuration errors:", validation.errors);
}
if (validation.warnings.length) {
  console.warn("Configuration warnings:", validation.warnings);
}

Types

// Complete configuration interface
interface JsTreeConfig {
  core?: CoreConfig;
  plugins?: Array<string>;
  [plugin: string]: any;
}

// Configuration context
interface ConfigContext {
  element: jQuery;
  instanceId: number;
  userRole?: string;
  permissions?: Array<string>;
  environment?: string;
}

// Configuration result  
interface ConfigResult {
  config: JsTreeConfig;
  warnings: Array<string>;
  metadata: object;
}

docs

checkbox.md

configuration.md

contextmenu.md

core.md

dnd.md

events.md

index.md

plugins.md

search.md

tile.json