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:

Set Checkbox:

Set Radio:

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.