<!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 » Examples </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>
<link rel="stylesheet" type="text/css" href="../../source/tree_component.css" />
<script type="text/javascript" src="../../source/_lib.js"></script>
<script type="text/javascript" src="../../source/tree_component.js"></script>
</head>
<body>
<div id="container">
<div id="head">
<h1>jsTree</h1>
<h2>javascript tree component</h2>
<h3>Examples</h3>
</div>
<div id="sidebar">
<h3 style="margin-top:0;">Documentation</h3>
<ul>
<li class="page_item"><a href="../_documentation/1_files.html" title="Required & optional files">Required & optional files</a></li>
<li class="page_item"><a href="../_documentation/2_creation.html" title="Instance creation">Instance creation</a></li>
<li class="page_item"><a href="../_documentation/3_configuration.html" title="Configuration">Configuration</a></li>
<li class="page_item"><a href="../_documentation/4_data.html" title="Data sources">Data sources</a></li>
<li class="page_item"><a href="../_documentation/5_customize.html" title="Customization">Customization</a></li>
<li class="page_item"><a href="../_documentation/6_output.html" title="Output">Output</a></li>
<li class="page_item"><a href="../_documentation/7_api.html" title="API">API </a></li>
</ul>
<h3>Examples</h3>
<ul>
<li class="page_item"><a href="1_datasources.html" title="Data sources">Data sources</a></li>
<li class="page_item current_page_item"><a href="2_operations.html" title="Operations">Operations</a></li>
<li class="page_item"><a href="3_callbacks.html" title="Callbacks">Callbacks</a></li>
<li class="page_item"><a href="4_themes.html" title="Themes">Themes</a></li>
<li class="page_item"><a href="5_others.html" title="Others">Other examples</a></li>
<li class="page_item important"><a href="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="1_datasources.html" title="Data sources">« Data sources</a></li>
<li><a href="../index.html">Up to Reference</a></li>
<li><a href="3_callbacks.html" title="Callbacks">Callbacks »</a></li>
</ul>
<h2 style="margin-top:25px;">Operations</h2>
<div class="entry"><div id="documentation">
<p>All of the examples on this page, are built on the predefined JSON example from the data sources demo.</p>
<h2>Selecting nodes</h2>
<p>The user can select nodes by clicking on them (in this example if Ctrl is held multiple nodes can be selected).</p>
<p>You can define a node to be selected onload by using the <span class="var">selected</span> config setting (check documentation for more).</p>
<p>The <span class="var">get_*</span> functions are most useful for keyboard shortcuts - they can move either the hover or selected states - this is defined using the <span class="var">ui.hover_mode</span> config setting or using the <span class="var">force</span> argument in each of the functions.</p>
<p>The <span class="var">hover_branch</span> functions moves the hover state to a specific node.</p>
<p>There are a few ways to select nodes programatically:</p>
<input type="button" value="select_branch" onclick="$.tree_reference('demo1').select_branch($('#pjson_4'));" />
<input type="button" value="hover_branch" onclick="$.tree_reference('demo1').hover_branch($('#pjson_3'));" />
<input type="button" value="get_next" onclick="$.tree_reference('demo1').get_next();"/>
<input type="button" value="get_prev" onclick="$.tree_reference('demo1').get_prev();" />
<input type="button" value="get_left" onclick="$.tree_reference('demo1').get_left();" />
<input type="button" value="get_right" onclick="$.tree_reference('demo1').get_right();" />
<div id="demo1" class="demo"></div>
<div id="sources1" class="sources">
<pre>
$("#demo1").tree({
// Data settings omitted
selected : "pjson_1",
rules : { multiple : "ctrl" }
});
// Button codes
$.tree_reference('demo1').select_branch($('#pjson_4'));
$.tree_reference('demo1').hover_branch($('#pjson_3'));
$.tree_reference('demo1').get_next();
$.tree_reference('demo1').get_prev();
$.tree_reference('demo1').get_left();
$.tree_reference('demo1').get_right();
</pre>
</div>
<script type="text/javascript">
$(function () {
$("#demo1").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson_1" }, state: "open", data: "Root node 1", children : [
{ attributes: { id : "pjson_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson_3" }, data: "Child node 2" },
{ attributes: { id : "pjson_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson_5" }, data: "Root node 2" }
]
},
selected : "pjson_1",
rules : { multiple : "ctrl" }
});
});
</script>
<h2>Open/close nodes</h2>
<p>The user can open and close nodes by clicking the open/close icon where applicable. Here are the programmtic ways:</p>
<input type="button" value="open_branch" onclick="$.tree_reference('demo2').open_branch($('#pjson1_1'));" />
<input type="button" value="close_branch" onclick="$.tree_reference('demo2').close_branch($('#pjson1_1'));" />
<input type="button" value="toggle_branch" onclick="$.tree_reference('demo2').toggle_branch($('#pjson1_1'));" />
<div id="demo2" class="demo"></div>
<div id="sources2" class="sources">
<pre>
// Button codes
$.tree_reference('demo2').open_branch($('#pjson_1'));
$.tree_reference('demo2').close_branch($('#pjson_1'));
$.tree_reference('demo2').toggle_branch($('#pjson_1'));
</pre>
</div>
<script type="text/javascript">
$(function () {
$("#demo2").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson1_1" }, data: "Root node 1", children : [
{ attributes: { id : "pjson1_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson1_3" }, data: "Child node 2" },
{ attributes: { id : "pjson1_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson1_5" }, data: "Root node 2" }
]
}
});
});
</script>
<h2>Creating nodes</h2>
<p>You can create nodes programatically with the <span class="var">create</span> function. You can place the new node inside another node (even at a specific position among its children) or <span class="val">"below"</span> or <span class="val">"after"</span> the node (if you omit the reference node, the currently selected is used). This is controlled by the <span class="var">rules.createat</span> config option, and the third argument of the create function.</p>
<input type="button" value="create" onclick="$.tree_reference('demo0').create();" />
<input type="button" value="create with title" onclick="$.tree_reference('demo0').create({ data: 'Created node' },$('#pjson0_3'));" />
<input type="button" value="create with title and icon" onclick="$.tree_reference('demo0').create({ attributes : { 'class' : 'cc' }, data: { title : 'ID and ICON', icon : '../media/images/ok.png' } },$('#pjson0_3'));" />
<div id="demo0" class="demo"></div>
<div id="sources0" class="sources">
<pre>
// Button codes
$.tree_reference('demo0').create();
$.tree_reference('demo0').create({ data: 'Created node' },$('#pjson0_3'));
$.tree_reference('demo0').create({ attributes : { 'class' : 'cc' }, data: { title : 'ID and ICON', icon : '../media/images/ok.png' } },$('#pjson0_3'));
</pre>
</div>
<script type="text/javascript">
$(function () {
$("#demo0").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson0_1" }, data: "Root node 1", children : [
{ attributes: { id : "pjson0_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson0_3" }, data: "Child node 2" },
{ attributes: { id : "pjson0_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson0_5" }, data: "Root node 2" }
]
}
});
});
</script>
<h2>Delete nodes (refresh tree)</h2>
<p>The <span class="var">remove</span> function removes the currently selected node, or the node it receives as an argument from the tree.</p>
<p>The <span class="var">refresh</span> function is also present in this example so that you can refresh the tree after deleting nodes.</p>
<p>By default deleting nodes is not allowed, this is why in this example <span class="var">rules.deletable</span> is set to <span class="val">"all"</span> (check the documentation for more)</p>
<input type="button" value="refresh" onclick="$.tree_reference('demo3').refresh();" />
<input type="button" value="remove" onclick="$.tree_reference('demo3').remove();" />
<input type="button" value="remove($('#pjson2_3'))" onclick="$.tree_reference('demo3').remove($('#pjson2_3'));" />
<div id="demo3" class="demo"></div>
<div id="sources3" class="sources">
<pre>
$(function () {
$("#demo3").tree({
// Data settings omitted
rules : {
deletable : "all"
}
});
});
// Button codes
$.tree_reference('demo3').refresh();
$.tree_reference('demo3').remove();
$.tree_reference('demo3').remove($('#pjson3_1'));
</pre>
</div>
<script type="text/javascript">
$(function () {
$("#demo3").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson2_1" }, data: "Root node 1", children : [
{ attributes: { id : "pjson2_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson2_3" }, data: "Child node 2" },
{ attributes: { id : "pjson2_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson2_5" }, data: "Root node 2" }
]
},
rules : {
deletable : "all"
}
});
});
</script>
<h2>Rename nodes</h2>
<p>The <span class="var">rename</span> function renames the currently selected node, or the node it receives as an argument.</p>
<p class="note">NOTE: when passing an argument (renaming a node that is not selected), renaming might look a little odd according to theme.</p>
<input type="button" value="rename" onclick="$.tree_reference('demo4').rename();" />
<input type="button" value="rename($('#pjson3_2'))" onclick="$.tree_reference('demo4').rename($('#pjson3_2'));" />
<div id="demo4" class="demo"></div>
<div id="sources4" class="sources">
<pre>
// Button codes
$.tree_reference('demo4').rename();
$.tree_reference('demo4').rename($('#pjson3_2'));
</pre>
</div>
<script type="text/javascript">
$(function () {
$("#demo4").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson3_1" }, data: "Root node 1", children : [
{ attributes: { id : "pjson3_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson3_3" }, data: "Child node 2" },
{ attributes: { id : "pjson3_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson3_5" }, data: "Root node 2" }
]
}
});
});
</script>
<h2>Moving/copying nodes</h2>
<p>The user can move nodes around using drag'n'drop. As for copying the <span class="var">rules.drag_copy</span> config option controls the behavior (disabled, when the ctrl key is down, always copy).</p>
<p>In this example the <span class="var">rules.draggable</span> config option is set to <span class="val">"all"</span> so you can drag all nodes around.</p>
<p>You can drag nodes between trees which have <span class="var">rules.multitree</span> set to <span class="val">true</span>.</p>
<p>You can also use the <span class="var">copy, cut, paste</span> functions on the first tree.</p>
<input type="button" value="copy" onclick="$.tree_reference('demo5').copy();" />
<input type="button" value="cut" onclick="$.tree_reference('demo5').cut();" />
<input type="button" value="paste" onclick="$.tree_reference('demo5').paste();" />
<div style="width:200px; float:left;">
<div id="demo5" class="demo"></div>
<div id="demo6" class="demo" style="margin-top:10px;"></div>
</div>
<div id="sources5" class="sources">
<pre>
$(function () {
$("#demo5").tree({
// Data settings omitted
rules : {
multitree : true,
draggable : "all"
}
});
});
// Button codes
$.tree_reference('demo5').copy();
$.tree_reference('demo5').cut();
$.tree_reference('demo5').paste();
</pre>
</div>
<script type="text/javascript">
$(function () {
$("#demo5").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson4_1" }, data: "Root node 1", children : [
{ attributes: { id : "pjson4_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson4_3" }, data: "Child node 2" },
{ attributes: { id : "pjson4_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson4_5" }, data: "Root node 2" }
]
},
rules : {
multitree : true,
draggable : "all"
}
});
$("#demo6").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson5_1" }, data: "Root node 1", children : [
{ attributes: { id : "pjson5_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson5_3" }, data: "Child node 2" },
{ attributes: { id : "pjson5_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson5_5" }, data: "Root node 2" }
]
},
rules : {
multitree : true,
draggable : "all"
}
});
});
</script>
</div></div>
</div>
</div>
</div>
</body>
</html>