aciTree demo - A treeview control with jQuery

Here you have a simple implementation of a file system tree with the most features available to be changed at the runtime from the interface.
You can find a simple PHP implementation in the download but any server-side language can be used because aciTree needs the data in JSON
format and it’s using AJAX to load the children of a inner node (once they are needed).

Note: I recommend checking the code from the other demos as this page can be complex for someone new to aciTree. Also, do not forget to check the API docs
before you try using the methods and also check online on the plugin page for extra info (like init options and using the events).

Start here first if you are new to aciTree (check using the API demos for a detailed introduction to aciTree)

See a checkbox tree demo here

See a radio-button tree demo here

See a multiple column tree demo here

See how you can change the column width and toggle columns here

Save/restore items state (open/closed/selected) using local storage demo here

Select/open items based on the variables stored in the URL fragment demo here

See how you can use the drag & drop events to sort the tree items and limit the draggable items / drop targets here

See how you can add a tooltip for each tree item here

See how you can use a custom tree data structure here

(new) See a demo with a custom/multiple data sources here

See how you can use a custom filter/search here

See a demo with a full-sized tree container here

Note: in the demo below – the node loading it’s made with a delay so you can see the loading animation.
If you want you can remove the delay from the PHP script …

Hover over a tree item to show his info (using the aciTree API) …

see the JSON behind this tree

Anything here or just remove

Filter: (note)

Use Animations: Yes
No

Expand All: Yes
No

Collapse All: Yes
No

Unique on Open: Yes
No

Empty on Close: Yes
No

Selectable: Yes
No

(new) Multi-Selectable Yes
No

Full Row: Yes
No

Text Selection: Enabled
Disabled

Sortable: Enabled
Disabled

Checkboxes: Yes
No

Chain Checkboxes: Yes
Update Parents
Update Children
No

Checkbox Break: Yes
No

Checkbox-Only Click: Yes
No

Radio Buttons: Yes
No

Chain Radio Buttons: Yes
No

Radio Button Break: Yes
No

Radio-Only Click: Yes
No

Editable: Yes
No

Select a Tree item or the Tree itself (note)!

Mode: Add Before
Add After

(new) Size: Smaller
Bigger

(new) Node Button: Square
Arrow

(update) Show Branches: Yes
No

Direction: LTR
RTL

Odd/Even Rows: Yes
No

Set Icon: — choose –FileFolderRemove

Set Checkbox: — choose –YesNo

Set Radio: — choose –YesNo

Item: (new)
(note)

Node:

Burn some CPU:

Using ‘branch’:

Search ID:

Search Params: Use Load

Item Content:
a long item text haha this is a looooong text to be set for a item<br />with a brake…<br />more lines

Move Item:

Move Before/After/As Child (by ID):

Set Index:

Swap Item (by ID):
with

Cancel UI Tasks : Yes
No

Cancel User-Defined Tasks : Yes
No

Serialize (see the log):

Tree Log… clear log

Test JavaScript code performance:
(see the log for output)

alert(‘children: ‘ + treeApi.children(null, true, true).length);

Note: the selected pink item does not have anything to do with the selectable option, it’s there just to be able to ‘select’ the
entire tree (not only a item).
All item based functions are made – in this demo – to run against the pink selected item (and not the real selected item – when/if the
selectable option is used).

Note: for this demo I have changed the default style from `display:none` for `.aciTreeHidden`
so you can have a chance to show again a hidden item. The `hidden` items will have a darker background.

<![CDATA[

$(function() {

// Tree API
var treeApi;

// if we want to init without one initial AJAX request 🙂
var rootData = [{
id: "/Item 1",
label: "Item 1 – From rootData",
branch: [],
inode: true,
open: false,
icon: "folder",
random: 34
},
{
id: "/Item 2",
label: "Item 2 – very long item text
with a brake”,
branch: [],
inode: true,
open: false,
icon: “folder”,
random: 9
},
{
id: “/Item 3”,
label: “Item 3”,
branch: [],
inode: false,
open: false,
icon: “folder”,
random: 26
},
{
id: “/Item 4”,
label: “Item 4”,
branch: [],
inode: false,
open: false,
icon: “folder”,
random: 71
},
{
id: “/Item 5”,
label: “Item 5”,
branch: [],
inode: true,
open: false,
icon: “folder”,
random: 93
},
{
id: “/Item 6”,
label: “Item 6”,
branch: [],
inode: false,
open: false,
icon: “folder”,
random: 14
},
{
id: “/Item 7”,
label: “Item 7”,
branch: [],
inode: true,
open: false,
icon: “folder”,
random: 49
},
{
id: “/Item 8”,
label: “Item 8”,
branch: [],
inode: true,
open: false,
icon: “folder”,
random: 99
},
{
id: “/document a.txt”,
label: “document a.txt”,
branch: [],
inode: false,
open: false,
icon: “file”,
random: 86
},
{
id: “/document b.txt”,
label: “document b.txt”,
branch: [],
inode: false,
open: false,
icon: “file”,
random: 76
},
{
id: “/document c.txt”,
label: “document c.txt”,
branch: [],
inode: false,
open: false,
icon: “file”,
random: 11
}];

// the tree container
var theTree = $(‘#tree’);

// init the Tree
function initTree(type, ui, skip) {
treeApi = theTree.aciTree({
autoInit: false,
ajax: {
url: (type == ‘huge’) ? ‘php/hugeTree.php?branch=’ : ‘php/aciTree.php?branch=’/*,
// our custom data processing function (see jQuery.ajax)
converters: {
‘text json’: function(data) {
var json = $.parseJSON(data);
var recursive = function(item) {
item.inode = item.isFolder;
item.branch = item.childs;
for (var i in item.branch) {
recursive(item.branch[i]);
}
};
for (var i in json) {
recursive(json[i]);
}
return json;
}
}*/
},
rootData: (type == ‘data’) ? rootData : null,
itemHook: function(parent, item, itemData, level) {
// a custom item implementation to show the tree level
this.setLabel(item, {
label: itemData.label + ‘ (‘ + level + ‘)’
});
},
persist: ‘mytree’/*,
columnData: [{
width: 80,
props: ‘c1’,
value: ‘column #1’
}, {
width:80,
props: ‘c2’,
value: ‘column #2’
}]*/
}).aciTree(‘api’);
treeApi.init({
uid: (ui == ‘ui’) ? ‘ui’ : ‘user-defined’,
success: function() {
if (!skip) {
alert(‘The treeview control was init !’);
}
},
fail: function() {
alert(‘Failed to init the treeview control !’);
}
});
}

var log = $(‘.log div’);

function alert(message) {
log.prepend(‘

‘ + message + ”);
}

var eye = $(‘.eyes’), eyes = 0;

// a little animation 🙂
function showEyes() {
if (eyes > 2) {
eyes = 0;
}
eye.css(‘background-position’, ‘0 -‘ + (eyes * 48) + ‘px’);
}

theTree.scroll(function() {
eye.css(‘top’, $(this).scrollTop() + ‘px’);
});

var cancelUi = false, cancelUser = false;

// show tree events
theTree.on(‘acitree’, function(event, api, item, eventName, options) {
if (options.uid == ‘skip-log’) {
return;
}
if (eventName.search(/^before/) != -1) {
// cancel if requested
if ((cancelUi && (options.uid == ‘ui’)) || (cancelUser && (options.uid != ‘ui’))) {
if (item) {
log.prepend(‘

(canceled) ‘ + eventName + ‘ [‘ + api.getId(item) + ‘] [‘ + options.uid + ‘]’);
} else {
log.prepend(‘

(canceled) ‘ + eventName + ‘ [tree] [‘ + options.uid + ‘]’);
}
return false;
}
}
if (api.isLocked()) {
// prevent write to log on init/destroy
return;
}
switch (eventName) {
case ‘idset’:
log.prepend(‘

‘ + eventName + ‘ [‘ + api.getId(item) + ‘] old ID: [‘ + options.oldId + ‘] [‘ + options.uid + ‘]’);
break;
case ‘labelset’:
log.prepend(‘

‘ + eventName + ‘ [‘ + api.getId(item) + ‘] old label: [‘ + options.oldLabel + ‘] [‘ + options.uid + ‘]’);
break;
case ‘swapped’:
var item1 = options.item1;
var item2 = options.item2;
log.prepend(‘

‘ + eventName + ‘ [‘ + api.getId(item1) + ‘] [‘ + api.getId(item2) + ‘] [‘ + options.uid + ‘]’);
if (!api.isVisible(item1) && !api.isVisible(item2)) {
// make one item visible (check by index, not a problem if not with the same parent …
if (api.getIndex(item1) < api.getIndex(item2)) {
api.setVisible(item1);
} else {
api.setVisible(item2);
}
}
break;
case 'indexset':
log.prepend('

‘ + eventName + ‘ [‘ + api.getId(item) + ‘] old index: [‘ + options.oldIndex + ‘] [‘ + options.uid + ‘]’);
if (!api.isVisible(item)) {
// make it visible 😉
api.setVisible(item);
}
break;
case ‘filtered’:
log.prepend(‘

‘ + eventName + ‘ [‘ + options.search + ‘] first match: [‘ + api.getId(options.first) + ‘] [‘ + options.uid + ‘]’);
break;
case ‘sorted’:
log.prepend(‘

‘ + eventName + ‘ [‘ + api.getId(item) + ‘] moved inside [‘ + api.getId(api.parent(item)) + ‘]’);
break;
default:
if (item) {
log.prepend(‘

‘ + eventName + ‘ [‘ + api.getId(item) + ‘] [‘ + options.uid + ‘]’);
} else {
log.prepend(‘

‘ + eventName + ‘ [tree] [‘ + options.uid + ‘]’);
}
if (eventName == ‘toggled’) {
eyes++;
showEyes();
}
}
});

// do it 😉
initTree(null, ‘ui’, true);

// a little debug info tool 🙂
function debug(item) {
var info = ”;
info += ‘getId: [‘ + treeApi.getId(item) + ‘]n’;
info += ‘getLabel: “‘ + treeApi.getLabel(item) + ‘”n’;
info += ‘level: ‘ + treeApi.level(item) + ‘n’;
info += ‘getIndex: ‘ + treeApi.getIndex(item) + ‘n’;
info += ‘isLeaf: ‘ + treeApi.isLeaf(item) + ‘n’;
info += ‘isInode: ‘ + treeApi.isInode(item) + ‘ (open: ‘ + treeApi.isOpen(item) + ‘)n’;
info += ‘wasLoad: ‘ + treeApi.wasLoad(item) + ‘n’;
info += ‘hasParent: ‘ + treeApi.hasParent(item) + ‘n’;
info += ‘parent: [‘ + treeApi.getId(treeApi.parent(item)) + ‘]n’;
info += ‘path: [root] ‘;
treeApi.path(item).each(function() {
info += ‘[‘ + treeApi.getId($(this)) + ‘] ‘;
});
info += ‘n’;
info += ‘hasSiblings: ‘ + treeApi.hasSiblings(item) + ‘ count: #’ + treeApi.siblings(item).length + ‘n’;
info += ‘hasPrev: ‘ + treeApi.hasPrev(item) + ‘ [‘ + treeApi.getId(treeApi.prev(item)) + ‘]n’;
info += ‘hasNext: ‘ + treeApi.hasNext(item) + ‘ [‘ + treeApi.getId(treeApi.next(item)) + ‘]n’;
var children = treeApi.children(item);
info += ‘hasChildren: ‘ + treeApi.hasChildren(item) + ‘ count: #’ + children.length +
‘ inodes: #’ + treeApi.inodes(children).length + ‘ (open: #’ + treeApi.inodes(children, true).length +
‘ closed: #’ + treeApi.inodes(children, false).length + ‘) leaves: #’ + treeApi.leaves(children).length + ‘n’;
info += ‘first [‘ + treeApi.getId(treeApi.first(item)) + ‘] isFirst: ‘ + treeApi.isFirst(item) + ‘n’;
info += ‘last [‘ + treeApi.getId(treeApi.last(item)) + ‘] isLast: ‘ + treeApi.isLast(item) + ‘n’;
// the next are commented because of the low performance
//var allChildren = treeApi.children(null, true);
info += ‘children: #’ + children.length + /*’ (total: #’ + allChildren.length + ‘)’ +*/ ‘n’;
/*info += ‘visible: #’ + treeApi.visible(children).length + ‘ in view: #’ + treeApi.visible(children, true).length +
‘ (total: #’ + treeApi.visible(allChildren).length + ‘ total in view: #’ + treeApi.visible(allChildren, true).length + ‘)n’;*/
return info;
}

// keep the last element
var _g_tree = null;

// ensure info changes
window.setInterval(function() {
_g_tree = null;
}, 500);

// output some info
function getDebug(element) {
if (_g_tree == element) {
return;
}
_g_tree = element;
var item = treeApi.itemFrom(element);
if (!item.length) {
item = null;
}
$(‘#info’).html(debug(item).replace(/n/g, ‘
‘));
}

// refresh on item ‘mouseover’
theTree.on(‘mouseover’, ‘.aciTreeLi’, function(e) {
getDebug(e.target);
return false;
}).bind(‘mouseover’, function(e) {
getDebug(e.target);
});

// get Tree init options
var options = theTree.aciTree(‘options’);

// get string value from BOOL/numeric
function valueBoolNum(mixed) {
return (mixed === true) ? ‘true’ : ((mixed === false) ? ‘false’ : mixed);
}

// get BOOL/numeric value from string
function boolNumValue(string) {
return (string == ‘true’) ? true : ((string == ‘false’) ? false : parseInt(string));
}

// init FORM based on options
$(‘[name=esize][value=’ + (theTree.hasClass(‘aciTreeBig’) ? ‘big’ : ‘small’) + ‘]’).prop(‘checked’, true);
$(‘[name=nodebtn][value=’ + (theTree.hasClass(‘aciTreeArrow’) ? ‘arrow’ : ‘square’) + ‘]’).prop(‘checked’, true);
$(‘[name=branches][value=’ + (theTree.hasClass(‘aciTreeNoBranches’) ? 0 : 1) + ‘]’).prop(‘checked’, true);
$(‘[name=animate][value=’ + (options.show ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=expand][value=’ + (options.expand ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=collapse][value=’ + (options.collapse ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=empty][value=’ + (options.empty ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=unique][value=’ + (options.unique ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=selectable][value=’ + (options.selectable ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=fullRow][value=’ + (options.fullRow ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=textSelection][value=’ + (options.textSelection ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=sortable][value=’ + (options.sortable ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=multiSelectable][value=’ + (options.multiSelectable ? 1 : 0) + ‘]’).prop(‘checked’, true);

$(‘[name=checkbox][value=’ + (options.checkbox ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=radio][value=’ + (options.radio ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=checkboxChain][value=’ + valueBoolNum(options.checkboxChain) + ‘]’).prop(‘checked’, true);
$(‘[name=checkboxBreak][value=’ + (options.checkboxBreak ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=checkboxClick][value=’ + (options.checkboxClick ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=radioChain][value=’ + (options.radioChain ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=radioBreak][value=’ + (options.radioBreak ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=radioClick][value=’ + (options.radioClick ? 1 : 0) + ‘]’).prop(‘checked’, true);

$(‘#setCheckbox’).attr(‘disabled’, !options.checkbox);
$(‘#setRadio’).attr(‘disabled’, !options.radio);
$(‘[name=direction][value=’ + ((theTree.attr(‘dir’) == ‘rtl’) ? 0 : 1) + ‘]’).prop(‘checked’, true);
$(‘[name=oddeven][value=’ + (theTree.hasClass(‘aciTreeColors’) ? 1 : 0) + ‘]’).prop(‘checked’, true);
$(‘[name=editable][value=’ + (options.editable ? 1 : 0) + ‘]’).prop(‘checked’, true);

$(‘[name=cancel_ui][value=0]’).prop(‘checked’, true);
$(‘[name=cancel_user][value=0]’).prop(‘checked’, true);

// filter the tree

$(‘#filter’).keyup(function() {
treeApi.filter(null, {
search: $(this).val()
});
});

// update options

$(‘[name=animate]’).click(function() {
if ($(this).val() == 1) {
treeApi.option(‘show’, {
props: {
‘height’: ‘show’
},
duration: ‘medium’,
easing: ‘linear’
});
treeApi.option(‘hide’, {
props: {
‘height’: ‘hide’
},
duration: ‘medium’,
easing: ‘linear’
});
treeApi.option(‘view’, {
duration: ‘medium’,
easing: ‘linear’
});
} else {
treeApi.option(‘show’, null);
treeApi.option(‘hide’, null);
treeApi.option(‘view’, null);
}
});

$(‘[name=esize]’).click(function() {
theTree.toggleClass(‘aciTreeBig’, $(this).val() == ‘big’);
});

$(‘[name=nodebtn]’).click(function() {
theTree.toggleClass(‘aciTreeArrow’, $(this).val() == ‘arrow’);
});

$(‘[name=branches]’).click(function() {
theTree.toggleClass(‘aciTreeNoBranches’, $(this).val() == 0);
});

$(‘[name=checkbox]’).click(function() {
$(‘#setCheckbox’).attr(‘disabled’, $(this).val() != 1);
});

$(‘[name=radio]’).click(function() {
$(‘#setRadio’).attr(‘disabled’, $(this).val() != 1);
});

$(‘[name=direction]’).click(function() {
theTree.attr(‘dir’, ($(this).val() == 1) ? ‘ltr’ : ‘rtl’);
});

$(‘[name=oddeven]’).click(function() {
theTree.toggleClass(‘aciTreeColors’, $(this).val() == 1);
});

$(‘[name=expand],[name=collapse],[name=empty],[name=unique],[name=selectable],[name=fullRow],[name=textSelection],[name=sortable],[name=checkbox],[name=radio],[name=checkboxBreak],[name=radioChain],[name=radioBreak],[name=editable],[name=checkboxClick],[name=radioClick],[name=multiSelectable]’).click(function() {
var option = $(this).prop(‘name’);
theTree.aciTree(‘option’, option, $(this).val() == 1);
if (option == ‘fullRow’) {
theTree.toggleClass(‘aciTreeFullRow’, $(this).val() == 1);
}
});

$(‘[name=checkboxChain]’).click(function() {
var option = $(this).prop(‘name’);
theTree.aciTree(‘option’, option, boolNumValue($(this).val()));
$(‘[name=checkboxBreak]’).prop(‘disabled’, $(this).val() == ‘false’);
});

$(‘[name=radioChain]’).click(function() {
$(‘[name=radioBreak]’).prop(‘disabled’, $(this).val() == ‘0’);
});

$(‘[name=cancel_ui]’).click(function() {
cancelUi = $(this).val() == 1;
});

$(‘[name=cancel_user]’).click(function() {
cancelUser = $(this).val() == 1;
});

// FORM button functions

// update init options based on inputs
function updateOptions() {
$(‘[name=expand]:checked,[name=collapse]:checked,[name=empty]:checked,[name=unique]:checked,[name=selectable]:checked,[name=fullRow]:checked,[name=textSelection]:checked,[name=sortable]:checked,[name=checkbox]:checked,[name=radio]:checked,[name=checkboxBreak]:checked,[name=radioChain]:checked,[name=radioBreak]:checked,[name=editable]:checked,[name=checkboxClick]:checked,[name=radioClick]:checked,[name=multiSelectable]:checked’).each(function() {
var option = $(this).prop(‘name’);
$.fn.aciTree.defaults[option] = $(this).val() == 1;
});
$(‘[name=checkboxChain]:checked’).each(function() {
var option = $(this).prop(‘name’);
$.fn.aciTree.defaults[option] = boolNumValue($(this).val());
});
}

// check before we try to do something
$(‘[type=button]’).not(‘#clear_log’).click(function(e) {
var init = $(this).is(‘#init,#init_data,#init_huge’);
if (warnInit(init)) {
// prevent API calls if not init
e.stopImmediatePropagation();
}
});

// check before we try to do something
$(‘select’).change(function(e) {
if (warnInit()) {
$(this).val(”);
// prevent API calls if not init
e.stopImmediatePropagation();
}
});

$(‘#destroy’).click(function() {
theTree.aciTree(‘api’).destroy({
uid: ‘user-defined’,
success: function() {
alert(‘Treeview control successfully destroyed !’);
},
fail: function() {
alert(‘Failed to destroy the treeview control !’);
}
});
});

$(‘#init’).click(function() {
// update options
updateOptions();
initTree();
});

$(‘#init_data’).click(function() {
// update options
updateOptions();
initTree(‘data’);
});

$(‘#init_huge’).click(function() {
// update options
updateOptions();
initTree(‘huge’);
});

$(‘#clear_log,.clear_log’).click(function() {
$(‘.log div’).html(”);
return false;
});

// keep the last selected
var _g_sel = null;

// selected state for the Tree
$(document).on(‘click’, ‘#tree’, function() {
theTree.find(‘.selected’).removeClass(‘selected’);
$(this).addClass(‘selected’);
_g_sel = this;
});

// selected state for the Tree items
theTree.on(‘click’, ‘.aciTreeItem’, function(e) {
theTree.removeClass(‘selected’).find(‘.selected’).removeClass(‘selected’);
$(this).addClass(‘selected’);
_g_sel = this;
e.stopPropagation();
});

// few little helpers ->

// return TRUE if the treeview is selected
function checkIsTree() {
return _g_sel && (_g_sel == theTree.get(0));
}

// return the selected item (if any)
function checkIsItem() {
if (_g_sel) {
var item = treeApi.itemFrom(_g_sel);
if (treeApi.isItem(item)) {
return item;
}
}
return null;
}

// test if the treeview or a item is selected, alert if not, return the item if selected
function requireSelection() {
var item = checkIsItem();
if (checkIsTree() || item) {
return item;
}
alert(‘Please select one item or the treeview itself (with a mouse click, will have a pink background after selection) !’);
return null;
}

// test if a item is selected, alert if not, return the item if selected
function requireItem() {
var item = checkIsItem();
if (item) {
return item;
}
alert(‘Please select one item (with a mouse click, will have a pink background after selection) !’);
return null;
}

// test if a inode item is selected, alert if not, return the item if selected
function requireInode() {
var item = checkIsItem();
if (item && treeApi.isInode(item)) {
return item;
}
alert(‘Please select one folder item (with a mouse click, will have a pink background after selection) !’);
return null;
}

// test if a leaf item is selected, alert if not, return the item if selected
function requireLeaf() {
var item = checkIsItem();
if (item && treeApi.isLeaf(item)) {
return item;
}
alert(‘Please select one file item (with a mouse click, will have a pink background after selection) !’);
return null;
}

// test if the treeview or the inode was loaded, alert if was loaded, return TRUE if was not loaded
function requestLoad() {
if (checkIsTree()) {
if (treeApi.wasLoad()) {
alert(‘The treeview was loaded already !’);
} else {
return true;
}
} else {
var item = checkIsItem();
if (item && requireInode(item)) {
if (treeApi.wasLoad(item)) {
alert(‘The folder item was loaded already !’);
} else {
return true;
}
} else {
requireSelection();
}
}
return false;
}

var leafIndex = 0;

// get new leaf item data
function newLeaf() {
var itemData = {
id: ‘a_new_File_ID_’ + leafIndex,
label: ‘File name ‘ + leafIndex,
inode: false,
icon: ‘file’
};
leafIndex++;
return itemData;
}

var inodeIndex = 0;

// get new inode item data
function newInode() {
var itemData = {
id: ‘a_new_Folder_ID_’ + inodeIndex,
label: ‘Folder name ‘ + inodeIndex,
inode: null,
open: false,
icon: ‘folder’
};
inodeIndex++;
return itemData;
}

// add one or more items (after or before a item)
function treeAddItem(item, itemData, skipLog) {
var before = $(‘[name=addMode]:checked’).val() == ‘before’;
if (before) {
treeApi.before(item.first(), {
uid: (skipLog ? ‘skip-log’ : ‘user-defined’),
success: function(item) {
alert(‘Item(s) successfully added before [‘ + this.getId(item) + ‘] !’);
if (!this.isVisible(item)) {
this.setVisible(item);
}
},
fail: function(item) {
alert(‘Failed to add the item(s) before [‘ + this.getId(item) + ‘] !’);
},
itemData: itemData
});
} else {
treeApi.after(item.last(), {
uid: (skipLog ? ‘skip-log’ : ‘user-defined’),
success: function(item) {
alert(‘Item(s) successfully added after [‘ + this.getId(item) + ‘] !’);
if (!this.isVisible(item)) {
this.setVisible(item);
}
},
fail: function(item) {
alert(‘Failed to add the item(s) after [‘ + this.getId(item) + ‘] !’);
},
itemData: itemData
});
}
}

// 🙂
treeApi.unload(null, {
uid: ‘user-defined’,
success: function(item) {
alert(‘The ROOT was unloaded !’);
},
fail: function(item) {
alert(‘Failed to unload the ROOT !’);
}
});
} else {
var item = requireSelection();
if (item && requireInode()) {
// a item is selected, unload it
treeApi.unload(item, {
uid: ‘user-defined’,
success: function(item) {
alert(‘The item [‘ + this.getId(item) + ‘] was unloaded !’);
},
fail: function(item) {
alert(‘Failed to unload the item [‘ + this.getId(item) + ‘] !’);
}
});
}
}
});

// load the treeview or the selected inode
$(‘#load’).click(function() {
if (requestLoad()) {
if (checkIsTree()) {
// the treeview is selected, load the ROOT
treeApi.ajaxLoad(null, {
uid: ‘user-defined’,
success: function() {
alert(‘The ROOT was successfully loaded !’);
},
fail: function() {
alert(‘Failed to load the ROOT !’);
}
});
} else {
var item = checkIsItem();
treeApi.ajaxLoad(item, {
uid: ‘user-defined’,
success: function(item) {
alert(‘The item [‘ + this.getId(item) + ‘] was successfully loaded !’);
},
fail: function(item) {
alert(‘Failed to load the item [‘ + this.getId(item) + ‘] !’);
}
});
}
}
});

// set a inode to be a leaf
$(‘#setFile’).click(function() {
var item = requireInode();
if (item) {
treeApi.setLeaf(item, {
uid: ‘user-defined’,
success: function(item, options) {
// change the icon
this.addIcon(item, {
icon: ‘file’
});
alert(‘The item [‘ + this.getId(item) + ‘] was made a file !’);
},
fail: function(item, options) {
alert(‘Failed to make the item [‘ + this.getId(item) + ‘] into a file !’);
}
});
}
});

// set a leaf to be a inode
$(‘#setFolder’).click(function() {
var item = requireLeaf();
if (item) {
treeApi.setInode(item, {
success: function(item, options) {
// change the icon
this.addIcon(item, {
icon: ‘folder’
});
alert(‘The item [‘ + this.getId(item) + ‘] was made a folder !’);
},
fail: function(item, options) {
alert(‘Failed to make the item [‘ + this.getId(item) + ‘] into a folder !’);
}
});
}
});

// remove item(s)
$(‘#remove’).click(function() {
if (checkIsTree()) {
// the treeview is selected, remove all ROOT items
treeApi.unload(null, {
uid: ‘user-defined’,
success: function() {
alert(‘The entire treeview was successfully unloaded !’);
},
fail: function() {
alert(‘Failed to remove the ROOT items !’);
}
});
} else {
var item = requireSelection();
if (item) {
// a item is selected, remove it
var id = treeApi.getId(item);
treeApi.remove(item, {
uid: ‘user-defined’,
success: function() {
alert(‘The item [‘ + id + ‘] was removed !’);
},
fail: function() {
alert(‘Failed to remove the item [‘ + id + ‘] !’);
}
});
}
}
});

// set item icon
$(‘#setIcon’).change(function() {
var item = requireItem();
if (item) {
if ($(this).val() == ‘remove’) {
treeApi.removeIcon(item, {
uid: ‘user-defined’,
success: function(item, options) {
alert(‘The icon for the item [‘ + this.getId(item) + ‘] was removed !’);
},
fail: function(item, options) {
alert(‘Failed to remove the icon for the item [‘ + this.getId(item) + ‘] !’);
}
});
} else {
treeApi.addIcon(item, {
uid: ‘user-defined’,
success: function(item, options) {
alert(‘The icon for the item [‘ + this.getId(item) + ‘] was set !’);
},
fail: function(item, options) {
alert(‘Failed to set the icon for the item [‘ + this.getId(item) + ‘] !’);
},
icon: $(this).val()
});
}
}
$(this).val(”);
});

// add a checkbox to the item
$(‘#setCheckbox’).change(function() {
var item = requireItem();
if (item) {
if ($(this).val() == ‘yes’) {
treeApi.addCheckbox(item, {
uid: ‘user-defined’,
success: function(item) {
alert(‘The checkbox for the item [‘ + this.getId(item) + ‘] was added !’);
},
fail: function(item) {
alert(‘Failed to add the checkbox for the item [‘ + this.getId(item) + ‘] !’);
}
});
} else {
treeApi.removeCheckbox(item, {
uid: ‘user-defined’,
success: function(item) {
alert(‘The checkbox for the item [‘ + this.getId(item) + ‘] was removed !’);
},
fail: function(item) {
alert(‘Failed to remove the checkbox for the item [‘ + this.getId(item) + ‘] !’);
}
});
}
}
$(this).val(”);
});

// add a radio-button to the item
$(‘#setRadio’).change(function() {
var item = requireItem();
if (item) {
if ($(this).val() == ‘yes’) {
treeApi.addRadio(item, {
uid: ‘user-defined’,
success: function(item) {
alert(‘The radio-button for the item [‘ + this.getId(item) + ‘] was added !’);
},
fail: function(item) {
alert(‘Failed to add the radio-button for the item [‘ + this.getId(item) + ‘] !’);
}
});
} else {
treeApi.removeRadio(item, {
uid: ‘user-defined’,
success: function(item) {
alert(‘The radio-button for the item [‘ + this.getId(item) + ‘] was removed !’);
},
fail: function(item) {
alert(‘Failed to remove the radio-button for the item [‘ + this.getId(item) + ‘] !’);
}
});
}
}
$(this).val(”);
});

// disable item
$(‘#disable’).click(function() {
var item = requireItem();
if (item) {
treeApi.disable(item, {
uid: ‘user-defined’,
success: function(item, options) {
alert(‘The item [‘ + this.getId(item) + ‘] was disabled !’);
},
fail: function(item, options) {
alert(‘Failed to disable the item [‘ + this.getId(item) + ‘] !’);
}
});
}
});

// enable item
$(‘#enable’).click(function() {
var item = requireItem();
if (item) {
treeApi.enable(item, {
uid: ‘user-defined’,
success: function(item, options) {
alert(‘The item [‘ + this.getId(item) + ‘] was enabled !’);
},
fail: function(item, options) {
alert(‘Failed to enable the item [‘ + this.getId(item) + ‘] !’);
}
});
}
});

// show item
$(‘#show’).click(function() {
var item = requireItem();
if (item) {
treeApi.show(item, {
uid: ‘user-defined’,
success: function(item, options) {
alert(‘The item [‘ + this.getId(item) + ‘] was show !’);
},
fail: function(item, options) {
alert(‘Failed to show the item [‘ + this.getId(item) + ‘] !’);
}
});
}
});

// hide item
$(‘#hide’).click(function() {
var item = requireItem();
if (item) {
treeApi.hide(item, {
uid: ‘user-defined’,
success: function(item, options) {
alert(‘The item [‘ + this.getId(item) + ‘] was hidden !’);
},
fail: function(item, options) {
alert(‘Failed to hide the item [‘ + this.getId(item) + ‘] !’);
}
});
}
});

// toggle item
$(‘#hideshow’).click(function() {
var item = requireItem();
if (item) {
if (treeApi.isHidden(item)) {
$(‘#show’).trigger(‘click’);
} else {
$(‘#hide’).trigger(‘click’);
}
}
});

// open a inode item
$(‘#open’).click(function() {
var item = requireInode();
if (item) {
treeApi.open(item, {
uid: ‘user-defined’,
success: function(item, options) {
alert(‘The item [‘ + this.getId(item) + ‘] was opened !’);
},
fail: function(item, options) {
alert(‘Failed to open the item [‘ + this.getId(item) + ‘] !’);
}
});
}
});

// close a inode item
$(‘#close’).click(function() {
var item = requireInode();
if (item) {
treeApi.close(item, {
uid: ‘user-defined’,
success: function(item, options) {
alert(‘The item [‘ + this.getId(item) + ‘] was closed !’);
},
fail: function(item, options) {
alert(‘Failed to close the item [‘ + this.getId(item) + ‘] !’);
}
});
}
});

// toggle a inode item
$(‘#toggle’).click(function() {
var item = requireInode();
if (item) {
treeApi.toggle(item, {
uid: ‘user-defined’,
success: function(item, options) {
alert(‘The item [‘ + this.getId(item) + ‘] was toggled !’);
},
fail: function(item, options) {
alert(‘Failed to toggle the item [‘ + this.getId(item) + ‘] !’);
}
});
}
});

// time to burn your CPU ;))

// add 10k leaf items
$(‘#addFile10k’).click(function() {
var list = [];
for (var i = 0; i < 10000; i++) {
list[list.length] = newLeaf();
}
if (checkIsTree()) {
// the treeview is selected
var children = treeApi.children();
if (children.length) {
// already has some items on ROOT
treeAddItem(children, list, true);
} else {
// no items on ROOT
treeApi.append(null, {
uid: 'skip-log',
success: function(item, options) {
alert('The 10k file items where added to the ROOT !');
},
fail: function(item, options) {
alert('Failed to add the 10k files to the ROOT !');
},
itemData: list
});
}
} else {
var item = requireSelection();
if (item) {
// a item is selected
treeAddItem(item, list, true);
}
}
});

// add 10k inode items
$('#addFolder10k').click(function() {
var list = [];
for (var i = 0; i