jsTree v.1.0 - CRRM documentation

Configuration

input_width_limit

A number. Default is 200.

When renaming (or creating) nodes the input for the text will autosize - this number sets the maximum size for the input.

move

An object, containing various settings - see below for more.

move.always_copy

true, false or "multitree". Default is false.

Defines how moves are handled - if set to true every move will be forced to a copy (leaving the original node in place). If set to "multitree" only moves between trees will be forced to a copy.

move.open_onmove

A Boolean. Default is true.

If set to true, when moving a node to a new, closed parent, the parent node will be opened when the move completes.

move.default_position

A string or a number. Default is "last".

The default position to move to if no position is specified. This can be a zero based index to position the element at a specific point among the new parent's current children. You can also use one of these strings: "before", "after", "inside", "first", "last".

move.check_move

A function. Default is function (m) { return true; }.

The callback function enabling you to prevent some moves - just return false. The m parameter is the move object generated by jstree. The object follows the structure described in ._get_move.

Demos

Creating nodes

Root node 1
- Child node 1
- Child node 2
Root node 2

01$(function () {
02    $("#create_1").click(function () { 
03        $("#demo1").jstree("create"); 
04    });
05    $("#create_2").click(function () { 
06        $("#demo1").jstree("create","#phtml_1","first","Enter a new name"); 
07    });
08    $("#create_3").click(function () { 
09        $("#demo1").jstree("create",-1,false,"No rename",false,true); 
10    });
11    $("#demo1").jstree({ 
12        "ui" : {
13            "initially_select" : [ "phtml_2" ]
14        },
15        "core" : { "initially_open" : [ "phtml_1" ] },
16        "plugins" : [ "themes", "html_data", "ui", "crrm" ]
17    });
18});

Removing nodes

Root node 1
- Child node 1
- Child node 2
Root node 2

01$(function () {
02    $("#remove_1").click(function () { 
03        $("#demo2").jstree("remove"); 
04    });
05    $("#remove_2").click(function () { 
06        $("#demo2").jstree("remove","#rhtml_1"); 
07    });
08    $("#demo2").jstree({ 
09        "ui" : {
10            "initially_select" : [ "rhtml_2" ]
11        },
12        "core" : { "initially_open" : [ "rhtml_1" ] },
13        "plugins" : [ "themes", "html_data", "ui", "crrm" ]
14    });
15});

Renaming nodes

Root node 1
- Child node 1
- Child node 2
Root node 2

01$(function () {
02    $("#rename_1").click(function () { 
03        $("#demo3").jstree("rename"); 
04    });
05    $("#rename_2").click(function () { 
06        $("#demo3").jstree("rename","#shtml_1"); 
07    });
08    $("#demo3").jstree({ 
09        "ui" : {
10            "initially_select" : [ "shtml_2" ]
11        },
12        "core" : { "initially_open" : [ "shtml_1" ] },
13        "plugins" : [ "themes", "html_data", "ui", "crrm" ]
14    });
15});

Moving nodes

move_1 uses the default position - "first"

move_2 specifies a position - "before" - meaning that the node specified as a first argument will come above the node specified as the second argument

move_3 will never work, because of the specified check_move function which prevents the first root node from being moved

Root node 1
- Child node 1
- Child node 2
Root node 2

01$(function () {
02    $("#move_1").click(function () { 
03        $("#demo4").jstree("move_node","#thtml_4","#thtml_1"); 
04    });
05    $("#move_2").click(function () { 
06        $("#demo4").jstree("move_node","#thtml_4","#thtml_1", "before"); 
07    });
08    $("#move_3").click(function () { 
09        $("#demo4").jstree("move_node","#thtml_1","#thtml_4"); 
10    });
11    $("#demo4").jstree({ 
12        "crrm" : {
13            "move" : {
14                "default_position" : "first",
15                "check_move" : function (m) { return (m.o[0].id === "thtml_1") ? false : true;  }
16            }
17        },
18        "ui" : {
19            "initially_select" : [ "thtml_2" ]
20        },
21        "core" : { "initially_open" : [ "thtml_1" ] },
22        "plugins" : [ "themes", "html_data", "ui", "crrm" ]
23    });
24});

API

._show_input ( node , callback )

Renders an input field in a node. Used only internally.

.rename ( node )

Sets a node in rename mode and when the user has entered changes, an event is triggered.

mixed node
This can be a DOM node, jQuery node or selector pointing to an element within the tree. If you use the UI plugin - pass null to use the currently selected item.

.create ( node , position , js , callback , skip_rename )

Creates a new node. Triggers an event.

mixed node
This can be a DOM node, jQuery node or selector pointing to the element you want to create in (or next to). If you use the UI plugin - pass null to use the currently selected item.
mixed position
The position of the newly created node. This can be a zero based index to position the element at a specific point among the current children. You can also pass in one of those strings: "before", "after", "inside", "first", "last".
object js
The data for the newly created node. Consists of three keys:
attr - an object of attributes (same used for jQuery.attr(). You can omit this key;
state - a string - either "open" or "closed", for a leaf node - omit this key;
data - a string or an object - if a string is passed it is used for the title of the node, if an object is passed there are two keys you can specify: attr and title;
function callback
A function to be executed once the node is created. You'd be better off waiting for the event.
bool skip_rename
Skips the user input step. The node is created with the data you have supplied.

.remove ( node )

Removes a node. Triggers an event.

mixed node
This can be a DOM node, jQuery node or selector pointing to an element within the tree. If you use the UI plugin - pass null to use the currently selected items.

.check_move ( ), .move_node ( )

Both functions are overwritten from the core in order to implement the new functionality.

.cut ( node )

Cuts a node (prepares it for pasting).

mixed node
This can be a DOM node, jQuery node or selector pointing to an element within the tree. If you use the UI plugin - pass null to use the currently selected item.

.copy ( node )

Copies a node (prepares it for pasting).

mixed node
This can be a DOM node, jQuery node or selector pointing to an element within the tree. If you use the UI plugin - pass null to use the currently selected item.

.paste ( node )

Pastes copied or cut nodes inside a node.

mixed node
This can be a DOM node, jQuery node or selector pointing to an element within the tree. If you use the UI plugin - pass null to use the currently selected item.

jsTree v.1.0 - CRRM plugin

Description