Limba: RO EN

aciTree is a customizable javascript treeview control written as a jQuery plugin. It offers an easy to use API and it has built-in functionality to load the entire tree with AJAX.

aciTree treeview AJAX load checkbox radio

aciTree treeview columns RTL

IMPORTANT in v4.5

There is a new file that need to be included before the aciTree `core`: jquery.aciTree.dom.js containing a few optimised functions used with the DOM by aciTree.

The .searchId API method used to search nodes by ID will be removed in the final release. There is a replacement in the `utils` extension: the .search method. By default it will search the nodes by ID but can also be customised by using a callback.

Features

  • the tree can be initialized with data from a JavaScript variable or used with the built-in AJAX loading capability, the entire tree can be initialized in one go or the tree branches can be loaded as requested (when a inner node is opened, for example);
  • supports multiple item selection, checkbox and radio-button items, keyboard navigation with ARIA support, in-place item editing, item state (open/selected) persistance using local storage, URL fragment support for item states (open/selected), item search & filter, enabled/disabled states, drag & drop for sorting items, each item can have its own icon image, support for using image sprites;
  • supports multiple data sources, each node can load his children from a different source, the entire tree structure can be serialized (including the added custom item properties);
  • supports displaying multiple columns without using tables, with RTL support;
  • the tree can be styled with CSS, the items can contain custom HTML, there are a great number of CSS classes applied by default to the tree structure;
  • aciTree provides an easy to use API for handling the tree structure, the items can by added, updated, removed etc. on the fly, all operations trigger events you can listen for and respond to.
NOTE: aciTree comes in more that one source code file - but a single minified global file. If you need only a part of the provided functionality - you can remove with ease (with the help of a text editor) the part you don't need from the minified version (the extension loading order is the one from the minified file).

Usage

NOTE: the aciTree plugin does not add the CSS classes to the treeview container (the div element in my example), you need to add them by hand. By default, the provided CSS file does include a single `theme` named `aciTree` (in my example, the div element has the class `aciTree` set to it).

There are a number of additional classes for extra styling:

aciTreeArrow once set will show arrows instead of the default square form for the [+] and [-] node buttons;
aciTreeNoBranches once set will hide the dashed lines connecting the tree nodes;
aciTreeFullRow once set will show the item selection on the entire row, by default only the item content (label) is marked by the selection (to activate the full row mode you need to set `options.fullRow` to TRUE, once set the class will be added to the tree container);
aciTreeColors once set will show odd and even rows with different background colors;
aciTreeBig once set will show a bigger font size and bigger [+]/[-] buttons or arrows.

Note that the provided CSS file can be changed or you can create a new custom theme, based on your needs (there are a few comments in the CSS file to help you a bit).
NOTE: The options.ajax object is used with the jQuery.ajax method to load the treeview ROOT on init and when a inner node needs to be loaded. aciTree will add the item ID to the URL (for ROOT - the ID is an empty string). For example: when aciTree needs to load the item with the ID `node56` a request will be made to options.ajax.url + 'node56' (path/script?nodeId=node56 in my example).

The JSON structure used by aciTree has the following format:

Currently, the folowing item data object properties are reserved/used by aciTree:

I recommend you to put a `_` character at the beginning of any custom property, this avoids as a custom property to interfere with one defined later by aciTree. The item data can be read later with the .itemData method.

A portion of HTML generated by aciTree, one folder with a children file (generated inside the container element, the div element in my example):

NOTE: The CSS classes set on the DOM elements can differ from the ones in the previous example (depending on the init options, the item types and their current state). The simplest way to check them is to use a tool like Firebug for Firefox and inspect the source code in real-time.

Initialization options

NOTE: You can set global values ​​ in the form before initialization.

where:

  • ajax (object) - in the same format as the settings object used by jQuery.ajax. By default to the options.ajax.url will be added the node ID value (of the node that needs loading) and ajax.dataType is set to json;
    NOTE: By using options.ajax it is possible to load with AJAX from a different data structure or in another format, for example XML. The success and error properties are overriden and internally implemented by aciTree and by using options.ajaxHook it is possible to change the functionality offered by jQuery.ajax for each and every node.
  • dataSource (object) - an object with a list of properties defined in the same format with options.ajax. Can be used together with the item data itemData.source property to load the node children from another source than the default one (options.ajax);
    NOTE: The children of a node with the itemData.source property set - will try to load the children from that source. If the data source is not defined into options.dataSource then a data source is searched on the parent nodes and - if not found - options.ajax is used.
  • rootData (array) - a list of items to be loaded into ROOT at initialization time (without performing an AJAX request);
  • queue (object) - where async is the maximum number of AJAX requests to be launch in the same time for tree loading, interval is a time limit in [ms] after which a delay will be inserted before executing the next task and delay is the delay in [ms];
  • loaderDelay (numeric) - a delay in ms until a indication is displayed in the case of slow operations;
  • expand (bool) - if TRUE then all children nodes (from the currently opened node) will open automatically (if needed they will be loaded);
  • collapse (bool) - if TRUE then all children items (from the currently closed node) will close automatically;
  • unique (bool) - if TRUE then when a node is opened all other nodes are closed;
  • empty (bool) - if TRUE then all children items (from the currently closed node) will be removed, at a later opening they will need to be (re)loaded;
  • selectable (bool) - if TRUE then it is possible to select an item and navigate the tree with the keyboard (the tabIndex attribute set to the container must be >=0 if focus is to be achieved with the keyboard, by default - if not set - will be set to -1 at initialization);
  • multiSelectable (bool) - if TRUE then multiple items can be selected at a time;
  • fullRow (bool) - if TRUE then the item selection with a mouse click can be made on the entire item row.
    NOTE: Showing the selection on the entire row is done with the CSS class `aciTreeFullRow` set on the tree container.
  • textSelection (bool) - if FALSE then element text selection will be disabled;
  • checkbox (bool) - if TRUE then each item will have a checkbox. When both checkbox and radio extensions are active, the presence of itemData.checkbox is required to be set to TRUE for each item that need to have a checkbox otherwise there will be no checkbox for the item. Note that this is the opposite from when only the checkbox extension is active: all items will have a checkbox even if the itemData.checkbox property was not set, you need to set it to FALSE to prevent a item to have a checkbox;
    NOTE: When the checkbox extension is active, each item can contain the following additional properties: itemData.checkbox (bool) who say if the item will have a checkbox or not and itemData.checked (bool) to indicate the checkbox state (checked/unchecked).
  • checkboxChain (bool/numeric) - when FALSE the change of the selection state will not be propagated to the parent/children nodes, if it's equal with -1 then only the parent nodes will be updated, if it's equal with 1 then only the children nodes will be updated;
  • checkboxBreak (bool) - when TRUE the change of the selection state will not be propagated to the parent/children nodes if there is a missing checkbox in the middle;
  • checkboxClick (bool) - when TRUE - on a click over a tree item - the checkbox state will be changed only when the click is made over the checkbox element itself;
  • radio (bool) - if TRUE then each item will have a radio-button. When both radio and checkbox extensions are active, the presence of itemData.radio is required to be set to TRUE for each item that need to have a radio-button otherwise there will be no radio-button for the item. Note that this is the opposite from when only the radio extension is active: all items will have a radio-button even if the itemData.radio property was not set, you need to set it to FALSE to prevent a item to have a radio-button;
    NOTE: When the radio extension is active, each item can contain the following additional properties: itemData.radio (bool) who say if the item will have a radio button or not and itemData.checked (bool) to indicate the radio button state (checked/unchecked).
  • radioChain (bool) - when FALSE the change of the selection state will not be propagated to the parent/children nodes;
  • radioBreak (bool) - when TRUE the change of the selection state will not be propagated to the parent/children nodes if there is a missing radio-button;
  • radioClick (bool) - when TRUE - on a click over a tree item - the radio-button state will be changed only when the click is made over the radio element itself;
  • columnData (array) - a column (object) list, each with properties: width - the column width in pixels (if not set then the CSS value will be used), props - the data property name with the value to show in the column (read from itemData[columnData.props]), value - the default value when itemData[columnData.props] is not set;
  • editable (bool) - if TRUE then each item can be edited (entering the edit mode by preassing the f2 key or with a click on the already selected item);
  • editDelay (bool) - how many [ms] to pass (with the mouse button pressed) till beginning of the edit operation (on mouse button release);
  • persist (string) - the local storage key name to keep/restore from the element states (opened/selected) on init;
  • selectHash (string) - the fragment variable name (see the aciFragment plugin) to select an item at the init (multiple IDs can be separated with [;]);
  • openHash (string) - the fragment variable name (see the aciFragment plugin) to open one or more items at init (multiple IDs can be separated with [;]);
  • sortable (bool) - if TRUE then the tree items can be sorted in a dag & drop style;
  • sortDelay (bool) - how many [ms] before opening a inode on hovering over it when in drag & drop;
  • sortDrag: function(item, placeholder, isValid, helper) (callback) - the sortDrag function is called when in the drag. The default implementation sets the helper element with the text value of the dragged item (see the aciSortable plugin, options.drag callback);
  • sortValid: function(item, hover, before, isContainer, placeholder, helper) (callback) - the sortValid function is called when in the drag. The default implementation sets the helper element with the text value of the dragged item and the current drop position (see the aciSortable plugin, options.valid callback);
  • sortOptions (object) - `aciSortable` init options;
  • show (object) - properties used for jQuery.animation to animate the opening of a node;
  • animateRoot (bool) - if TRUE then the ROOT will be animated too (on initialization);
  • hide (object) - properties used for jQuery.animation to animate the closing of a node;
  • view (object) - properties used for jQuery.animation to animate the scroll to a item;
  • autoInit (bool) - whether to perform automatic initialization or not. At init the DOM structure will be changed;
  • ajaxHook: function(item, settings) (callback) - the function receives the following parameters: the current item (LI) who needs loading, the settings from the options.ajax object (see the jQuery.ajax documentation). The ajaxHook function is called for each tree node when it needs loading. Within the callback function - you can access the aciTree API with this keyword.
    NOTE: By using options.ajax it is possible to load with AJAX from a different data structure or in another format, for example XML.
  • itemHook: function(parent, item, itemData, level) (callback) - the function receives the following parameters: the parent item (LI), the current item (LI), current item's data (to be set), the level of the branch (starting from 0). The itemHook function is called for each element before it is inserted in the DOM. Within the callback function - you can access the aciTree API with this keyword;
  • filterHook: function(item, search, regexp) (callback) - the function receives the following parameters: the item (LI) who needs matching, the search term and a RegExp object to be used for testing the item. The filterHook function is called for each tree item to match against the search term, by default the item label value is used. Within the callback function - you can access the aciTree API with this keyword;
  • serialize: function(item, what, value) (callback) - the function receives the following parameters: the item (LI) who needs to be serialized, the data type that will be returned as a string value and the value to be serialized (from the item). The serialize function is called for each tree item to add the value that need to be serialized as a string value. In version 4.2 there are the following possible options for what: `checkbox`, `radio` (implemented by the extensions with the same name) and an empty object (to serialize the entire tree structure, including the added custom properties). Within the callback function - you can access the aciTree API with this keyword.

Useful functions

where FUNCTION:

  • api - enables the use of a API for manipulating the tree structure;
  • destroy - the initial state of the DOM structure is restored;
  • init - initializes the tree, changes the DOM;
  • option - change initialization options (during runtime) (OPTION specifies the name of the option and VALUE the new value);
  • options - return the options used on initialization.

aciTree API


.addCheckbox (item, options) checkbox extension Adds a checkbox element to the item. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the checkboxadded event if the checkbox was added, with wascheckbox if the item was already of the checkbox type and with addcheckboxfail if the operation failed. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeaddcheckbox.
.addIcon (item, options) Adds/updates the ICON image for item. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • icon: (string) CSS class name or Array(CSS class, background-position-x, background-position-y)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldIcon - the old ICON (or NULL if had not existed).
Notifies with the iconadded event when adding/updating the icon, wasicon if the ICON was set already and with addiconfail when the operation failed. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeaddicon.
.addRadio (item, options) radio extension Adds a radio-button element to the item. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the radioadded event if the radio-button was added, with wasradio event if the item was already of the radio-button type and with addradiofail if the operation failed. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeaddradio.
.after (item, options) Add a new item or a list of items after item. where: item jQuery object the LI after which the new elements are added options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • itemData:
    • (object) { itemData } or
    • (array) [ (object) { itemData }, ... ]
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.items - a list of LI elements (the new added ones).
options.itemData can be an array of objects to add many items at once. .after adds only one level, if you want to add childrens to the new nodes - you can use .loadFrom (or they will be loaded by default when the nodes will be opened, using .ajaxLoad).
.after calls options.itemHook init option for each item and notifies regarding the add (after changing the DOM) with the added event. Notifies with the appended and appendfail events if the operation was successful or not. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeafter.
.ajaxLoad (item, options) Loads a node with AJAX (if not already loaded). where: item jQuery object the LI node to be loaded (or NULL for ROOT) options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • unanimated: (boolean) if TRUE then no animations will be used
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The loading with AJAX take place when the nodes are opened for the first time. .ajaxLoad can be called to force loading a node. The node need to be of type inode and not already loaded. If the node was loaded and you want to reload it - you'll need to call .unload before calling .ajaxLoad. The JSON data is requested from the address configured in the init options options.ajax.url and adding the ID of the node to be loaded at the end. Are added as many levels as defined in the JSON. Each item's data is stored and can be accessed with .itemData. Note: if the operation fails then the node will be made of type leaf by default.
.ajaxLoad calls .append for adding the items. Notifies with the loaded and loadfail events if the operation was successful or not and with the wasloaded if the node was loaded already. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeload.
See .loadFrom for loading from a JavaScript variable (instead of AJAX).
.append (item, options) Add one or more childrens to item, the new items are added at the end. where: item jQuery object the LI to add the childrens to (or NULL for ROOT) options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • itemData:
    • (object) { itemData } or
    • (array) [ (object) { itemData }, ... ]
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.items - a list of LI elements (the new added ones).
options.itemData can be an array of objects to add many items at once. .append adds only one level, if you want to add childrens to the new nodes - you can use .loadFrom (or they will be loaded by default when the nodes will be opened, using .ajaxLoad).
.append calls options.itemHook init option for each item and notifies regarding the add (after the DOM is changed) with the added event. Notifies with the appended and appendfail events if the operation was successful or not. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeappend.
.asChild (item, options) utils extension Moves item so it becomes children of a parent item. where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • parent: (jQuery object) the parent item
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter asChild set the item as a children only for empty parents (elements without childrens). If the parent item is of type leaf then .setInode is called.
Notifies with the childset and childfail events if the operation was successful or not. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforechild.
.before (item, options) Add a new item or a list of items before item. where: item jQuery object the LI before which the new elements are added options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • itemData:
    • (object) { itemData } or
    • (array) [ (object) { itemData }, ... ]
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.items - a list of LI elements (the new added ones).
options.itemData can be an array of objects to add many items at once. .before adds only one level, if you want to add childrens to the new nodes - you can use .loadFrom (or they will be loaded by default when the nodes will be opened, using .ajaxLoad).
.before calls options.itemHook init option for each item and notifies regarding the add (after the DOM is changed) with the added event. Notifies with the before and beforefail events if the operation was successful or not. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforebefore.
.blur (item, options) selectable extension Remove focus from the item. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the blur and blurfail events if the operation succeeded or not and with the notfocused event if the item did not had focus. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeblur.
.branch (item, callback, load) utils extension Run a callback function for every children of item. where: item jQuery object the parent LI (or NULL for ROOT) callback function (item) where: item the LI load (boolean) if TRUE then all - not yet loaded - nodes will be loaded and the callback will be run for their childrens too Inside the callback function you can access the aciTree API with this keyword. .branch calls .ajaxLoad when it needs to load a node.
.check (item, options) checkbox/radio extension Set a checkbox or radio-button in the checked state. where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the checked and checkfail events if the operation succeeded or not and with the waschecked event if the item was already checked. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforecheck.
.checkboxes (items, state) checkbox extension Filter items and return only the items with a checkbox. where: items jQuery object a list of LI elements state (boolean) if set, returns only the elements in the checked/unchecked state (TRUE/FALSE)
.children (item, branch, hidden) Returns a list of childrens from item. where: item jQuery object the parent LI (or NULL for ROOT) branch (boolean) if TRUE then all item childrens are returned (not only the direct ones) hidden (boolean) if TRUE then the hidden elements will be considered too
.close (item, options) Closes the item node and all his childrens (if requested). where: item jQuery object the LI to be closed options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • collapse: (boolean) if TRUE then all childrens will be closed too,
  • unanimated: (boolean) if TRUE then no animations will be used
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
If the initialization option options.empty is TRUE then all childrens are removed (.unload will be called). Notifies with the closed and closefail events if the operation was successful or not and with wasclosed if was closed already. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeclose.
.closeOthers (item, options) Closes all other nodes less the item. where: item jQuery object the LI to remain open options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • unanimated: (boolean) if TRUE then no animations will be used
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.closeOthers calls .close to close all needed nodes.
.columnIndex (props) column extension Returns the column index for a value of props. where: props (string) the props value used in options.columnData
.columns () column extension Returns the column count.
.deselect (item, options) selectable extension Deselects the item. where: item jQuery object the LI to be deselected options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the deselected and deselectfail events if the operation succeeded or not and with the notselected event if the item was not selected. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforedeselect.
.destroy (options) Destroys the treeview control, .isLocked will return TRUE from the start until the end of the operation. where: options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.destroy calls .unload for ROOT and notifies with the notinit event if the treeview control was not initialized yet. Notifies with the destroyed and destroyfail events if the operation was successful or not. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforedestroy.
.disable (item, options) Disable the item node. where: item jQuery object the LI to be disabled options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the disabled and disablefail events if the operation was successful or not and with wasdisabled if the node was already disabled. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforedisable.
.disabled (items) Filter items and return only the disabled items. where: items jQuery object a list of LI elements
.edit (item, options) editable extension Enters the editable mode. where: item jQuery object the LI to be edited options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the edit when it enters the edit mode, with wasedit if was in the edit mode already and with editfail if the operation failed. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeedit.
.edited () editable extension Returns the edited LI element.
.enable (item, options) Enable the item node. where: item jQuery object the LI to be enabled options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the enabled and enablefail events if the operation was successful or not and with wasenabled if the node was already enabled. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeenable.
.enabled (items) Filter items and return only the enabled items. where: items jQuery object a list of LI elements
.endEdit (options) editable extension Exits the editable mode (optionally saving the changes). where: options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • save: (boolean) if FALSE then any changes made will not be saved
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.endEdit calls .setLabel to save the changes. Notifies with the edited when changes are saved, endedit when it exits from the edit mode without saving the changes and with endeditfail if the operation failed. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeendedit.
.filter (item, options) utils extension Search & filter the tree items starting from item. where: item jQuery object the parent LI to start from (NULL to start from ROOT) options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • search: (string) the searched value
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.first - the first found item (if any). Note: the returned first found item it's not in the tree branch order, use .prevMatch and/or .nextMatch to search and get items in branch order.
.filter calls options.filterHook init option for each item and notifies with the filtered and filterfail events if the operation was successful or not. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforefilter.
.first (item, hidden) Returns the first children of item. where: item jQuery object the parent LI (or NULL for ROOT) hidden (boolean) if TRUE then the hidden elements will be considered too
.focus (item, options) selectable extension Set focus to item. where: item jQuery object the LI to be focused options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldFocused - the previous item with focus.
Notifies with the focus and focusfail events if the operation succeeded or not and with the wasfocused if the item already had focus. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforefocus.
.focused () selectable extension Returns the (virtual) focused LI element.
.getColumn (item, index) column extension Returns the content of the column for the item by its index. where: item jQuery object the LI index (numeric) the column index (0 based)
.getIcon (item) Returns the item ICON (or NULL if does not exist). where: item jQuery object the LI Can return a string or array (depending on the init value).
.getId (item) Returns the item ID (or NULL if does not exists). where: item jQuery object the LI
.getIndex (item) Returns the index starting from 0 for the item (or NULL if does not exists). where: item jQuery object the LI
.getLabel (item) Returns the text value of item (or NULL if does not exists). where: item jQuery object the LI
.getWidth (index) column extension Returns the column width (in pixels). where: index (numeric) the column index (0 based)
.hasCheckbox (item) checkbox extension Returns TRUE if the item has a checkbox. where: item jQuery object the LI
.hasChildren (item, hidden) Returns TRUE if the item has childrens. where: item jQuery object the LI (or NULL for ROOT) hidden (boolean) if TRUE then the hidden elements will be considered too
.hasFocus () selectable extension Returns TRUE if the treeview control has the focus.
.hasIcon (item) Returns TRUE if item has ICON. where: item jQuery object the LI
.hasNext (item, hidden) Returns TRUE if there is at least a element after item (belonging to the same parent). where: item jQuery object the LI hidden (boolean) if TRUE then the hidden elements will be considered too
.hasParent (item) Returns TRUE if item has a parent. where: item jQuery object the LI
.hasPrev (item, hidden) Returns TRUE if there is at least a element before item (belonging to the same parent). where: item jQuery object the LI hidden (boolean) if TRUE then the hidden elements will be considered too
.hasRadio (item) radio extension Returns TRUE if the item has a radio. where: item jQuery object the LI
.hasSiblings (item, hidden) Returns TRUE if item has siblings on the same level (belonging to the same parent). where: item jQuery object the LI hidden (boolean) if TRUE then the hidden elements will be considered too
.hidden (items) Filter items and return only the hidden items. where: items jQuery object a list of LI elements
.hide (item, options) Hide the item node and all his childrens. where: item jQuery object the LI to be hidden options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the hidden and hidefail events if the operation was successful or not and with washidden if the node was already hidden. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforehide.
.init (options) Init the treeview control (if not initialized already), .isLocked will return TRUE from the start until the end of the operation. where: options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.init calls .loadFrom or .ajaxLoad depending on the init options and notifies with the wasinit event if was initialized already. Notifies with the init and initfail events if the operation was successful or not. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeinit.
.inodes (items, state) Filter items and return only the `inode` items. where: items jQuery object a list of LI elements state (boolean) if set, returns only the nodes in the open/closed state (TRUE/FALSE)
.isBusy (item) Returns TRUE if the item node is loading. where: item jQuery object the LI (or NULL for ROOT)
.isChecked (item) checkbox/radio extension Returns TRUE if the item is checked. where: item jQuery object the LI
.isChildren (parent, children) Returns TRUE if children have parent as parent. where: parent jQuery object the parent LI children jQuery object the children LI
.isClosed (item) Returns TRUE if the item node is closed. where: item jQuery object the LI
.isColumn (index) column extension Returns TRUE if the column is visible. where: index (numeric) the column index (0 based)
.isDisabled (item) Returns TRUE if the item is disabled. where: item jQuery object the LI
.isDisabledPath (item) Returns TRUE if any of the item parents are disabled. where: item jQuery object the LI
.isEdited (item) editable extension Returns TRUE if the item is edited right now. where: item jQuery object the LI
.isEnabled (item) Returns TRUE if the item is enabled. where: item jQuery object the LI
.isEnabledPath (item) Returns TRUE if all of the item parents are enabled. where: item jQuery object the LI
.isFirst (item, hidden) Returns TRUE if item is the first item for its parent. where: item jQuery object the LI hidden (boolean) if TRUE then the hidden elements will be considered too
.isFocused (item) selectable extension Returns TRUE if the item has (virtual) focus. where: item jQuery object the LI
.isHidden (item) Returns TRUE if the item node is hidden. where: item jQuery object the LI
.isHiddenPath (item) Returns TRUE if the path to item is hidden (a parent node is hidden). where: item jQuery object the LI
.isImmediateChildren (parent, children) Returns TRUE if children have parent as direct parent. where: parent jQuery object the parent LI children jQuery object the children LI
.isInode (item) Returns TRUE if item is a inner node (has childrens). where: item jQuery object the LI
.isItem (item) Returns TRUE if item is a valid item. where: item jQuery object the LI
.isLast (item, hidden) Returns TRUE if item is the last item for its parent. where: item jQuery object the LI hidden (boolean) if TRUE then the hidden elements will be considered too
.isLeaf (item) Returns TRUE if item is a leaf node (does not have any childrens). where: item jQuery object the LI
.isLocked () Returns TRUE if the treeview control is in the init or destroy operation.
.isOpen (item) Returns TRUE if the item node is opened. where: item jQuery object the LI
.isOpenPath (item) Returns TRUE if the path to item is open (all the parent nodes are open). where: item jQuery object the LI
.isPersist () persist extension Returns TRUE if there is any saved data.
.isSelected (item) selectable extension Returns TRUE if the item is selected. where: item jQuery object the LI
.isTristate (item) checkbox extension Returns TRUE if the item is tristate. where: item jQuery object the LI
.isVisible (item) Returns TRUE if item is visible (if all parent nodes are opened and the item it's in the visible area). where: item jQuery object the LI
.itemData (item) Returns the related item (updated) properties as defined in the JSON. where: item jQuery object the LI Note that not all node properties are updated in real time after you use the API and the branch property does not contain the children. If you want to read the updated properties - including the children list - you can use the .serialize method.
.itemFrom (element) Returns the LI that contains the element. where: element jQuery object a children element for LI
.last (item, hidden) Returns the last children of item. where: item jQuery object the parent LI (or NULL for ROOT) hidden (boolean) if TRUE then the hidden elements will be considered too
.leaves (items) Filter items and return only the leaf items. where: items jQuery object a list of LI elements
.level (item) Returns the item level starting from 0 for the ones in ROOT (or -1 if does not exists). where: item jQuery object the LI
.loadFrom (item, options) Loads a node from a JavaScript variable (if not already loaded). where: item jQuery object the LI to be loaded (or NULL for ROOT) options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • unanimated: (boolean) if TRUE then no animations will be used,
  • itemData:
    • (array) [ (object) { itemData }, ... ]
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter .loadFrom can be called to load a node from a JavaScript variable. The node need to be of type inode and not already loaded. If the node was loaded and you want to reload it - you'll need to call .unload before calling .loadFrom. Are added as many levels as defined in the JavaScript variable. Each item's data is stored and can be accessed with .itemData. Note: if the operation fails then the node will be made of type leaf by default.
.loadFrom calls .append to add the items. Notifies with the loaded and loadfail events if the operation was successful or not and with the wasloaded if the node was loaded already. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeload.
See .ajaxLoad for loading with AJAX.
.moveAfter (item, options) utils extension Move item after a specific item. where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • after: (jQuery object) the element after which to move item
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the moved and movefail events if the operation was successful or not and with the wasafter if the item was in the requested position. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforemove.
.moveBefore (item, options) utils extension Move item before a specific item. where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • before: (jQuery object) the element before which to move item
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the moved and movefail events if the operation was successful or not and with the wasbefore if the item was in the requested position. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforemove.
.moveDown (item, options) utils extension Move item down with a position (inside the same parent). where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldIndex - the item old index (starting with 0).
.moveDown calls .setIndex to change item position.
.moveFirst (item, options) utils extension Move item at the beginning (inside the same parent). where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldIndex - the item old index (starting with 0).
.moveFirst calls .setIndex to change item position.
.moveLast (item, options) utils extension Move item at the end (inside the same parent). where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldIndex - the item old index (starting with 0).
.moveLast calls .setIndex to change item position.
.moveUp (item, options) utils extension Move item up with a position (inside the same parent). where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldIndex - the item old index (starting with 0).
.moveUp calls .setIndex to change item position.
.next (item, hidden) Returns the next element from item (belonging to the same parent). where: item jQuery object the LI hidden (boolean) if TRUE then the hidden elements will be considered too
.nextMatch (item, search, callback) utils extension Search for a match starting with the item after item. where: item jQuery object the LI (or NULL to start with the first item) search (string) the value to search for callback function (item) where: item the found LI (if any) Inside the callback function you can access the aciTree API with this keyword. .nextMatch calls options.filterHook init option for each item.
.open (item, options) Opens the item node and all his childrens (if requested). where: item jQuery object the LI to be opened options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • unique: (boolean) if TRUE then all other nodes are closed,
  • expand: (boolean) if TRUE then the childrens are opened too,
  • unanimated: (boolean) if TRUE then no animations will be used
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.open calls .ajaxLoad when it needs to load a node. Notifies with the opened and openfail events if the operation was successful or not and with wasopened if the node was already opened. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeopen.
.openPath (item, options) Opens the entire path till item. where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • unanimated: (boolean) if TRUE then no animations will be used
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.openPath calls .open to open the nodes.
.option (option, value) Set a option at runtime (after init). where: option (string) the option to change value (mixed) the new value (in the same format like the init options)
.options () Returns the init options (including any new value assigned with option).
.parent (item) Returns the parent of item. where: item jQuery object the LI
.path (item, reverse) Returns a list of parent items till item (starting from ROOT). where: item jQuery object the LI reverse (boolean) if TRUE the list will be reversed
.pathId (item, reverse) utils extension Returns a list of parent IDs till item (starting from ROOT). where: item jQuery object the LI reverse (boolean) if TRUE the list will be reversed
.prev (item, hidden) Returns the previous element from item (belonging to the same parent). where: item jQuery object the LI hidden (boolean) if TRUE then the hidden elements will be considered too
.prevMatch (item, search, callback) utils extension Search for a match starting with the item before item. where: item jQuery object the LI (or NULL to start with the last item) search (string) the value to search for callback function (item) where: item the found LI (if any) Inside the callback function you can access the aciTree API with this keyword. .prevMatch calls options.filterHook init option for each item.
.radios (items, state) radio extension Filter items and return only the items with a radio-button. where: items jQuery object a list of LI elements state (boolean) if set, returns only the elements in the checked/unchecked state (TRUE/FALSE)
.remove (item, options) Remove item (including the childrens). where: item jQuery object the LI to be removed options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • unanimated: (boolean) if TRUE then no animations will be used
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.remove calls .unload to remove the childrens and .setLeaf to set the parent node if there was a single child node. Notifies with the removed and removefail events if the operation was successful or not. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeremove.
.removeCheckbox (item, options) checkbox extension Remove a checkbox element from the item. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the checkboxremoved event if the checkbox was removed, with notcheckbox if the item was not of the checkbox type and with removecheckboxfail if the operation failed. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeremovecheckbox.
.removeIcon (item, options) Remove the ICON image for item. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldIcon - the old ICON (or NULL if had not existed).
Notifies with the iconremoved event if the ICON was removed, noticon if the ICON did not exist and with removeiconfail when the operation failed. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeremoveicon.
.removeRadio (item, options) radio extension Remove a radio-button element from the item. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the radioremoved event if the radio-button was removed, with notradio if the item was not of the radio-button type and with removeradiofail if the operation failed. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeremoveradio.
.sameParent (item1, item2) Returns TRUE if item1 and item2 have the same direct parent. where: item1 jQuery object the LI item2 jQuery object the LI
.sameTopParent (item1, item2) Returns TRUE if item1 and item2 have the same parent on level 0. where: item1 jQuery object the LI item2 jQuery object the LI
.search (item, options) utils extension Searches the elements with an ID or a custom property. where: item jQuery object the LI to start with (NULL for ROOT) options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • search: (string) the ID to search for,
  • load: (boolean) if TRUE then the nodes will be loaded if required,
  • callback: function (item, search) used to do a custom search
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the first found element options the initial options parameter The options object sent to success function will contain the following new properties:
options.results - the found nodes.
.search calls .ajaxLoad when it needs to load a node.
.searchId (path, load, options) utils extension Searches and returns the LI element with a ID. where: path (boolean) if TRUE then the search stops to the first branch with the ID inside the searched ID (the IDs need to be path like, the ID of a children need to start with the ID of the parent and add something else after it) load (boolean) if TRUE then all not yet loaded nodes will be loaded and the search will be made for the childrens too (only if path is TRUE) options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • id: (string) the ID to search for
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item found element options the initial options parameter
.searchId calls .ajaxLoad when it needs to load a node.
.searchPath (path, load, options) utils extension Searches a LI element based on a list of IDs. where: item jQuery object the LI to start with (NULL for ROOT) options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • path: (array) the ID list to search for,
  • load: (boolean) if TRUE then the nodes will be loaded if required
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item found element options the initial options parameter
.searchPath calls .ajaxLoad when it needs to load a node.
.select (item, options) selectable extension Selects the item. where: item jQuery object the LI to be selected options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • focus: (boolean) if FALSE then the focus will not be set
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldSelected - the previous selected item(s).
Notifies with the selected and selectfail events if the operation succeeded or not and with the wasselected if the item was already selected. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeselect.
.selected () selectable extension Returns the selected LI element(s).
.serialize (item, what, callback) Returns a serialized value depending on the what option. where: item jQuery object the LI to start with (or NULL to start from the ROOT) what (string) type of the wanted value to be serialized callback function (item, what, value) where: item the LI who need to be serialized what the value type to be serialized what value the value who will be serialized (depending on what) The 4.2 version let you use the following values for what: `checkbox`, `radio` (to serialize the selected checkboxes or radio-buttons, options implemented by the extensions with the same name) and an empty object (to serialize the entire tree structure, including the added custom properties). Inside the callback function you can access the aciTree API with this keyword. If callback is not set then the options.serialize init option will be used by default.
.setColumn (item, options) column extension Set the item column content. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • index: (numeric) the column index (0 based),
  • value: (string) the new content
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldValue - the old content.
Notifies with the columnset and columnfail events if the operation was successful or not and with the wascolumn event if the content was of the same value already. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforecolumn. .setColumn will set a property named options.columnData[].props, you must take care not to use any property name defined by default in the itemData object.
.setId (item, options) Set the item ID. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • id: (string) the new ID
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldId - the old ID. Note: the ID need to be unique at the treeview control level.
Notifies with the idset and idfail events if the operation was successful or not and with the wasid event if the ID was of the same value already. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeid.
.setIndex (item, options) Set the item index. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • index: (numeric) the new index
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldIndex - the old index.
Notifies with the indexset and indexfail events if the operation was successful or not and with the wasindex event if the index was of the same value already. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeindex.
.setInode (item, options) Transforms item in a inner node. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the inodeset and inodefail events if the operation was successful or not and with the wasinode event if was a inner node already. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeinode.
.setLabel (item, options) Set the item text content. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • label: (string) the new label
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter The options object sent to success and fail functions will contain the following new properties:
options.oldLabel - the old label.
Notifies with the labelset and labelfail events if the operation was successful or not and with the waslabel event if the label was of the same value already. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforelabel.
.setLeaf (item, options) Transforms item in a leaf node. where: item jQuery object the LI to be changed options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • unanimated: (boolean) if TRUE then no animations will be used
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.setLeaf calls .unload to remove all childrens and notifies with the leafset and leaffail events if the operation was successful or not and with the wasleaf event if was a leaf node already. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeleaf.
.setVisible (item, options) Brings item into the view. where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • unanimated: (boolean) if TRUE then no animations will be used,
  • center: (boolean) if TRUE the item will be centered in view
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.setVisible calls .openPath to open all parent nodes. Notifies with the visible and visiblefail events if the operation was successful or not and with the wasvisible event if was in the visible zone already. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforevisible.
.setWidth (index, width) column extension Set the column width (in pixels). where: index (numeric) the column index (0 based) width (numeric) the new width
.show (item, options) Show a hidden item. where: item jQuery object the LI to be show options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the shown and showfail events if the operation was successful or not and with wasshown if the node was already visible. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeshow.
.siblings (item, hidden) Returns a list of item siblings (belonging to the same parent). where: item jQuery object the LI hidden (boolean) if TRUE then the hidden elements will be considered too
.swap (options) utils extension Exchanges two items (the items can't be children and parent). where: options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • item1: the first LI item,
  • item2: the second LI item,
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the swapped and swapfail events the success or failure of the operation. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeswap.
.toggle (item, options) Opens or closes the item node. where: item jQuery object the LI to be opened/closed options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • unique: (boolean) if TRUE then (on node opening) all other nodes will be closed,
  • expand: (boolean) if TRUE then (on open) all childrens will be opened too,
  • collapse: (boolean) if TRUE then (on close) all childrens will be closed too,
  • unanimated: (boolean) if TRUE then no animations will be used
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.toggle calls .open or .close to open/close a node. Notifies with the toggled and togglefail events if the operation was successful or not. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforetoggle.
.toggleColumn (index, show) column extension Show or hide a column. where: index (numeric) the column index (0 based) show (boolean) (if set) state changes to this value
.topParent (item) Returns the parent on the level 0 for item. where: item jQuery object the LI
.tristate (items) checkbox extension Filter items and return only the tristate items. where: items jQuery object a list of LI elements
.uncheck (item, options) checkbox/radio extension Set a checkbox or radio-button in the unchecked state. where: item jQuery object the LI options
  • object {
  • success: function (item, options),
  • fail: function (item, options)
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
Notifies with the unchecked and uncheckfail events if the operation was successful or not and with the notchecked event if the element was not checked. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeuncheck.
.unload (item, options) Removes all the item childrens. where: item jQuery object the LI (or NULL for ROOT) options
  • object {
  • success: function (item, options),
  • fail: function (item, options),
  • unanimated: (boolean) if TRUE then no animations will be used
  • }
the callback function success is called if the operation succeeded and fail if failed, you can access the aciTree API with this keyword. where: item the LI options the initial options parameter
.unload calls .close to close a opened node and notifies with the removed event about removing each of the childrens. Notifies with the unloaded and unloadfail events if the operation was successful or not and with notloaded if the node was not loaded. The operation can be canceled by returning FALSE from the event handler when eventName is equal with beforeunload.
.unpersist () persist extension Removes the save data (if there is any).
.visible (items, view) Filter items and return only the visible items (the items with all parent nodes open). where: items jQuery object a list of LI elements view (boolean) if TRUE, returns only the items in view .visible will call .isVisible to find if a item is in view.
.wasInit () Returns TRUE if the treeview control was initialized.
.wasLoad (item) Returns TRUE if item was loaded. where: item jQuery object the LI (or NULL for ROOT)

A few words about the itemData object format:

for a simplified data structure and to reduce the data size loaded with AJAX, the itemData properties can be omitted in some cases:

  • the icon property can be omitted for items without a icon;
  • the inode property can be omitted for a `leaf` item;
  • the branch property can be omitted for a `inode` who will be loaded with AJAX;
  • the checkbox and radio properties can be omitted when only one of the `checkbox` or `radio` extension is included in the page, otherwise they need to be set for each and every item who need to have a checkbox/radio-button;
  • the open, selected, disabled and checked properties are needed only when you need to set that state;
  • the source property need to be set only when you want to load the children from another source (other than `options.ajax.url`).

You can listen for the folowing events (see the aciTree API to know when they are triggered):

NOTE: The events are launched under one name: acitree. Delimitation between them can be done by reading the argument within the event handler function.

The sortable extension adds a few extra events:

  • beforedrag - the drag start can be canceled by returning FALSE within the event handler function;
  • dragfail - if the drag was canceled;
  • checkdrop - by returning FALSE within the event handler function we will mark the current drop target as invalid (the drop target is options.hover). The options parameter will contain extra properties: hover, before, isContainer, placeholder, helper (see aciSortable plugin, options.valid callback);
  • sorted - when the drag & drop succeeded. The options parameter will contain extra properties: placeholder, helper (see aciSortable plugin, options.end callback);
  • dropfail - if the drag & drop failed. The options parameter will contain extra properties: placeholder, helper (see aciSortable plugin, options.end callback).
NOTE: When options.multiSelectable is enabled, the list of dragged nodes can be read from the options.items parameter on all the above sortable events (in the event handler function).

NOTE: Starting with v3.6.0 aciTree came with a extension for debug purposes, for start it will only log to the console all events generated by aciTree. The debug extension is not included in the minified version of the plugin, to activate it you only need to include the script file `jquery.aciTree.debug.js` in the page where you want debugging.

An example of listening for the events:

where api is the API entry (you can run the plugin methods as , item is the item for which the notification was launched (can be NULL for ROOT), eventName is the event name and options is the object initially used when the API method was called.

NOTE: All API methods having the options parameter are sending this object to the success and fail methods. By default a new property is defined: options.uid with the value `ui`, this can be used to set a unique identifier readable later in the callback functions success, fail and in the event handler function.

Tested in Firefox 19, Chrome 26, IE8+ and Safari 5. Opera 12 seems to replace margin-left with margin-right in the RTL mode.

© 2014 aCoderInsights.ro