jsTree

Predefined HTML

<!-- SINGLE NODE -->
<li id="node_identificator">
	<a href="#">node_title</a>
</li>

<!-- NODE WITH CHILDREN -->
<li id="node_identificator">
	<a href="#">node_title</a>
	<ul>
		<!-- CHILD NODES -->
	</ul>
</li>

<!-- SINGLE NODE -->
<li id="node_identificator">
	<a href="#" class="language_name">node_title</a>
	<a href="#" class="language_name">node_title</a>
</li>

<!-- NODE WITH CHILDREN -->
<li id="node_identificator">
	<a href="#" class="language_name">node_title</a>
	<a href="#" class="language_name">node_title</a>
	<ul>
		<!-- CHILD NODES -->
	</ul>
</li>

NOTE: if you wish to set a custom icon for a node just use the background-image style property (on the <a> node).

Nested XML

<xml version="1.0" encoding="utf-8" ?>
<root>
	<item id="node_id" [state="closed|open" hasChildren]>
		<content>
			<name [icon="path_to_icon"]><![CDATA[node_title]]></name>
		</content>
		<!-- NESTED ITEM NODES -->
	</item>
</root>

<xml version="1.0" encoding="utf-8" ?>
<root>
	<item id="node_id" [state="closed|open" hasChildren]>
		<content>
			<name lang="language_name" [icon="path_to_icon"]>
				<![CDATA[node_title]]>
			</name>
			<name lang="language_name" [icon="path_to_icon"]>
				<![CDATA[node_title]]>
			</name>
		</content>
		<!-- NESTED ITEM NODES -->
	</item>
</root>

NOTE:

• if the icon attribute (if set) does not contain a "/" the icon is looked up in the current theme directory (so if the icon is in the same folder as the file displaying the tree use "./")
• if the state attribute is present the node is forced in the specified state
• if the hasChildren attribute is present, the output node is displayed as having children even if it does not (useful for async)
• all other attributes of the item node get copied to the <li> node in the output HTML (for example title or rel)
• all attributes (except language and icon) of the name node get copied to the <a> node in the output HTML (for example href)

Flat XML

<xml version="1.0" encoding="utf-8" ?>
<root>
	<item id="node_id" parent_id="parent_node_id" [state="closed|open" hasChildren]>
		<content>
			<name [icon="path_to_icon"]><![CDATA[node_title]]></name>
		</content>
	</item>
	<!-- NEXT ITEM NODES -->
</root>

<xml version="1.0" encoding="utf-8" ?>
<root>
	<item id="node_id" parent_id="parent_node_id" [state="closed|open" hasChildren]>
		<content>
			<name lang="language_name" [icon="path_to_icon"]>
				<![CDATA[node_title]]>
			</name>
			<name lang="language_name" [icon="path_to_icon"]>
				<![CDATA[node_title]]>
			</name>
		</content>
	</item>
	<!-- NEXT ITEM NODES -->
</root>

NOTE:

• in async mode, do not set the parent_id attribute
• if the icon attribute (if set) does not contain a "/" the icon is looked up in the current theme directory (so if the icon is in the same folder as the file displaying the tree use "./")
• if the state attribute is present the node is forced in the specified state
• if the hasChildren attribute is present, the output node is displayed as having children even if it does not (useful for async)
• all other attributes of the item node get copied to the <li> node in the output HTML (for example title or rel)
• all attributes (except language and icon) of the name node get copied to the <a> node in the output HTML (for example href)

JSON

{ 
	attributes: { id : "node_identificator", [attribute : "attribute_value"] }, 
	state: "closed" or "open", 
	data: "node_title", 
	children: [ // an array of child nodes objects ]
}
// data can also be in the form
data : { title : "node_title", icon : "path_to_icon", attributes : {"key" : "value", ... } }

{ 
	attributes: { id : "node_identificator", [attribute : "attribute_value"] }, 
	state: "closed" or "open", 
	data: { "language_name" : "node_title", "language_name" : "node_title", ... }, 
	children: [ // an array of child nodes objects ]
}
// each item in the data object can also be in the form
"language" : { title : "node_title", icon : "path_to_icon", attributes : {"key" : "value", ... } }

NOTE:

• if path_to_icon (if set) does not contain a "/" the icon is looked up in the current theme directory (so if the icon is in the same folder as the file displaying the tree use "./")
• if the state property is present the node is forced in the specified state
• all members of the attributes object node get copied to the <li> node in the output HTML as attributes (for example title or rel)
• all attributes in any data object get copied to the <a> node