<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree » Documentation </title>
<link rel="stylesheet" type="text/css" href="../media/style.css" />
<link rel="shortcut icon" href="../media/favicon.ico" />
<link rel="stylesheet" type="text/css" href="../media/prettify.css" />
<script type="text/javascript" src="../media/prettify.js"></script>
<script type="text/javascript" src="../media/iepngfix_tilebg.js"></script>
<script type="text/javascript">window.onload = function() { prettyPrint(); }</script>
</head>
<body>
<div id="container">
<div id="head">
<h1>jsTree</h1>
<h2>javascript tree component</h2>
<h3>Documentation</h3>
</div>
<div id="sidebar">
<h3 style="margin-top:0;">Documentation</h3>
<ul>
<li class="page_item"><a href="1_files.html" title="Required & optional files">Required & optional files</a></li>
<li class="page_item"><a href="2_creation.html" title="Instance creation">Instance creation</a></li>
<li class="page_item"><a href="3_configuration.html" title="Configuration">Configuration</a></li>
<li class="page_item current_page_item"><a href="4_data.html" title="Data sources">Data sources</a></li>
<li class="page_item"><a href="5_customize.html" title="Customization">Customization</a></li>
<li class="page_item"><a href="6_output.html" title="Output">Output</a></li>
<li class="page_item"><a href="7_api.html" title="API">API </a></li>
</ul>
<h3>Examples</h3>
<ul>
<li class="page_item"><a href="../_examples/1_datasources.html" title="Data sources">Data sources</a></li>
<li class="page_item"><a href="../_examples/2_operations.html" title="Operations">Operations</a></li>
<li class="page_item"><a href="../_examples/3_callbacks.html" title="Callbacks">Callbacks</a></li>
<li class="page_item"><a href="../_examples/4_themes.html" title="Themes">Themes</a></li>
<li class="page_item"><a href="../_examples/5_others.html" title="Others">Other examples</a></li>
<li class="page_item important"><a href="../_examples/7_full.html" title="Full example">Full PHP & mySQL example </a></li>
</ul>
</div>
<div id="data" style="margin-top:-45px;">
<div id="content">
<ul class='nav'>
<li><a href="3_configuration.html" title="Configuration">« Configuration</a></li>
<li><a href="../index.html">Up to Reference</a></li>
<li><a href="5_customize.html" title="Customization">Customization »</a></li>
</ul>
<h2 style="margin-top:25px;">Data sources</h2>
<div class="entry"><div id="documentation">
<h2>Predefined HTML</h2>
<div class="source">without language versions</div>
<pre><!-- SINGLE NODE -->
<li id="<em>node_identificator</em>">
<a href="#"><em>node_title</em></a>
</li>
<!-- NODE WITH CHILDREN -->
<li id="<em>node_identificator</em>">
<a href="#"><em>node_title</em></a>
<ul>
<!-- CHILD NODES -->
</ul>
</li>
</pre>
<div class="source">with language versions</div>
<pre><!-- SINGLE NODE -->
<li id="<em>node_identificator</em>">
<a href="#" class="<em>language_name</em>"><em>node_title</em></a>
<a href="#" class="<em>language_name</em>"><em>node_title</em></a>
</li>
<!-- NODE WITH CHILDREN -->
<li id="<em>node_identificator</em>">
<a href="#" class="<em>language_name</em>"><em>node_title</em></a>
<a href="#" class="<em>language_name</em>"><em>node_title</em></a>
<ul>
<!-- CHILD NODES -->
</ul>
</li>
</pre>
<p class="note">NOTE: if you wish to set a custom icon for a node just use the <span class="var">background-image</span> style property (on the <span class="var"><a></span> node).</p>
<h2>Nested XML</h2>
<div class="source">WITHOUT language versions</div>
<pre><xml version="1.0" encoding="utf-8" ?>
<root>
<item id="<em>node_id</em>" [state="<em>closed|open</em>" <em>hasChildren</em>]>
<content>
<name [icon="<em>path_to_icon</em>"]><![CDATA[<em>node_title</em>]]></name>
</content>
<!-- NESTED ITEM NODES -->
</item>
</root>
</pre>
<div class="source">WITH language versions</div>
<pre><xml version="1.0" encoding="utf-8" ?>
<root>
<item id="<em>node_id</em>" [state="<em>closed|open</em>" <em>hasChildren</em>]>
<content>
<name lang="<em>language_name</em>" [icon="<em>path_to_icon</em>"]>
<![CDATA[<em>node_title</em>]]>
</name>
<name lang="<em>language_name</em>" [icon="<em>path_to_icon</em>"]>
<![CDATA[<em>node_title</em>]]>
</name>
</content>
<!-- NESTED ITEM NODES -->
</item>
</root>
</pre>
<p class="note">NOTE:</p>
<ul class="note">
<li>if the <span class="var">icon</span> attribute (if set) does not contain a <span class="val">"/"</span> 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 <span class="val">"./"</span>)</li>
<li>if the <span class="var">state</span> attribute is present the node is forced in the specified state</li>
<li>if the <span class="var">hasChildren</span> attribute is present, the output node is displayed as having children even if it does not (useful for <span class="var">async</span>)</li>
<li>all other attributes of the <span class="var">item</span> node get copied to the <span class="var"><li></span> node in the output HTML (for example <span class="var">title</span> or <span class="var">rel</span>)</li>
<li>all attributes (except <span class="var">language</span> and <span class="var">icon</span>) of the <span class="var">name</span> node get copied to the <span class="var"><a></span> node in the output HTML (for example <span class="var">href</span>)</li>
</ul>
<h2>Flat XML</h2>
<div class="source">WITHOUT language versions</div>
<pre><xml version="1.0" encoding="utf-8" ?>
<root>
<item id="<em>node_id</em>" parent_id="<em>parent_node_id</em>" [state="<em>closed|open</em>" <em>hasChildren</em>]>
<content>
<name [icon="<em>path_to_icon</em>"]><![CDATA[<em>node_title</em>]]></name>
</content>
</item>
<!-- NEXT ITEM NODES -->
</root>
</pre>
<div class="source">WITH language versions</div>
<pre><xml version="1.0" encoding="utf-8" ?>
<root>
<item id="<em>node_id</em>" parent_id="<em>parent_node_id</em>" [state="<em>closed|open</em>" <em>hasChildren</em>]>
<content>
<name lang="<em>language_name</em>" [icon="<em>path_to_icon</em>"]>
<![CDATA[<em>node_title</em>]]>
</name>
<name lang="<em>language_name</em>" [icon="<em>path_to_icon</em>"]>
<![CDATA[<em>node_title</em>]]>
</name>
</content>
</item>
<!-- NEXT ITEM NODES -->
</root>
</pre>
<p class="note">NOTE:</p>
<ul class="note">
<li>in <span class="var">async</span> mode, do not set the <span class="var">parent_id</span> attribute</li>
<li>if the <span class="var">icon</span> attribute (if set) does not contain a <span class="val">"/"</span> 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 <span class="val">"./"</span>)</li>
<li>if the <span class="var">state</span> attribute is present the node is forced in the specified state</li>
<li>if the <span class="var">hasChildren</span> attribute is present, the output node is displayed as having children even if it does not (useful for <span class="var">async</span>)</li>
<li>all other attributes of the <span class="var">item</span> node get copied to the <span class="var"><li></span> node in the output HTML (for example <span class="var">title</span> or <span class="var">rel</span>)</li>
<li>all attributes (except <span class="var">language</span> and <span class="var">icon</span>) of the <span class="var">name</span> node get copied to the <span class="var"><a></span> node in the output HTML (for example <span class="var">href</span>)</li>
</ul>
<h2>JSON</h2>
<div class="source">WITHOUT language versions</div>
<pre>{
attributes: { id : "<em>node_identificator</em>", [<em>attribute</em> : "<em>attribute_value</em>"] },
state: "closed" or "open",
data: "<em>node_title</em>",
children: [ // an array of child nodes objects ]
}
// data can also be in the form
data : { title : "<em>node_title</em>", icon : "<em>path_to_icon</em>", attributes : {"<em>key</em>" : "<em>value</em>", ... } }
</pre>
<div class="source">WITH language versions</div>
<pre>{
attributes: { id : "<em>node_identificator</em>", [<em>attribute</em> : "<em>attribute_value</em>"] },
state: "closed" or "open",
data: { "language_name" : "<em>node_title</em>", "language_name" : "<em>node_title</em>", ... },
children: [ // an array of child nodes objects ]
}
// each item in the data object can also be in the form
"language" : { title : "<em>node_title</em>", icon : "<em>path_to_icon</em>", attributes : {"<em>key</em>" : "<em>value</em>", ... } }
</pre>
<p class="note">NOTE:</p>
<ul class="note">
<li>if <span class="var">path_to_icon</span> (if set) does not contain a <span class="val">"/"</span> 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 <span class="val">"./"</span>)</li>
<li>if the <span class="var">state</span> property is present the node is forced in the specified state</li>
<li>all members of the <span class="var">attributes</span> object node get copied to the <span class="var"><li></span> node in the output HTML as attributes (for example <span class="var">title</span> or <span class="var">rel</span>)</li>
<li>all <span class="var">attributes</span> in any <span class="var">data</span> object get copied to the <span class="var"><a></span> node</li>
</ul>
</div></div>
</div>
</div>
</div>
</body>
</html>