zhxd2
/
tripal


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!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 &raquo; 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 &amp; optional files">Required &#038; 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&nbsp;</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 &amp; mySQL example&nbsp;</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">&laquo;&nbsp;Configuration</a></li>
					<li><a href="../index.html">Up to Reference</a></li>
					<li><a href="5_customize.html" title="Customization">Customization&nbsp;&raquo;</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>&lt;!-- SINGLE NODE --&gt;
&lt;li id=&quot;<em>node_identificator</em>&quot;&gt;
	&lt;a href=&quot;#&quot;&gt;<em>node_title</em>&lt;/a&gt;
&lt;/li&gt;

&lt;!-- NODE WITH CHILDREN --&gt;
&lt;li id=&quot;<em>node_identificator</em>&quot;&gt;
	&lt;a href=&quot;#&quot;&gt;<em>node_title</em>&lt;/a&gt;
	&lt;ul&gt;
		&lt;!-- CHILD NODES --&gt;
	&lt;/ul&gt;
&lt;/li&gt;
</pre>
<div class="source">with language versions</div>
<pre>&lt;!-- SINGLE NODE --&gt;
&lt;li id=&quot;<em>node_identificator</em>&quot;&gt;
	&lt;a href=&quot;#&quot; class=&quot;<em>language_name</em>&quot;&gt;<em>node_title</em>&lt;/a&gt;
	&lt;a href=&quot;#&quot; class=&quot;<em>language_name</em>&quot;&gt;<em>node_title</em>&lt;/a&gt;
&lt;/li&gt;

&lt;!-- NODE WITH CHILDREN --&gt;
&lt;li id=&quot;<em>node_identificator</em>&quot;&gt;
	&lt;a href=&quot;#&quot; class=&quot;<em>language_name</em>&quot;&gt;<em>node_title</em>&lt;/a&gt;
	&lt;a href=&quot;#&quot; class=&quot;<em>language_name</em>&quot;&gt;<em>node_title</em>&lt;/a&gt;
	&lt;ul&gt;
		&lt;!-- CHILD NODES --&gt;
	&lt;/ul&gt;
&lt;/li&gt;
</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">&lt;a&gt;</span> node).</p>

<h2>Nested XML</h2>
<div class="source">WITHOUT language versions</div>
<pre>&lt;xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;root&gt;
	&lt;item id=&quot;<em>node_id</em>&quot; [state=&quot;<em>closed|open</em>&quot; <em>hasChildren</em>]&gt;
		&lt;content&gt;
			&lt;name [icon=&quot;<em>path_to_icon</em>&quot;]&gt;&lt;![CDATA[<em>node_title</em>]]&gt;&lt;/name&gt;
		&lt;/content&gt;
		&lt;!-- NESTED ITEM NODES --&gt;
	&lt;/item&gt;
&lt;/root&gt;
</pre>
<div class="source">WITH language versions</div>
<pre>&lt;xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;root&gt;
	&lt;item id=&quot;<em>node_id</em>&quot; [state=&quot;<em>closed|open</em>&quot; <em>hasChildren</em>]&gt;
		&lt;content&gt;
			&lt;name lang=&quot;<em>language_name</em>&quot; [icon=&quot;<em>path_to_icon</em>&quot;]&gt;
				&lt;![CDATA[<em>node_title</em>]]&gt;
			&lt;/name&gt;
			&lt;name lang=&quot;<em>language_name</em>&quot; [icon=&quot;<em>path_to_icon</em>&quot;]&gt;
				&lt;![CDATA[<em>node_title</em>]]&gt;
			&lt;/name&gt;
		&lt;/content&gt;
		&lt;!-- NESTED ITEM NODES --&gt;
	&lt;/item&gt;
&lt;/root&gt;
</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">&lt;li&gt;</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">&lt;a&gt;</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>&lt;xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;root&gt;
	&lt;item id=&quot;<em>node_id</em>&quot; parent_id=&quot;<em>parent_node_id</em>&quot; [state=&quot;<em>closed|open</em>&quot; <em>hasChildren</em>]&gt;
		&lt;content&gt;
			&lt;name [icon=&quot;<em>path_to_icon</em>&quot;]&gt;&lt;![CDATA[<em>node_title</em>]]&gt;&lt;/name&gt;
		&lt;/content&gt;
	&lt;/item&gt;
	&lt;!-- NEXT ITEM NODES --&gt;
&lt;/root&gt;
</pre>
<div class="source">WITH language versions</div>
<pre>&lt;xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;root&gt;
	&lt;item id=&quot;<em>node_id</em>&quot; parent_id=&quot;<em>parent_node_id</em>&quot; [state=&quot;<em>closed|open</em>&quot; <em>hasChildren</em>]&gt;
		&lt;content&gt;
			&lt;name lang=&quot;<em>language_name</em>&quot; [icon=&quot;<em>path_to_icon</em>&quot;]&gt;
				&lt;![CDATA[<em>node_title</em>]]&gt;
			&lt;/name&gt;
			&lt;name lang=&quot;<em>language_name</em>&quot; [icon=&quot;<em>path_to_icon</em>&quot;]&gt;
				&lt;![CDATA[<em>node_title</em>]]&gt;
			&lt;/name&gt;
		&lt;/content&gt;
	&lt;/item&gt;
	&lt;!-- NEXT ITEM NODES --&gt;
&lt;/root&gt;
</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">&lt;li&gt;</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">&lt;a&gt;</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 : &quot;<em>node_identificator</em>&quot;, [<em>attribute</em> : &quot;<em>attribute_value</em>&quot;] }, 
	state: &quot;closed&quot; or &quot;open&quot;, 
	data: &quot;<em>node_title</em>&quot;, 
	children: [ // an array of child nodes objects ]
}
// data can also be in the form
data : { title : &quot;<em>node_title</em>&quot;, icon : &quot;<em>path_to_icon</em>&quot;, attributes : {&quot;<em>key</em>&quot; : &quot;<em>value</em>&quot;, ... } }
</pre>
<div class="source">WITH language versions</div>
<pre>{ 
	attributes: { id : &quot;<em>node_identificator</em>&quot;, [<em>attribute</em> : &quot;<em>attribute_value</em>&quot;] }, 
	state: &quot;closed&quot; or &quot;open&quot;, 
	data: { &quot;language_name&quot; : &quot;<em>node_title</em>&quot;, &quot;language_name&quot; : &quot;<em>node_title</em>&quot;, ... }, 
	children: [ // an array of child nodes objects ]
}
// each item in the data object can also be in the form
&quot;language&quot; : { title : &quot;<em>node_title</em>&quot;, icon : &quot;<em>path_to_icon</em>&quot;, attributes : {&quot;<em>key</em>&quot; : &quot;<em>value</em>&quot;, ... } }
</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">&lt;li&gt;</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">&lt;a&gt;</span> node</li>
</ul>

				</div></div>
			</div>
		</div>
	</div>
</body>
</html>