# jsTree

## javascript tree component

### Documentation

## Data sources

## Predefined HTML

without language versions

    <!-- 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>

with language versions

    <!-- 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

WITHOUT language versions

    <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>

WITH language versions

    <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

WITHOUT language versions

    <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>

WITH language versions

    <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

WITHOUT language versions

    {
    	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", ... } }

WITH language versions

    {
    	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