jsTree 中文文档

默认配置

译者注：默认配置是指创建实例时所有的配置项，并且都会赋予默认值，你可以对配置项进行修改

Core functionality

$.jstree.defaults

holds all the default options used when creating new instances

$.jstree.defaults.plugins

configure which plugins will be active on an instance. Should be an array of strings, where each element is a plugin name. The default is []

$.jstree.defaults.core

stores all defaults for the core

$.jstree.defaults.core.data

data configuration

If left as false the HTML inside the jstree container element is used to populate the tree (that should be an unordered list with list items).

You can also pass in a HTML string or a JSON array here.

It is possible to pass in a standard jQuery-like AJAX config and jstree will automatically determine if the response is JSON or HTML and use that to populate the tree.

In addition to the standard jQuery ajax options here you can supply functions for data and url, the functions will be run in the current instance's scope and a param will be passed indicating which node is being loaded, the return value of those functions will be used.

The last option is to specify a function, that function will receive the node being loaded as argument and a second param which is a function which should be called with the result.

Examples

// AJAX
$('#tree').jstree({
    'core' : {
        'data' : {
            'url' : '/get/children/',
            'data' : function (node) {
                return { 'id' : node.id };
            }
        }
    }
});

// direct data
$('#tree').jstree({
    'core' : {
        'data' : [
            'Simple root node',
            {
                'id' : 'node_2',
                'text' : 'Root node with options',
                'state' : { 'opened' : true, 'selected' : true },
                'children' : [ { 'text' : 'Child 1' }, 'Child 2']
            }
        ]
    }
});

// function
$('#tree').jstree({
    'core' : {
        'data' : function (obj, callback) {
            callback.call(this, ['Root 1', 'Root 2']);
        }
    }
});

$.jstree.defaults.core.strings

configure the various strings used throughout the tree

You can use an object where the key is the string you need to replace and the value is your replacement.

Another option is to specify a function which will be called with an argument of the needed string and should return the replacement.

If left as false no replacement is made.

Examples

$('#tree').jstree({
	'core' : {
		'strings' : {
			'Loading ...' : 'Please wait ...'
		}
	}
});

$.jstree.defaults.core.check_callback

determines what happens when a user tries to modify the structure of the tree

If left as false all operations like create, rename, delete, move or copy are prevented.

You can set this to true to allow all interactions or use a function to have better control.

Examples

$('#tree').jstree({
	'core' : {
		'check_callback' : function (operation, node, node_parent, node_position, more) {
			// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node', 'copy_node' or 'edit'
			// in case of 'rename_node' node_position is filled with the new node name
			return operation === 'rename_node' ? true : false;
		}
	}
});

$.jstree.defaults.core.error

a callback called with a single object parameter in the instance's scope when something goes wrong (operation prevented, ajax failed, etc)

$.jstree.defaults.core.animation

the open / close animation duration in milliseconds - set this to false to disable the animation (default is 200)

$.jstree.defaults.core.multiple

a boolean indicating if multiple nodes can be selected

$.jstree.defaults.core.themes

theme configuration object

$.jstree.defaults.core.themes.name

the name of the theme to use (if left as false the default theme is used)

$.jstree.defaults.core.themes.url

the URL of the theme's CSS file, leave this as false if you have manually included the theme CSS (recommended). You can set this to true too which will try to autoload the theme.

$.jstree.defaults.core.themes.dir

the location of all jstree themes - only used if url is set to true

$.jstree.defaults.core.themes.dots

a boolean indicating if connecting dots are shown

$.jstree.defaults.core.themes.icons

a boolean indicating if node icons are shown

$.jstree.defaults.core.themes.ellipsis

a boolean indicating if node ellipsis should be shown - this only works with a fixed with on the container

$.jstree.defaults.core.themes.stripes

a boolean indicating if the tree background is striped

$.jstree.defaults.core.themes.variant

a string (or boolean false) specifying the theme variant to use (if the theme supports variants)

$.jstree.defaults.core.themes.responsive

a boolean specifying if a reponsive version of the theme should kick in on smaller screens (if the theme supports it). Defaults to false.

$.jstree.defaults.core.expand_selected_onload

if left as true all parents of all selected nodes will be opened once the tree loads (so that all selected nodes are visible to the user)

$.jstree.defaults.core.worker

if left as true web workers will be used to parse incoming JSON data where possible, so that the UI will not be blocked by large requests. Workers are however about 30% slower. Defaults to true

$.jstree.defaults.core.force_text

Force node text to plain text (and escape HTML). Defaults to false

$.jstree.defaults.core.dblclick_toggle

Should the node be toggled if the text is double clicked. Defaults to true

$.jstree.defaults.core.loaded_state

Should the loaded nodes be part of the state. Defaults to false

$.jstree.defaults.core.restore_focus

Should the last active node be focused when the tree container is blurred and the focused again. This helps working with screen readers. Defaults to true

$.jstree.defaults.core.compute_elements_positions

Force to compute and set "aria-setsize" and "aria-posinset" explicitly for each treeitem.

Some browsers may compute incorrect elements position and produce wrong announcements for screen readers. Defaults to false

$.jstree.defaults.core.keyboard

Default keyboard shortcuts (an object where each key is the button name or combo - like 'enter', 'ctrl-space', 'p', etc and the value is the function to execute in the instance's scope)

Checkbox plugin

This plugin renders checkbox icons in front of each node, making multiple selection much easier.

It also supports tri-state behavior, meaning that if a node has a few of its children checked it will be rendered as undetermined, and state will be propagated up.

$.jstree.defaults.checkbox

stores all defaults for the checkbox plugin

$.jstree.defaults.checkbox.visible

a boolean indicating if checkboxes should be visible (can be changed at a later time using show_checkboxes() and hide_checkboxes). Defaults to true.

$.jstree.defaults.checkbox.three_state

a boolean indicating if checkboxes should cascade down and have an undetermined state. Defaults to true.

$.jstree.defaults.checkbox.whole_node

a boolean indicating if clicking anywhere on the node should act as clicking on the checkbox. Defaults to true.

$.jstree.defaults.checkbox.keep_selected_style

a boolean indicating if the selected style of a node should be kept, or removed. Defaults to true.

$.jstree.defaults.checkbox.cascade

This setting controls how cascading and undetermined nodes are applied.

If 'up' is in the string - cascading up is enabled, if 'down' is in the string - cascading down is enabled, if 'undetermined' is in the string - undetermined nodes will be used.

If three_state is set to true this setting is automatically set to 'up+down+undetermined'. Defaults to ''.

$.jstree.defaults.checkbox.tie_selection

This setting controls if checkbox are bound to the general tree selection or to an internal array maintained by the checkbox plugin. Defaults to true, only set to false if you know exactly what you are doing.

$.jstree.defaults.checkbox.cascade_to_disabled

This setting controls if cascading down affects disabled checkboxes

$.jstree.defaults.checkbox.cascade_to_hidden

This setting controls if cascading down affects hidden checkboxes

Contextmenu plugin

Shows a context menu when a node is right-clicked.

$.jstree.defaults.contextmenu

stores all defaults for the contextmenu plugin

$.jstree.defaults.contextmenu.select_node

a boolean indicating if the node should be selected when the context menu is invoked on it. Defaults to true.

$.jstree.defaults.contextmenu.show_at_node

a boolean indicating if the menu should be shown aligned with the node. Defaults to true, otherwise the mouse coordinates are used.

$.jstree.defaults.contextmenu.items

an object of actions, or a function that accepts a node and a callback function and calls the callback function with an object of actions available for that node (you can also return the items too).

Each action consists of a key (a unique name) and a value which is an object with the following properties (only label and action are required). Once a menu item is activated the action function will be invoked with an object containing the following keys: item - the contextmenu item definition as seen below, reference - the DOM node that was used (the tree node), element - the contextmenu DOM element, position - an object with x/y properties indicating the position of the menu.

separator_before - a boolean indicating if there should be a separator before this item
separator_after - a boolean indicating if there should be a separator after this item
_disabled - a boolean indicating if this action should be disabled
label - a string - the name of the action (could be a function returning a string)
title - a string - an optional tooltip for the item
action - a function to be executed if this item is chosen, the function will receive
icon - a string, can be a path to an icon or a className, if using an image that is in the current directory use a ./ prefix, otherwise it will be detected as a class
shortcut - keyCode which will trigger the action if the menu is open (for example 113 for rename, which equals F2)
shortcut_label - shortcut label (like for example F2 for rename)
submenu - an object with the same structure as $.jstree.defaults.contextmenu.items which can be used to create a submenu - each key will be rendered as a separate option in a submenu that will appear once the current item is hovered

Drag'n'drop plugin

Enables dragging and dropping of nodes in the tree, resulting in a move or copy operations.

$.jstree.defaults.dnd

stores all defaults for the drag'n'drop plugin

$.jstree.defaults.dnd.copy

a boolean indicating if a copy should be possible while dragging (by pressint the meta key or Ctrl). Defaults to true.

$.jstree.defaults.dnd.open_timeout

a number indicating how long a node should remain hovered while dragging to be opened. Defaults to 500.

$.jstree.defaults.dnd.is_draggable

a function invoked each time a node is about to be dragged, invoked in the tree's scope and receives the nodes about to be dragged as an argument (array) and the event that started the drag - return false to prevent dragging

$.jstree.defaults.dnd.check_while_dragging

a boolean indicating if checks should constantly be made while the user is dragging the node (as opposed to checking only on drop), default is true

$.jstree.defaults.dnd.always_copy

a boolean indicating if nodes from this tree should only be copied with dnd (as opposed to moved), default is false

$.jstree.defaults.dnd.inside_pos

when dropping a node "inside", this setting indicates the position the node should go to - it can be an integer or a string: "first" (same as 0) or "last", default is 0

$.jstree.defaults.dnd.drag_selection

when starting the drag on a node that is selected this setting controls if all selected nodes are dragged or only the single node, default is true, which means all selected nodes are dragged when the drag is started on a selected node

$.jstree.defaults.dnd.touch

controls whether dnd works on touch devices. If left as boolean true dnd will work the same as in desktop browsers, which in some cases may impair scrolling. If set to boolean false dnd will not work on touch devices. There is a special third option - string "selected" which means only selected nodes can be dragged on touch devices.

$.jstree.defaults.dnd.large_drop_target

controls whether items can be dropped anywhere on the node, not just on the anchor, by default only the node anchor is a valid drop target. Works best with the wholerow plugin. If enabled on mobile depending on the interface it might be hard for the user to cancel the drop, since the whole tree container will be a valid drop target.

$.jstree.defaults.dnd.large_drag_target

controls whether a drag can be initiated from any part of the node and not just the text/icon part, works best with the wholerow plugin. Keep in mind it can cause problems with tree scrolling on mobile depending on the interface - in that case set the touch option to "selected".

$.jstree.defaults.dnd.use_html5

controls whether use HTML5 dnd api instead of classical. That will allow better integration of dnd events with other HTML5 controls.

$.jstree.defaults.dnd.blank_space_drop

controls whether items can be dropped anywhere on the tree.

Massload plugin

Adds massload functionality to jsTree, so that multiple nodes can be loaded in a single request (only useful with lazy loading).

$.jstree.defaults.massload

massload configuration

It is possible to set this to a standard jQuery-like AJAX config.

In addition to the standard jQuery ajax options here you can supply functions for data and url, the functions will be run in the current instance's scope and a param will be passed indicating which node IDs need to be loaded, the return value of those functions will be used.

You can also set this to a function, that function will receive the node IDs being loaded as argument and a second param which is a function (callback) which should be called with the result.

Both the AJAX and the function approach rely on the same return value - an object where the keys are the node IDs, and the value is the children of that node as an array.

{
	"id1" : [{ "text" : "Child of ID1", "id" : "c1" }, { "text" : "Another child of ID1", "id" : "c2" }],
	"id2" : [{ "text" : "Child of ID2", "id" : "c3" }]
}

Search plugin

Adds search functionality to jsTree.

$.jstree.defaults.search

stores all defaults for the search plugin

$.jstree.defaults.search.ajax

a jQuery-like AJAX config, which jstree uses if a server should be queried for results.

A str (which is the search string) parameter will be added with the request, an optional inside parameter will be added if the search is limited to a node id. The expected result is a JSON array with nodes that need to be opened so that matching nodes will be revealed.

Leave this setting as false to not query the server. You can also set this to a function, which will be invoked in the instance's scope and receive 3 parameters - the search string, the callback to call with the array of nodes to load, and the optional node ID to limit the search to

$.jstree.defaults.search.fuzzy

Indicates if the search should be fuzzy or not (should chnd3 match child node 3). Default is false.

$.jstree.defaults.search.case_sensitive

Indicates if the search should be case sensitive. Default is false.

$.jstree.defaults.search.show_only_matches

Indicates if the tree should be filtered (by default) to show only matching nodes (keep in mind this can be a heavy on large trees in old browsers).

This setting can be changed at runtime when calling the search method. Default is false.

$.jstree.defaults.search.show_only_matches_children

Indicates if the children of matched element are shown (when show_only_matches is true)

This setting can be changed at runtime when calling the search method. Default is false.

$.jstree.defaults.search.close_opened_onclear

Indicates if all nodes opened to reveal the search result, should be closed when the search is cleared or a new search is performed. Default is true.

$.jstree.defaults.search.search_leaves_only

Indicates if only leaf nodes should be included in search results. Default is false.

$.jstree.defaults.search.search_callback

If set to a function it wil be called in the instance's scope with two arguments - search string and node (where node will be every node in the structure, so use with caution).

If the function returns a truthy value the node will be considered a match (it might not be displayed if search_only_leaves is set to true and the node is not a leaf). Default is false.

Sort plugin

Automatically sorts all siblings in the tree according to a sorting function.

$.jstree.defaults.sort

the settings function used to sort the nodes.

It is executed in the tree's context, accepts two nodes as arguments and should return 1 or -1.

State plugin

Saves the state of the tree (selected nodes, opened nodes) on the user's computer using available options (localStorage, cookies, etc)

$.jstree.defaults.state

stores all defaults for the state plugin

$.jstree.defaults.state.key

A string for the key to use when saving the current tree (change if using multiple trees in your project). Defaults to jstree.

$.jstree.defaults.state.events

A space separated list of events that trigger a state save. Defaults to changed.jstree open_node.jstree close_node.jstree.

$.jstree.defaults.state.ttl

Time in milliseconds after which the state will expire. Defaults to 'false' meaning - no expire.

$.jstree.defaults.state.filter

A function that will be executed prior to restoring state with one argument - the state object. Can be used to clear unwanted parts of the state.

$.jstree.defaults.state.preserve_loaded

Should loaded nodes be restored (setting this to true means that it is possible that the whole tree will be loaded for some users - use with caution). Defaults to false

Types plugin

Makes it possible to add predefined types for groups of nodes, which make it possible to easily control nesting rules and icon for each group.

$.jstree.defaults.types

An object storing all types as key value pairs, where the key is the type name and the value is an object that could contain following keys (all optional).

max_children the maximum number of immediate children this node type can have. Do not specify or set to -1 for unlimited.
max_depth the maximum number of nesting this node type can have. A value of 1 would mean that the node can have children, but no grandchildren. Do not specify or set to -1 for unlimited.
valid_children an array of node type strings, that nodes of this type can have as children. Do not specify or set to -1 for no limits.
icon a string - can be a path to an icon or a className, if using an image that is in the current directory use a ./ prefix, otherwise it will be detected as a class. Omit to use the default icon from your theme.
li_attr an object of values which will be used to add HTML attributes on the resulting LI DOM node (merged with the node's own data)
a_attr an object of values which will be used to add HTML attributes on the resulting A DOM node (merged with the node's own data)

There are two predefined types:

# represents the root of the tree, for example max_children would control the maximum number of root nodes.
default represents the default node - any settings here will be applied to all nodes that do not have a type specified.

Unique plugin

Enforces that no nodes with the same name can coexist as siblings.

$.jstree.defaults.unique

stores all defaults for the unique plugin

$.jstree.defaults.unique.case_sensitive

Indicates if the comparison should be case sensitive. Default is false.

$.jstree.defaults.unique.trim_whitespace

Indicates if white space should be trimmed before the comparison. Default is false.

$.jstree.defaults.unique.duplicate

A callback executed in the instance's scope when a new node is created with no name and a node with the default name already exists, the two arguments are the conflicting name and the counter. The default will produce results like New node (2).

Core functionality
$.jstree.defaults
.plugins
.core
.data
.strings
.check_callback
.error
.animation
.multiple
.themes
.name
.url
.dir
.dots
.icons
.ellipsis
.stripes
.variant
.responsive
.expand_selected_onload
.worker
.force_text
.dblclick_toggle
.loaded_state
.restore_focus
.compute_elements_positions
.keyboard
Checkbox plugin
.checkbox
.visible
.three_state
.whole_node
.keep_selected_style
.cascade
.tie_selection
.cascade_to_disabled
.cascade_to_hidden
Contextmenu plugin
.contextmenu
.select_node
.show_at_node
.items
Drag'n'drop plugin
.dnd
.copy
.open_timeout
.is_draggable
.check_while_dragging
.always_copy
.inside_pos
.drag_selection
.touch
.large_drop_target
.large_drag_target
.use_html5
.blank_space_drop
Massload plugin
.massload
Search plugin
.search
.ajax
.fuzzy
.case_sensitive
.show_only_matches
.show_only_matches_children
.close_opened_onclear
.search_leaves_only
.search_callback
Sort plugin
.sort
State plugin
.state
.key
.events
.ttl
.filter
.preserve_loaded
Types plugin
.types
Unique plugin
.unique
.case_sensitive
.trim_whitespace
.duplicate