jsTree v.1.0

types plugin

Description

The types enables node types - each node can have a type, and you can define rules on how that type should behave - maximum children count, maximum depth, valid children types, selectable or not, etc.

Configuration

max_children

A number. Default is -1.

Defines maximum number of root nodes (-1 means unlimited, -2 means disable max_children checking in the tree).

max_depth

A number. Default is -1.

Defines maximum depth of the tree (-1 means unlimited, -2 means disable max_depth checking in the tree).

valid_children

A string or array. Default is "all".

Defines valid root node types (could be "all", "none", or an array of type strings).

use_data

A boolean. Default is false.

If set to true jstree will check every node for $.metadata or $.data for rules (valid_children, max_depth & the function rules). Keep in mind jstree will look for this data in $("li-node-here").metadata().jstree.rule_name (or $.data respectively).

type_attr

A string. Default is "rel".

Defines the attribute on each li node, where the type attribute will be stored. For correct usage in IE - do not assign to "type" - it triggers an IE bug.

types

An object.

Defines all the active types in the tree. Each key is the type name, and each value represents the rules for this type. A default type is defined - all nodes with no explicit type set are treated as if they were of the default type.

view source
print?
01types : {
02    // the default type
03    "default" : {
04        "max_children"  : -1,
05        "max_depth"     : -1,
06        "valid_children": "all"
07 
08        // Bound functions - you can bind any other function here (using boolean or function)
09        //"select_node" : true,
10        //"open_node"   : true,
11        //"close_node"  : true,
12        //"create_node" : true,
13        //"delete_node" : true
14    }
15}

For max_children, max_depth & valid_children use the same values as for the tree, but the value you set will only apply for that node type.

You can set an icon key - it should be an object consisting of two keys - image (string - location of the image to be used as an icon) & position (string - left and top pixels of the image - 10px 40px, only useful when using sprites - omit otherwise).

You can set more keys in that object - each key should be a function name, and each value - either a boolean (in order to allow or disallow that operation, on that node type) or a function. If you supply a function - your function will be called with two arguments - the name of the called function (the key) and the arguments passed to that function - you can then decide whether to return true or false.

For any type - for now you can control only functions that take the node being manipulated as the first argument.

Demos

Using the types plugin

view source
print?
01$(function () {
02    $("#demo1").jstree({
03        "types" : {
04            "valid_children" : [ "root" ],
05            "types" : {
06                "root" : {
07                    "icon" : {
08                        "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png"
09                    },
10                    "valid_children" : [ "default" ],
11                    "max_depth" : 2,
12                    "hover_node" : false,
13                    "select_node" : function () {return false;}
14                },
15                "default" : {
16                    "valid_children" : [ "default" ]
17                }
18            }
19        },
20        "plugins" : ["themes","html_data","dnd","ui","types"]
21    });
22});

API

._get_type ( node )

Get the type of a node.

.set_type ( type , node )

Set the type of a node. Triggers an event.

._check ( rule , node , opts )

Checks a rule on a give node. Used mostly internally.

 

.create_node ( ), .check_move ( )

Both functions are overwritten to accomodate the new functionality presented by the plugin.