jsTree v.1.0 - json_data plugin

Description

The json_data plugin enables jsTree to convert JSON objects to interactive trees. The data (JSON) can be set up in the config or retrieved from a server (also ondemand). Version 1.0 also introduces the experimental progressive render feature, which is suitable for large heavy trees, when the DOM would be too heavy to manipulate.

The basic structure you need to follow when supplying data in the JSON format is:

{ 
	data : "node_title", 
	// omit `attr` if not needed; the `attr` object gets passed to the jQuery `attr` function
	attr : { id : "node_identificator", some-other-attribute : "attribute_value" }, 
	// `state` and `children` are only used for NON-leaf nodes
	state: "closed", // or "open", defaults to "closed"
	children: [ /* an array of child nodes objects */ ]
}

The attr object will appear as attributes on the resulting li node.

You may need to pass some attributes to the a node, or set some metadata, or use language versions (for the languages plugin):

{
	// `data` can also be an object
	data : { 
		title : "The node title", 
		// omit when not needed
		attr : {}, 
		// if `icon` contains a slash / it is treated as a file, used for background
		// otherwise - it is added as a class to the <ins> node
		icon : "folder"
	},

	// the `metadata` property will be saved using the jQuery `data` function on the `li` node
	metadata : "a string, array, object, etc",

	// if you use the language plugin - just set this property
	// also make sure that `data` is an array of objects
	language : "en" // any code you are using
}

As seen in the first example below - you can also use a simple string to define a node (Child 1 & Child 2).

Configuration

data

A JSON object (or false if not used). Default is false.

Specifies the content to load into the container and convert to a tree.

ajax

An object (or false if not used). Default is false.

The ajax config object is pretty much the same as the jQuery ajax settings object.

You can set the data option to a function, that will be executed in the current tree's scope (this will be the tree instance) and gets the node about to be open as a paramater (or -1 for initial load). Whatever you return in the data function will be sent to the server as data (so for example you can send the node's ID).

You can set the url option to a function, that will be executed in the current tree's scope (this will be the tree instance) and gets the node about to be open as a paramater (or -1 for initial load). Whatever you return in the url function will be used as the ajax URL (so that you can accomodate pretty paths such as /get_children/node_2).

The error and success functions (if present) also fire in the context of the tree, and if you return a value in the success function it will be used to populate the tree - this can be useful if you want to somehow change what the server returned on the client side before it is displayed in the tree (for example some .NET json implementations require this to work: "success" : function (data) { return data.d; }.

correct_state

A Boolean. Default is true.

If this option is set to true if an AJAX returns an empty result, the node that was about to be opened will be converted to a leaf node (the open icon will no longer be displayed).

progressive_render

A Boolean. Default is false.

If this option is set to true only the visible (open nodes) parts of the returned JSON are converted to DOM nodes, any hidden parts are saved away and parsed ondemand (when a node becomes visible). This is useful when you have a large nested tree which would result in a heavy DOM.

NOTE:
If both data and ajax are set the initial tree is rendered from the data string. When opening a closed node (that has no loaded children) an AJAX request is made.

Demos

Using the data config option

Using the ajax config option

Using the progressive render config option

Using both the data & ajax config options

API

Both dummy functions - _is_loaded and load_node are overwritten.

.load_node_json ( node , success_callback , error_callback )

This function is called instead of load_node.

._parse_json ( data , is_callback )

This function converts JSON nodes to the DOM structure required by jstree. Returns a jQuery object.

.get_json ( node , li_attr , a_attr )

This function returns an array of tree nodes converted back to JSON.