jsTree

All of the examples on this page, are built on the predefined JSON example from the data sources demo.

Selecting nodes

The user can select nodes by clicking on them (in this example if Ctrl is held multiple nodes can be selected).

You can define a node to be selected onload by using the selected config setting (check documentation for more).

The get_* functions are most useful for keyboard shortcuts - they can move either the hover or selected states - this is defined using the ui.hover_mode config setting or using the force argument in each of the functions.

The hover_branch functions moves the hover state to a specific node.

There are a few ways to select nodes programatically:

$("#demo1").tree({
  // Data settings omitted
  selected : "pjson_1",
  rules : { multiple : "ctrl" }
});
// Button codes
$.tree_reference('demo1').select_branch($('#pjson_4'));
$.tree_reference('demo1').hover_branch($('#pjson_3'));
$.tree_reference('demo1').get_next();
$.tree_reference('demo1').get_prev();
$.tree_reference('demo1').get_left();
$.tree_reference('demo1').get_right();

Open/close nodes

The user can open and close nodes by clicking the open/close icon where applicable. Here are the programmtic ways:

// Button codes
$.tree_reference('demo2').open_branch($('#pjson_1'));
$.tree_reference('demo2').close_branch($('#pjson_1'));
$.tree_reference('demo2').toggle_branch($('#pjson_1'));

Creating nodes

You can create nodes programatically with the create function. You can place the new node inside another node (even at a specific position among its children) or "below" or "after" the node (if you omit the reference node, the currently selected is used). This is controlled by the rules.createat config option, and the third argument of the create function.

// Button codes
$.tree_reference('demo0').create();
$.tree_reference('demo0').create({ data: 'Created node' },$('#pjson0_3'));
$.tree_reference('demo0').create({ attributes : { 'class' : 'cc' }, data: { title : 'ID and ICON', icon : '../media/images/ok.png' } },$('#pjson0_3'));

Delete nodes (refresh tree)

The remove function removes the currently selected node, or the node it receives as an argument from the tree.

The refresh function is also present in this example so that you can refresh the tree after deleting nodes.

By default deleting nodes is not allowed, this is why in this example rules.deletable is set to "all" (check the documentation for more)

$(function () {
    $("#demo3").tree({
      // Data settings omitted
      rules : {
        deletable : "all"
      }
    });
});
// Button codes
$.tree_reference('demo3').refresh();
$.tree_reference('demo3').remove();
$.tree_reference('demo3').remove($('#pjson3_1'));

Rename nodes

The rename function renames the currently selected node, or the node it receives as an argument.

NOTE: when passing an argument (renaming a node that is not selected), renaming might look a little odd according to theme.

// Button codes
$.tree_reference('demo4').rename();
$.tree_reference('demo4').rename($('#pjson3_2'));

Moving/copying nodes

The user can move nodes around using drag'n'drop. As for copying the rules.drag_copy config option controls the behavior (disabled, when the ctrl key is down, always copy).

In this example the rules.draggable config option is set to "all" so you can drag all nodes around.

You can drag nodes between trees which have rules.multitree set to true.

You can also use the copy, cut, paste functions on the first tree.

$(function () {
    $("#demo5").tree({
      // Data settings omitted
      rules : {
        multitree : true,
        draggable : "all"
      }
    });
});
// Button codes
$.tree_reference('demo5').copy();
$.tree_reference('demo5').cut();
$.tree_reference('demo5').paste();