This example show all script basic features.
$('#example-0 div').tree({
});
$('#example-12 div').tree({
nodes: [
{
children: [
{},
{}
]
},
{
}
]
});
This example show how to retrieve nodes from an ajax call.
$('#example-2 div').tree({
dataSourceUrl: 'demo/lazy.json'
});
This example show how to define node initial state.
To start a node collapsed, set class="collapsed" in li element.
To start a node checked, simply set attribute checked="true" in input element.
$('#example-11 ul:first').tree({
});
This example show how to automatically collapse/expand on check/unchek events
$('#example-3 div').tree({
onCheck: {
node: 'expand'
},
onUncheck: {
node: 'collapse'
}
});
This example show how to customize jQueryUI theme icons.
$('#example-4 div').tree({
collapseUiIcon: 'ui-icon-plus',
expandUiIcon: 'ui-icon-minus',
leafUiIcon: 'ui-icon-bullet'
});
This example show how to use some of the public methods.
$('#example-5 div').tree({
});
$('#example-5-checkAll').click(function(){
$('#example-5 div').tree('checkAll');
});
$('#example-5-uncheckAll').click(function(){
$('#example-5 div').tree('uncheckAll');
});
$('#example-5-collapse').click(function(){
$('#example-5 div').tree('collapse', $('#example-5-node22'));
});
$('#example-5-expand').click(function(){
$('#example-5 div').tree('expand', $('#example-5-node22'));
});
$('#example-5-check').click(function(){
$('#example-5 div').tree('check', $('#example-5-node22'));
});
$('#example-5-uncheck').click(function(){
$('#example-5 div').tree('uncheck', $('#example-5-node22'));
});
This example show select component usage.
$('#example-6 div').tree({
select: function(event, element) {
alert('Selected: ' + $(element).find('span.daredevel-tree-label:first').text());
},
deselect: function(event, element) {
alert('Deselected: ' + $(element).find('span.daredevel-tree-label:first').text());
}
});
$('#example-6-button').bind('click', function(){
var selected = $('#example-6 div').tree('selected');
alert('Selected:' + selected.find('span.daredevel-tree-label:first').text());
});
This example show how to configure tree to auto-check node when all descendants are checked.
$('#example-7 div').tree({
onCheck: {
ancestors: 'checkIfFull',
descendants: 'check'
},
onUncheck: {
ancestors: 'uncheck'
}
});
This example show how to configure tree to admit only one branch selected at time.
$('#example-8 div').tree({
onCheck: {
ancestors: 'check',
descendants: 'uncheck',
others: 'uncheck'
},
onUncheck: {
descendants: 'uncheck'
}
});
This example show how to catch events.
$('#example-9 div').tree({
});
$('#example-9 div').bind('treecollapse', function() {
alert('collapse event triggered');
});
$('#example-9 div').bind('treeexpand', function() {
alert('expand event triggered');
});
This example show how to manipulate tree.
var tree10 = $('#example-10 div').tree({
});
$('#example-10-add').click(function(){
tree10.tree('addNode', {}, $('#y'));
});
$('#example-10-add-as-root').click(function(){
tree10.tree('addNode', {li: {'class': 'leaf'}});
});
$('#example-10-remove').click(function(){
var node = $('#y ul').children('li:first');
tree10.tree('removeNode', node);
});
$('#example-10-move').click(function(){
var node = $('#y ul').children('li:first');
tree10.tree('moveNode', node, $('#z'));
});
This example show ...
$('#example-13 div').tree({
dataEditUrl: 'demo/lazy.json'
});