jsTree v.1.0

html_data plugin

Description

The html_data plugin enables jsTree to convert nested unordered lists to interactive trees. jsTree can also get HTML from the server insert it into the DOM and convert that to a tree.

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

<li>
	<a href="some_value_here">Node title</a>
	<!-- UL node only needed for children - omit if there are no children -->
	<ul>
		<!-- Children LI nodes here -->
	</ul>
</li>

If you inspect the resulting structure you will find it a bit different - that is because jstree will automatically do some corrections.

<!-- one of the three classes will be applied depending on node structure -->
<li class="[ jstree-open | jstree-closed | jstree-leaf ]">
	<!-- an INS element is inserted -->
	<ins class="jstree-icon">&#160;</ins>
	<a href="some_value_here">
		<!-- another INS element is inserted -->
		<ins class="jstree-icon">&#160;</ins>
		Node title
	</a>
</li>

Both ins elements are inserted for visualization purposes. As for the class (jstree-open, jstree-closed) - you can specify that yourself to force the node to appear either closed or opened. Making a node with no children appear closed is often used - if you use ajax, opening a closed node with no children will result in jstree making a server call for the children (see the demo below).

Configuration

data

A HTML string (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 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.

correct_state

A Boolean. Default is true.

If this option is set to true if an AJAX request 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).

NOTE:
If both data and ajax are not set, the current container's HTML is used to build the tree.
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 initial content (convert an existing list)

Using the data config option

Using the ajax config option

Using both the data & ajax config options

API

Both dummy functions - _is_loaded and load_node are overwritten.

.load_node_html ( node , success_callback , error_callback )

This function is called instead of load_node.