JqTree is a tree widget.
The project is hosted on github, has a test suite and a demo.
var data = [ { label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] }, { label: 'node2', children: [ { label: 'child3' } ] } ]; $('#tree1').tree({ data: data, autoOpen: true, dragAndDrop: true });
<script src="jquery-1.7.2.min.js"></script>
<script src="tree.jquery.js"></script>
<script src="jquery.cookie.js"t></scriptt>
<div id="tree1"></div>
var data = [ { label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] }, { label: 'node2', children: [ { label: 'child3' } ] } ];
$(function() { $('#tree1').tree({ data: data }); });
$.getJSON( '/some_url/', function(data) { $('#tree1').tree({ data: data }); } );
Define the contents of the tree. The data is a nested array of objects. This option is required.
It looks like this:
var data = [ { label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] }, { label: 'node2', children: [ { label: 'child3' } ] } ]; $('#tree1').tree({data: data});
You can also include other data in the objects. You can later access this data.
For example, to add an id:
{ label: 'node1', id: 1 }
Open nodes initially.
Open all nodes initially:
$('#tree1').tree({ data: data, autoOpen: true });
Open first level nodes:
$('#tree1').tree({ data: data, autoOpen: 0 });
Save and restore the state of the tree automatically. Saves in a cookie which nodes are opened and selected.
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 jquery-cookie.
Save state:
$('#tree1').tree({ data: data, saveState: true });
Example: save state in key 'tree1':
$('#tree1').tree({ data: data, saveState: 'tree1' });
Turn on dragging and dropping of nodes.
Example: turn on drag and drop.
$('#tree1').tree({ data: data, dragAndDrop: true });
Turn on selection of nodes.
Example: turn on selection of nodes.
$('#tree1').tree({ data: data, selectable: true });
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.
For this to work, the option 'selectable' must be 'true'.
// 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; } } });
The function is called for each created node. You can use this to define extra html.
$('#tree1).tree({ data: data, onCreateLi: function(node, $li) { // Add 'icon' span before title $li.find('.title').before(''); } });
You can override this function to determine if a dom element can be used to move a node.
$('#tree1').tree({ data: data, onIsMoveHandle: function($element) { // Only dom elements with 'title' class can be used // as move handle. return ($element.is('.title')); } });
You can override this function to determine if a node can be moved.
$('#tree1').tree({ data: data, dragAndDrop: true, onCanMove: function(node) { if (! node.parent.parent) { // Example: Cannot move root node return false; } else { return true; } } });
You can override this function to determine if a node can be moved to a certain position.
$('#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; } } });
function loadData(data);
function loadData(data, parent_node);
Load the tree with new data.
// Assuming the tree exists var new_data = [ { label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] }, { label: 'node2', children: [ { label: 'child3' } ] } ]; $('#tree1').tree('loadData', new_data);
It's also possible to add the nodes to an existing node in the tree.
// 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);
function toJson();
Get the tree data as json.
// Assuming the tree exists $('#tree1').tree('toJson');
function getNodeById(id);
Get a tree node by node-id. This assumes that you have given the nodes in the data a unique id.
var $tree = $('#tree1); var data = [ { id: 10, name: 'n1' }, { id: 11, name: 'n2' } ]; $tree.tree({ data: data }); var node = $tree.tree('getNodeById', 10);
function selectNode(node);
function selectNode(node, must_open_parents);
Select this node. If must_open_parents is true, then open all parents, so the node is visible.
// create tree var $tree = $('#tree1'); $tree.tree({ data: data, selectable: true }); var node = $tree.tree('getNodeById', 123); $tree.tree('selectNode', node, true);
function openNode(node);
function openNode(node, skip_slide);
Open this node with a slide animation. The node must have child nodes.
// create tree var $tree = $('#tree1'); $tree.tree({ data: data }); var node = $tree.tree('getNodeById', 123); $tree.tree('openNode', node);
To open the node without the slide animation, call with skip_slide parameter is true.
$tree.tree('openNode', node, true);
function closeNode(node);
function closeNode(node, skip_slide);
Close this node with a slide animation. The node must have child nodes.
var node = $tree.tree('getNodeById', 123); $tree.tree('closeNode', node);
To close the node without the slide animation, call with skip_slide parameter is true.
$tree.tree('closeNode', node, true);
Triggered when a tree node is clicked.
// 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); } );
Triggered when the user right-clicks a tree node.
// 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); } );
Triggered when the user moves a node.
Event.move_info contains:
$('#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); } );
You can prevent the move by calling event.preventDefault()
$('#tree1).bind( 'tree.move', function(event) { event.preventDefault(); } );
You can later call event.doMove() to move the node. This way you could ask the user before moving the node:
$('#tree1).bind( 'tree.move', function(event) { event.preventDefault(); if (confirm('Really move?')) { event.doMove(); } } );