Other examples

Rules

Using the various rules, the developer can limit the user interactions.

In this example you won't be able to select the first root node, all nodes are renamable, but you can only create new items inside folders. You can drag folders around, but not the root nodes. While dragging, you won't be able to place the dragged item inside the second root node (you can only initiate the drag using the left mouse button). There is also one foreign item, that can be dragged onto the tree, but only on the second root node.

You can drop me on the tree
$(function () {
    $("#demo1").tree({
      // Data configuration omitted
      rules : {
        clickable : [ "root2", "folder" ],
        deletable : [ "root2", "folder" ],
        renameable : "all",
        creatable : [ "folder" ],
        draggable : [ "folder" ],
        dragrules : [ "folder * folder", "folder inside root", "tree-drop * folder" ],
        drag_button : "left",
        droppable : [ "tree-drop" ]
      }
    });
});

Metadata

Metadata allows you to store the node type in a javascript object, passed as an attribute to each node. You can also store any data you need.

Combined with rules.use_inline metadata allows you to set per-node rules - clickable, renamable, etc. (You can also use three new rules: valid_children, max_depth and max_children)

This is the previous example, but with metadata added. You won't be able to drag the 'Child node 2' node, although its type is "folder". It may also contain only one node, and that node won't be allowed to have children.

You can drop me on the tree
$(function () {
    $("#demo2").tree({
      data  : {
        type  : "json",
        json  : [ 
          { attributes: { id : "pjson1_1", rel : "root" }, state: "open", data: "Root node 1", children : [
            { attributes: { id : "pjson1_2", rel : "folder" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
            { attributes: { id : "pjson1_3", rel : "folder", mdata : "{ draggable : false, max_children : 1, max_depth : 1 }" }, data: "Child node 2" },
            { attributes: { id : "pjson1_4", rel : "folder" }, data: "Some other child node" }
          ]}, 
          { attributes: { id : "pjson1_5", rel : "root2" }, data: "Root node 2" } 
        ]
      },
      rules : {
        metadata : "mdata",
        use_inline : true,
        clickable : [ "root2", "folder" ],
        deletable : "none",
        renameable : "all",
        creatable : [ "folder" ],
        draggable : [ "folder" ],
        dragrules : [ "folder * folder", "folder inside root", "tree-drop inside root2" ],
        drag_button : "left",
        droppable : [ "tree-drop" ]
      }
    });
});

Cookies

jsTree can save the user's current view in a cookie - for more on the cookie options - check the documentation. To see it in action - make a selection (or open/close a node) and refresh the page.

$(function () {
    $("#demo3").tree({
      // data configuration omitted
      cookies : { prefix : "tree1", opts : { path : '/' } } 
    });
});

Rollback

Rollbacks are good to use when you need to do some async calls and then maybe revert the tree to a previous state (for example, if the server operation failed).

$(function () {
    $("#demo4").tree({
      // data configuration omitted
      callback : { 
        onrename : function (n,l,tree_ref,rollback) {
          tree_ref.lock(true);
          setTimeout(function () {
            $.tree_rollback(rollback);
            tree_ref.lock(false);
          },1000);
        }
      }
    });
});

Search

You can pass the search function a string, and the nodes in the tree containing that string will have the class "search" applied to them. If async is used, a request is made to the server (data.url) with the GET/POST (according to data.method config) param "search" filled with the user search string - the expected response is a JSON array of node ids which need to be opened in order to get to the search results.

// Search
$.tree_reference('demo5').search('other');
// Clear search
$.tree_reference('demo5').search('');

Context menu

You can modify the functions shown in the context menu or disable it altogether (just set ui.context to false. In this example the context menu is be replaced.

$(function () {
    $("#demo6").tree({
      // data config omitted
      ui : {
        context : [
			{
				id		: "ok",
				label	: "test entry", 
				icon	: "../media/images/ok.png",
				visible	: function (NODE, TREE_OBJ) { 
					// return -1 for not visible
					if(NODE.attr("id") == "pjson5_2") return -1; 
					// return false for disabled
					if(NODE.attr("id") == "pjson5_3") return false; 
					// return true for visible and clickable
					return true;
				}, 
				action	: function (NODE, TREE_OBJ) { 
					// Just a demo of the arguments
					alert('"' + NODE.children("a").text() + '" from "' + TREE_OBJ.container.attr("id") + '"'); 
				} 
			}
        ]
      }
    });
});