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