Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

632 lines (605 sloc) 13.756 kb
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jqTree</title>
<link rel="stylesheet" href="extra/css/gridless.css">
<link rel="stylesheet" href="extra/syntax_highlighter/shCore.css">
<link rel="stylesheet" href="extra/syntax_highlighter/shThemeDefault.css">
<link rel="stylesheet" href="extra/syntax_highlighter/shThemeRDark.css">
<link rel="stylesheet" href="jqtree.css">
<link rel="stylesheet" href="extra/css/documentation.css">
<link href='http://fonts.googleapis.com/css?family=Corben:bold&amp;v1' rel='stylesheet' type='text/css'>
<script src="extra/js/jquery-1.7.2.min.js"></script>
<script src="extra/js/jquery.lettering.js"></script>
<script src="extra/syntax_highlighter/XRegExp.js"></script>
<script src="extra/syntax_highlighter/shCore.js"></script>
<script src="extra/syntax_highlighter/shBrushJScript.js"></script>
<script src="tree.jquery.js"></script>
</head>
<body>
<div id="sidebar">
<ul class="first">
<li>
<a href="#jqtree">jqTree</a>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#requirements">Requirements</a></li>
<li><a href="#downloads">Downloads</a></li>
<li><a href="#tutorial">Tutorial</a></li>
</ul>
</li>
<li>
<a href="#tree-options">Tree options</a>
<ul>
<li><a href="#tree-options-data">data</a></li>
<li><a href="#tree-options-autoopen">autoOpen</a></li>
<li><a href="#tree-options-savestate">saveState</a></li>
<li><a href="#tree-options-draganddrop">dragAndDrop</a></li>
<li><a href="#tree-options-selectable">selectable</a></li>
<li><a href="#tree-options-oncanselectnode">onCanSelectNode</a></li>
<li><a href="#tree-options-oncreateli">onCreateLi</a></li>
<li><a href="#tree-options-onismovehandle">onIsMoveHandle</a></li>
<li><a href="#tree-options-oncanmove">onCanMove</a></li>
<li><a href="#tree-options-oncanmoveto">onCanMoveTo</a></li>
</ul>
</li>
<li>
<a href="#functions">Functions</a>
<ul>
<li><a href="#functions-loadData">loadData</a></li>
<li><a href="#functions-tojson">toJson</a></li>
<li><a href="#functions-getnodebyid">getNodeById</a></li>
<li><a href="#functions-selectnode">selectNode</a></li>
</ul>
</li>
<li>
<a href="#events">Events</a>
<ul>
<li><a href="#event-tree-click">tree.click</a></li>
<li><a href="#event-tree-contextmenu">tree.contextmenu</a></li>
<li><a href="#event-tree-move">tree.move</a></li>
</ul>
</li>
</ul>
</div>
<div id="page">
<h1 id="jqtree">jqTree</h1>
<p id="introduction">
JqTree is a tree widget.
</p>
<h4 id="features">Features</h4>
<ul>
<li>Create a tree from JSON data</li>
<li>Drag and drop</li>
<li>Works on ie7+, firefox 3.6+, chrome and safari</li>
<li>Written in Coffeescript</li>
</ul>
<p>
The project is <a href="https://github.com/mbraak/jqTree">hosted on github</a>,
has a <a href="test/test.html">test suite</a> and a <a href="demo.html">demo</a>.
</p>
<div class="group" id="demo">
<div class="container-left">
<div class="inner">
<pre class="dark">
var data = [
{
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
},
{
label: 'node2',
children: [
{ label: 'child3' }
]
}
];
$('#tree1').tree({
data: data,
autoOpen: true,
dragAndDrop: true
});
</pre>
</div>
</div>
<div class="container-right">
<div class="inner">
<div id="tree1"></div>
</div>
</div>
</div>
<h4 id="requirements">Requirements</h4>
<ul>
<li><a href="http://jquery.com">jQuery</a> 1.5+</li>
</ul>
<h4 id="downloads">Downloads</h4>
<ul>
<li>All: <a href="https://github.com/mbraak/jqTree/tarball/master">jqTree.tar.gz</a></li>
<li>Javascript: <a href="tree.jquery.js">tree.jquery.js</a></li>
<li>Css: <a href="jqtree.css">jqtree.css</a></li>
<li>Image: <a href="icons.png">icons.png</a></li>
</ul>
<h4 id="tutorial">Tutorial</h4>
<ul>
<li>
Include <a href="http://code.jquery.com/jquery-1.7.2.min.js">jQuery</a>.
<pre>&lt;script src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;</pre>
</li>
<li>
Include tree.jquery.js:
<pre>&lt;script src="tree.jquery.js"&gt;&lt;/script&gt;</pre>
</li>
<li>
Include jqtree.css:
<pre><link rel="stylesheet" href="jqtree.css"></pre>
</li>
<li>
Optionally, for saveState include <a href="https://github.com/carhartl/jquery-cookie">jquery-cookie</a>:
<pre>&lt;script src="jquery.cookie.js"t&gt;&lt;/scriptt&gt;</pre>
</li>
<li>
Create a div.
<pre>&lt;div id="tree1"&gt;&lt;/div&gt;</pre>
</li>
<li>
Create tree data.
<pre>
var data = [
{
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
},
{
label: 'node2',
children: [
{ label: 'child3' }
]
}
];
</pre>
</li>
<li>
Create tree widget.
<pre>
$(function() {
$('#tree1').tree({
data: data
});
});
</pre>
</li>
<li>
Alternatively, get the data from the server.
<pre>
$.getJSON(
'/some_url/',
function(data) {
$('#tree1').tree({
data: data
});
}
);
</pre>
</li>
</ul>
<h4 id="tree-options">Tree options</h4>
<h5 id="tree-options-data">data</h5>
<p>
Define the contents of the tree. The data is a nested array of objects. This option is required.
<br>
It looks like this:
</p>
<pre>
var data = [
{
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
},
{
label: 'node2',
children: [
{ label: 'child3' }
]
}
];
$('#tree1').tree({data: data});
</pre>
<ul>
<li>label: label of a node (required)</li>
<li>children: array of child nodes (optional)</li>
</ul>
<p>
You can also include other data in the objects. You can later access this data.
<br>
For example, to add an id:
</p>
<pre>
{
label: 'node1',
id: 1
}
</pre>
<h5 id="tree-options-autoopen">autoOpen</h5>
<p>
Open nodes initially.
</p>
<ul>
<li>
<strong>true</strong>: open all nodes.
</li>
<li>
<strong>false (default)</strong>: do nothing
</li>
<li><strong>n</strong>: open n levels</li>
</ul>
<p>
Open all nodes initially:
</p>
<pre>
$('#tree1').tree({
data: data,
autoOpen: true
});
</pre>
<p>
Open first level nodes:
</p>
<pre>
$('#tree1').tree({
data: data,
autoOpen: 0
});
</pre>
<h5 id="tree-options-savestate">saveState</h5>
<p>
Save and restore the state of the tree automatically. Saves in a cookie which nodes are opened and selected.
<br>
The state is saved in localstorage. In browsers that do not support localstorage, the state is saved in a cookie.
For this to work, please include <a href="https://github.com/carhartl/jquery-cookie">jquery-cookie</a>.
</p>
<ul>
<li><strong>true</strong>: save and restore state in a cookie</li>
<li><strong>false (default)</strong>: do nothing</li>
<li><strong>string</strong>: save state and use this name to store in a cookie</li>
</ul>
<p>
Save state:
</p>
<pre>
$('#tree1').tree({
data: data,
saveState: true
});
</pre>
<p>
Example: save state in key 'tree1':
</p>
<pre>
$('#tree1').tree({
data: data,
saveState: 'tree1'
});
</pre>
<h5 id="tree-options-draganddrop">dragAndDrop</h5>
<p>
Turn on dragging and dropping of nodes.
</p>
<ul>
<li><strong>true</strong>: turn on drag and drop</li>
<li><strong>false (default)</strong>: do not allow drag and drop</li>
</ul>
<p>
Example: turn on drag and drop.
</p>
<pre>
$('#tree1').tree({
data: data,
dragAndDrop: true
});
</pre>
<h5 id="tree-options-selectable">selectable</h5>
<p>
Turn on selection of nodes.
</p>
<ul>
<li><strong>true</strong>: turn on selection of nodes</li>
<li><strong>false (default)</strong>: turn off selection of nodes</li>
</ul>
<p>
Example: turn on selection of nodes.
</p>
<pre>
$('#tree1').tree({
data: data,
selectable: true
});
</pre>
<h5 id="tree-options-oncanselectnode">onCanSelectNode</h5>
<p>
You can set a function to override if a node can be selected. The function gets a node as parameter, and must return true or false.
<br />
For this to work, the option 'selectable' must be 'true'.
</p>
<pre>
// Example: nodes with children cannot be selected
$('#tree1').tree({
data: data,
selectable: true
onCanSelectNode: function(node) {
if (node.children.length == 0) {
// Nodes without children can be selected
return true;
}
else {
// Nodes with children cannot be selected
return false;
}
}
});
</pre>
<h5 id="tree-options-oncreateli">onCreateLi</h5>
<p>
The function is called for each created node. You can use this to define extra html.
</p>
<pre>
$('#tree1).tree({
data: data,
onCreateLi: function(node, $li) {
// Add 'icon' span before title
$li.find('.title').before('<span class="icon"></span>');
}
});
</pre>
<h5 id="tree-options-onismovehandle">onIsMoveHandle</h5>
<p>
You can override this function to determine if a dom element can be used to move a node.
</p>
<pre>
$('#tree1').tree({
data: data,
onIsMoveHandle: function($element) {
// Only dom elements with 'title' class can be used
// as move handle.
return ($element.is('.title'));
}
});
</pre>
<h5 id="tree-options-oncanmove">onCanMove</h5>
<p>
You can override this function to determine if a node can be moved.
</p>
<pre>
$('#tree1').tree({
data: data,
dragAndDrop: true,
onCanMove: function(node) {
if (! moved_node.parent.parent) {
// Example: Cannot move root node
return false;
}
else {
return true;
}
}
});
</pre>
<h5 id="tree-options-oncanmoveto">onCanMoveTo</h5>
<p>
You can override this function to determine if a node can be moved to a certain position.
</p>
<pre>
$('#tree1').tree({
data: data,
dragAndDrop: true,
onCanMoveTo: function(moved_node, target_node, position) {
if (target_node.is_menu) {
// Example: can move inside menu, not before or after
return (position == 'inside');
}
else {
return true;
}
}
});
</pre>
<h4 id="functions">Functions</h4>
<h5 id="functions-loadData">loadData</h5>
<p>
<strong>function loadData(data);</strong>
<br>
<strong>function loadData(data, parent_node);</strong>
</p>
<p>
Load the tree with new data.
</p>
<pre>
// Assuming the tree exists
var new_data = [
{
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
},
{
label: 'node2',
children: [
{ label: 'child3' }
]
}
];
$('#tree1').tree('loadData', new_data);
</pre>
<p>
It's also possible to add the nodes to an existing node in the tree.
</p>
<pre>
// Get node by id (this assumes that the nodes have an id)
var node = $('#tree1').tree('getNodeById', 100);
// Add new nodes
var data = [
{ label: 'new node' },
{ label: 'another new node' }
];
$('#tree1').tree('loadData', data, node);
</pre>
<h5 id="functions-tojson">toJson</h5>
<p>
<strong>function toJson();</strong>
<br>
Get the tree data as json.
</p>
<pre>
// Assuming the tree exists
$('#tree1').tree('toJson');
</pre>
<h5 id="functions-getnodebyid">getNodeById</h5>
<p>
<strong>function getNodeById(id);</strong>
<br>
Get a tree node by node-id. This assumes that you have given the nodes in the data a unique id.
</p>
<pre>
var $tree = $('#tree1);
var data = [
{ id: 10, name: 'n1' },
{ id: 11, name: 'n2' }
];
$tree.tree({
data: data
});
var node = $tree.tree('getNodeById', 10);
</pre>
<h5 id="functions-selectnode">selectNode</h5>
<p>
<strong>function selectNode(node);</strong>
<br>
<strong>function selectNode(node, must_open_parents);</strong>
</p>
<p>
Select this node. If <strong>must_open_parents</strong> is true, then open all parents, so the node is visible.
</p>
<pre>
// create tree
var $tree = $('#tree1');
$tree.tree({
data: data,
selectable: true
});
var node = $tree.tree('getNodeById', 123);
$tree.tree('selectNode', node, true);
</pre>
<h4 id="events">Events</h4>
<h5 id="event-tree-click">tree.click</h5>
<p>
Triggered when a tree node is clicked.
</p>
<pre>
// create tree
$('#tree1').tree({
data: data
});
// bind 'tree.click' event
$('#tree1').bind(
'tree.click',
function(event) {
// The clicked node is 'event.node'
var node = event.node;
alert(node.name);
}
);
</pre>
<h5 id="event-tree-contextmenu">tree.contextmenu</h5>
<p>
Triggered when the user right-clicks a tree node.
</p>
<pre>
// create tree
$('#tree1').tree({
data: data
});
// bind 'tree.contextmenu' event
$('#tree1').bind(
'tree.contextmenu',
function(event) {
// The clicked node is 'event.node'
var node = event.node;
alert(node.name);
}
);
</pre>
<h5 id="event-tree-move">tree.move</h5>
<p>
Triggered when the user moves a node.
</p>
<p>
Event.move_info contains:
<p>
<ul>
<li>moved_node</li>
<li>target_node</li>
<li>position: (before, after or inside)</li>
<li>previous_parent</li>
</ul>
<pre>
$('#tree1').tree({
data: data,
dragAndDrop: true
});
$('#tree1).bind(
'tree.move',
function(event) {
console.log('moved_node', e.move_info.moved_node);
console.log('target_node', e.move_info.target_node);
console.log('position', e.move_info.position);
console.log('previous_parent', e.move_info.previous_parent);
}
);
</pre>
</div>
<script>
$(function() {
var data = [
{
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
},
{
label: 'node2',
children: [
{ label: 'child3' }
]
}
];
$('#tree1').tree({
data: data,
autoOpen: true,
dragAndDrop: true
});
$('pre').addClass('brush: js; toolbar: false');
$('pre.dark')
.removeClass()
.addClass('brush: js; class-name: dark');
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.all();
$('h1').lettering();
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.