You are browsing the old site - check the new version out

back to the documentation homepage

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.

types : {
	// the default type
	"default" : {
		"max_children"	: -1,
		"max_depth"		: -1,
		"valid_children": "all"

		// Bound functions - you can bind any other function here (using boolean or function)
		//"select_node"	: true,
		//"open_node"	: true,
		//"close_node"	: true,
		//"create_node"	: true,
		//"delete_node"	: true
	}
}

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

API

._get_type ( node )

Get the type of a node.

  • mixed node

    This can be a DOM node, jQuery node or selector pointing to the element.

.set_type ( type , node )

Set the type of a node. Triggers an event.

  • string type

    The new type.

  • mixed node

    This can be a DOM node, jQuery node or selector pointing to the element.

._check ( rule , node , opts )

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

  • string rule

    The rule to check.

  • mixed node

    This can be a DOM node, jQuery node or selector pointing to the element.

  • mixed opts

    Any additional options regarding the rule. Used internally.

 

.create_node ( ), .check_move ( )

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