zhxd2
/
tripal


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
							<!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; 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 &amp; optional files">Required &#038; 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&nbsp;</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 &amp; mySQL example&nbsp;</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">&laquo;&nbsp;Data sources</a></li>
					<li><a href="../index.html">Up to Reference</a></li>
					<li><a href="3_callbacks.html" title="Callbacks">Callbacks&nbsp;&raquo;</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>