jqTree

JqTree is a tree widget written in jQuery UI.

Features

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
});

Requirements

Downloads

Tutorial

Tree options

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
}
autoOpen

Open nodes initially.

Open all nodes initially: 

$('#tree1').tree({
	data: data,
	autoOpen: true
});

Open first level nodes: 

$('#tree1').tree({
	data: data,
	autoOpen: 0
});
saveState

Save and restore the state of the tree automatically. Saves in a cookie which nodes are opened and selected.
For this to work, please include jquery-cookie.

Save state: 

$('#tree1').tree({
	data: data,
	saveState: true
});

Example: save state in cookie 'tree1': 

$('#tree1').tree({
	data: data,
	saveState: 'tree1'
});
dragAndDrop

Turn on dragging and dropping of nodes.

Example: turn on drag and drop. 

$('#tree1').tree({
	data: data,
	dragAndDrop: true
});
selectable

Turn on selection of nodes.

Example: turn on selection of nodes. 

$('#tree1').tree({
	data: data,
	selectable: true
});
onCanSelectNode

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;
		}
	}
});
onCreateLi

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('');
	}
});
onIsMoveHandle

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'));
	}
});
onCanMove

You can override this function to determine if a node can be moved. 

$('#tree1').tree({
	data: data,
	dragAndDrop: true,
	onCanMove: function(node) {
		if (! moved_node.parent.parent) {
			// Example: Cannot move root node
			return false;
		}
		else {
			return true;
		}
	}
});
onCanMoveTo

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;
		}
	}
});

Functions

loadData

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);
toJson

Get the tree data as json. 

// Assuming the tree exists
$('#tree1').tree('toJson');

Events

tree.click

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);
	}
);
tree.contextmenu

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);
	}
);
tree.move

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);
	}
);