jsTreeドキュメント日本語訳

$.jstree

holds all jstree related functions and variables, including the actual class and methods to create, access and manipulate instances.

$.jstree.version

specifies the jstree version in use

$.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.plugins

stores all loaded jstree plugins (used internally)

$.jstree.create (el [, options])

creates a jstree instance

• el

  DOMElement jQuery String the element to create the instance on, can be jQuery extended or a selector

• options

  Object options for this instance (extends `$.jstree.defaults`)

• Returns

  jsTree the new instance

$.jstree.destroy ()

remove all traces of jstree from the DOM and destroy all instances

$.jstree.core (id)private

the jstree class constructor, used only internally

• id

  Number this instance's index

$.jstree.reference (needle)

get a reference to an existing instance

• needle

  DOMElement jQuery String

• Returns

  jsTree null the instance or `null` if not found

例

// provided a container with an ID of "tree", and a nested node with an ID of "branch"
// all of there will return the same instance
$.jstree.reference('tree');
$.jstree.reference('#tree');
$.jstree.reference($('#tree'));
$.jstree.reference(document.getElementByID('tree'));
$.jstree.reference('branch');
$.jstree.reference('#branch');
$.jstree.reference($('#branch'));
$.jstree.reference(document.getElementByID('branch'));

$().jstree([arg])

Create an instance, get an instance or invoke a command on a instance.

If there is no instance associated with the current node a new one is created and arg is used to extend $.jstree.defaults for this new instance. There would be no return value (chaining is not broken).

If there is an existing instance and argis a string the command specified by arg is executed on the instance, with any additional arguments passed to the function. If the function returns a value it will be returned (chaining could break depending on function).

If there is an existing instance and argis not a string the instance itself is returned (similar to $.jstree.reference ).

In any other case - nothing is returned and chaining is not broken.

• arg

  String Object

• Returns

  Mixed

例

$('#tree1').jstree(); // creates an instance
$('#tree2').jstree({ plugins : [] }); // create an instance with some options
$('#tree1').jstree('open_node', '#branch_1'); // call a method on an existing instance, passing additional arguments
$('#tree2').jstree(); // get an existing instance (or create an instance)
$('#tree2').jstree(true); // get an existing instance (will not create new instance)
$('#branch_1').jstree().select_node('#branch_1'); // get an instance (using a nested element and call a method)

$(':jstree')

used to find elements containing an instance

• Returns

  jQuery

Examples

$('div:jstree').each(function () {
    $(this).jstree('destroy');
});

$.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 suppy 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.

例

// 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.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' or 'copy_node'
            // 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.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 should be toggled if the text is double clicked . Defaults to true

init.jstree Event

triggered after all events are bound

loading.jstree Event

triggered after the loading text is shown and before loading starts

destroy ()

destroy an instance

• keep_html

  Boolean if not set to `true` the container will be emptied, otherwise the current DOM elements will be kept intact

// delete
case 46:
e.preventDefault();
o = this.get_node(e.currentTarget);
if(o && o.id && o.id !== '#') {
o = this.is_selected(o) ? this.get_selected() : o;
this.delete_node(o);
}
break;
// f2
case 113:
e.preventDefault();
o = this.get_node(e.currentTarget);
if(o && o.id && o.id !== '#') {
// this.edit(o);
}
break;
default:
// console.log(e.which);
break;

loaded.jstree Event

triggered after the root node is loaded for the first time

ready.jstree Event

triggered after all nodes are finished loading

get_container ()

returns the jQuery extended instance container

• Returns

  jQuery

get_node (obj [, as_dom])

get the JSON representation of a node (or the actual jQuery extended DOM node) by using any input (child DOM element, ID string, selector, etc)

• obj

  mixed

• as_dom

  Boolean

• Returns

  Object jQuery

get_path (obj [, glue, ids])

get the path to a node, either consisting of node texts, or of node IDs, optionally glued together (otherwise an array)

• obj

  mixed the node

• glue

  String if you want the path as a string - pass the glue here (for example '/'), if a falsy value is supplied here, an array is returned

• ids

  Boolean if set to true build the path using ID, otherwise node text is used

• Returns

  mixed

get_next_dom (obj [, strict])

get the next visible node that is below the obj node. If strict is set to true only sibling nodes are returned.

• obj

  mixed

• strict

  Boolean

• Returns

  jQuery

get_prev_dom (obj [, strict])

get the previous visible node that is above the obj node. If strict is set to true only sibling nodes are returned.

• obj

  mixed

• strict

  Boolean

• Returns

  jQuery

get_parent (obj)

get the parent ID of a node

• obj

  mixed

• Returns

  String

get_children_dom (obj)

get a jQuery collection of all the children of a node (node must be rendered)

• obj

  mixed

• Returns

  jQuery

is_parent (obj)

checks if a node has children

• obj

  mixed

• Returns

  Boolean

is_loaded (obj)

checks if a node is loaded (its children are available)

• obj

  mixed

• Returns

  Boolean

is_loading (obj)

check if a node is currently loading (fetching children)

• obj

  mixed

• Returns

  Boolean

is_open (obj)

check if a node is opened

• obj

  mixed

• Returns

  Boolean

is_closed (obj)

check if a node is in a closed state

• obj

  mixed

• Returns

  Boolean

is_leaf (obj)

check if a node has no children

• obj

  mixed

• Returns

  Boolean

load_node (obj [, callback])

loads a node (fetches its children using the core.data setting). Multiple nodes can be passed to by using an array.

• obj

  mixed

• callback

  function a function to be executed once loading is complete, the function is executed in the instance's scope and receives two arguments - the node and a boolean status

• Returns

  Boolean

• Triggers

  load_node.jstree

load_node (obj [, callback])

loads a node (fetches its children using the core.data setting). Multiple nodes can be passed to by using an array.

• obj

  mixed

• callback

  function a function to be executed once loading is complete, the function is executed in the instance's scope and receives two arguments - the node and a boolean status

• Returns

  Boolean

• Triggers

  load_node.jstree

load_node.jstree Event

triggered after a node is loaded

• node

  Object the node that was loading

• status

  Boolean was the node loaded successfully

load_all ([obj, callback])

loads all unloaded nodes

• obj

  mixed the node to load recursively, omit to load all nodes in the tree

• callback

  function a function to be executed once loading all the nodes is complete,

• Triggers

  load_all.jstree

load_all.jstree Event

triggered after a load_all call completes

• node

  Object the recursively loaded node

model.jstree Event

triggered when new data is inserted to the tree model

• nodes

  Array an array of node IDs

• parent

  String the parent ID of the nodes

redraw.jstree Event

triggered after nodes are redrawn

• nodes

  array the redrawn nodes

redraw ([full])

redraws all nodes that need to be redrawn or optionally - the whole tree

• full

  Boolean if set to `true` all nodes are redrawn.

open_node (obj [, callback, animation])

opens a node, revaling its children. If the node is not loaded it will be loaded and opened once ready.

• obj

  mixed the node to open

• callback

  Function a function to execute once the node is opened

• animation

  Number the animation duration in milliseconds when opening the node (overrides the `core.animation` setting). Use `false` for no animation.

• Triggers

  open_node.jstree after_open.jstree before_open.jstree

before_open.jstree Event

triggered when a node is about to be opened (if the node is supposed to be in the DOM, it will be, but it won't be visible yet)

• node

  Object the opened node

open_node.jstree Event

triggered when a node is opened (if there is an animation it will not be completed yet)

• node

  Object the opened node

after_open.jstree Event

close_node (obj [, animation])

closes a node, hiding its children

• obj

  mixed the node to close

• animation

  Number the animation duration in milliseconds when closing the node (overrides the `core.animation` setting). Use `false` for no animation.

• Triggers

  close_node.jstree after_close.jstree

close_node.jstree Event

triggered when a node is closed (if there is an animation it will not be complete yet)

• node

  Object the closed node

after_close.jstree Event

triggered when a node is closed and the animation is complete

• node

  Object the closed node

toggle_node (obj)

toggles a node - closing it if it is open, opening it if it is closed

• obj

  mixed the node to toggle

open_all ([obj, animation, original_obj])

opens all nodes within a node (or the tree), revaling their children. If the node is not loaded it will be loaded and opened once ready.

• obj

  mixed the node to open recursively, omit to open all nodes in the tree

• animation

  Number the animation duration in milliseconds when opening the nodes, the default is no animation

• reference

  jQuery to the node that started the process (internal use)

• Triggers

  open_all.jstree

open_all.jstree Event

triggered when an open_all call completes

• node

  Object the opened node

close_all ([obj, animation])

closes all nodes within a node (or the tree), revaling their children

• obj

  mixed the node to close recursively, omit to close all nodes in the tree

• animation

  Number the animation duration in milliseconds when closing the nodes, the default is no animation

• Triggers

  close_all.jstree

close_all.jstree Event

triggered when an close_all call completes

• node

  Object the closed node

is_disabled (obj)

checks if a node is disabled (not selectable)

• obj

  mixed

• Returns

  Boolean

enable_node (obj)

enables a node - so that it can be selected

• obj

  mixed the node to enable

• Triggers

  enable_node.jstree

enable_node.jstree Event

triggered when an node is enabled

• node

  Object the enabled node

disable_node (obj)

disables a node - so that it can not be selected

• obj

  mixed the node to disable

• Triggers

  disable_node.jstree

disable_node.jstree Event

triggered when an node is disabled

• node

  Object the disabled node

activate_node.jstree Event

triggered when an node is clicked or intercated with by the user

• node

  Object

hover_node.jstree Event

triggered when an node is hovered

• node

  Object

dehover_node.jstree Event

triggered when an node is no longer hovered

• node

  Object

select_node (obj [, supress_event, prevent_open])

select a node

• obj

  mixed an array can be used to select multiple nodes

• supress_event

  Boolean if set to `true` the `changed.jstree` event won't be triggered

• prevent_open

  Boolean if set to `true` parents of the selected node won't be opened

• Triggers

  select_node.jstree changed.jstree

select_node.jstree Event

triggered when an node is selected

• node

  Object

• selected

  Array the current selection

• event

  Object the event (if any) that triggered this select_node

changed.jstree Event

triggered when selection changes

• node

  Object

• action

  Object the action that caused the selection to change

• selected

  Array the current selection

• event

  Object the event (if any) that triggered this changed event

deselect_node (obj [, supress_event])

deselect a node

• obj

  mixed an array can be used to deselect multiple nodes

• supress_event

  Boolean if set to `true` the `changed.jstree` event won't be triggered

• Triggers

  deselect_node.jstree changed.jstree

deselect_node.jstree Event

triggered when an node is deselected

• node

  Object

• selected

  Array the current selection

• event

  Object the event (if any) that triggered this deselect_node

select_all ([supress_event])

select all nodes in the tree

• supress_event

  Boolean if set to `true` the `changed.jstree` event won't be triggered

• Triggers

  select_all.jstree changed.jstree

select_all.jstree Event

triggered when all nodes are selected

• selected

  Array the current selection

deselect_all ([supress_event])

deselect all selected nodes

• supress_event

  Boolean if set to `true` the `changed.jstree` event won't be triggered

• Triggers

  deselect_all.jstree changed.jstree

deselect_all.jstree Event

triggered when all nodes are deselected

• node

  Object the previous selection

• selected

  Array the current selection

is_selected (obj)

get_selected ([full])

get_top_selected ([full])

get_bottom_selected ([full])

set_state.jstree Event

refresh ()

refresh.jstree Event

refresh_node (obj)

refresh_node.jstree Event

set_id (obj, id)

get_text (obj)

set_text.jstree Event

get_json ([obj, options])

create_node ([obj, node, pos, callback, is_loaded])

create_node.jstree Event

rename_node (obj, val)

rename_node.jstree Event

delete_node (obj)

delete_node.jstree Event

last_error ()

move_node (obj, par [, pos, callback, is_loaded])

move_node.jstree Event

copy_node (obj, par [, pos, callback, is_loaded])

copy_node.jstree Event

cut (obj)

cut.jstree Event

copy (obj)

copy.jstree Event

get_buffer ()

can_paste ()

paste (obj [, pos])

paste.jstree Event

clear_buffer ()

clear_buffer.jstree Event

edit (obj [, default_text])

set_theme (theme_name [, theme_url])

set_theme.jstree Event

get_theme ()

set_theme_variant (variant_name)

get_theme ()

show_stripes ()

hide_stripes ()

toggle_stripes ()

show_dots ()

hide_dots ()

toggle_dots ()

show_icons ()

hide_icons ()

toggle_icons ()

set_icon (obj, icon)

get_icon (obj)

hide_icon (obj)

show_icon (obj)