Here you have a simple implementation of a file system treeview with the most features available to be changed at the runtime from the interface (see the treeview/right form elements on the bottom of the page).

You can find a simple PHP implementation in the download (source code) but any server-side language can be used. aciTree needs the data in JSON format and it's using AJAX to load the children of a inner node (once required).

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 the plugin init options and how to use the events).

Back to home page

Available aciTree treeview demos

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 included 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:

Expand All:

Collapse All:

Unique on Open:

Empty on Close:

Selectable:

Multi-Selectable

Full Row:

Text Selection:

Sortable:

Checkboxes:

Chain Checkboxes:

Checkbox Break:

Checkbox-Only Click:

Radio Buttons:

Chain Radio Buttons:

Radio Button Break:

Radio-Only Click:

Editable:

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

Mode:

Size:

Node Button:

Show Branches:

Direction:

Odd/Even Rows:

Set Icon:

Set Checkbox:

Set Radio:

Item: (note)

Node:

Burn some CPU:

Using 'branch':

Search ID:

Search Params:

Move Item:

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

Set Index:

Swap Item (by ID):
with

Cancel UI Tasks :

Cancel User-Defined Tasks :

Serialize (see the log):

Tree Log... clear log

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


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.