jQuery-ui Tree Control

jQuery-ui Tree Control

Introduction:

We all know that jQuery-ui being a popular rendering framework supports only basic controls. Many of the controls that we use in web domain are still missing. Once such control is tree control and In order to expand the control set of jQuery-ui, this tree control is created which is compatible with jQuery-ui.

Features:

  1. Supported on all jQuery compliant browsers.
  2. Supported compliance with jQuery-ui.
  3. Supports both JSON / XML data objects.
  4. Supports data in both linear and hierarchy format.
  5. Exposes various events for advance level programming.
  6. Capability to change the icons. The programmer can change the collapse, expand, item, add, remove icons for the complete tree. The plugin also supports feature to change the icon at a specific node level.
  7. Expand / Collapse tree.
  8. Show / Hide buttons like add, remove and checkbox for a specific node or for complete tree. A custom message can also be specified in case of removing a node.
  9. Highlights the selected node with user specified class.
  10. Disable checkbox with the node if present.
  11. Exposed method to expand, collapse and toggle tree.
  12. Exposed methods for add, remove and check select a node.
  13. Enables checkbox selection and standardization.
  14. Any checkbox can be selected via property in data object.
  15. If a parent is selected, to which no child is selected, the parent will be auto unselected.
  16. If a child is selected, then its immediate parents will be automatically selected.
  17. Any custom attribute or property added to the dataSet will be added to the tree node for advance usage.

Documentation:

  1. Properties
    S.No.Property NameTypeDescription
    1containeridstringThe container div where the tree control needs to be populated.
    2urlstringIn case where the data source for the tree is either a external file / page / service, the url or path needs to be specified.
    3asyncbooleanOnly in case url is specified, where the service call would be
    4datasetobject (json / xml)Should be specified only in case a local json/xml object is used to populate data in tree.
    5datatypeenumSpecifies whether the type of data is either json or xml. Possible values are $treedatatype.Json and $treedatatype.Xml.
    6dataformatenumSpecifies the format of the data. Linear data should specify the parentId in the node, but the same is not required in Hierarchy as the parent-child relationship is already established. Possible values are $treedataformat.Linear and $treedataformat.Hierarchy.
    7class_node_collapsestringClass to be used for Collapse node. The jquery-ui icons can be referred from link.
    8class_node_expandstringClass to be used for Expand node. The jquery-ui icons can be referred from link.
    9class_node_itemstringClass to be used for item node with no child. The jquery-ui icons can be referred fromlink.
    10collapse_treebooleanWhether to collapse the complete tree.
    11class_node_highlightstringClass to be used for highlighting selected node.
    12class_node_addstringClass to be used for add node button. The jquery-ui icons can be referred from link.
    13class_node_removestringClass to be used for remove node button. The jquery-ui icons can be referred fromlink.
    14show_button_checkbooleanWhether to show checkbox for a node.
    15show_node_addbooleanWhether to show add button for a node.
    16show_node_removebooleanWhether to show remove button for a node.
    17node_remove_messagestringThe confirm message to be displayed before deleting the node.
  2. Methods
    S.No.Method NameParameterDescription
    1ExpandExpands the root node.
    2CollapseCollapse the root node.
    3ToggleToggles the root node.
  3. Event Execution Life Cycle
    1. onstart
    2. onprocessingstart
    3. onbeforedataconversion
    4. onafterdataconversion
    5. onprocessingcomplete
    6. onrenderstart
    7. onbeforenodeinsert
    8. onafternodeinsert
    9. onrendercomplete
    10. onend
  4. Event Details
    S.No.Event NameSignatureDescription
    1onstartfunction()this event is fired on the start of the plugin.
    2onprocessingstartfunction()this event is fired before the processing of data is to be started. At this stage the data is fetched from the source.
    3onbeforedataconversionfunction()this event is fired before the data is converted into internal format.
    4onafterdataconversionfunction()this event is fired after the data is converted into internal format.
    5onprocessingcompletefunction()this event is fired after the processing of data is complete.
    6onrenderstartfunction()this event is fired at the start of the tree rendering.
    7onbeforenodeinsertfunction(node)this event is fired before a node is inserted in the tree. The parameter “node” in this function is the node object to be added to the tree.
    8onafternodeinsertfunction(node)this event is fired after a node is inserted in the tree. The parameter “node” in this function is the node object to be added to the tree.
    9onrendercompletefunction()this event is fired at the when rendering the tree is complete.
    10onendfunction()this event is fired at the end of the plugin.
    11onprocessingerrorfunction(xhr, ajaxOptions, thrownError)this event is fired when an error has been encountered while fetching data for the tree. The parameter, “xhr” is the XmlHttpRequest object; and “ajaxOptions” is the ajax options object; and “thrownError” is the error object.
    12onselectednodefunction(id, node, sender)this event is fired when a node is selected from the tree. The parameter “id” is the unique identifier on the noe, “node” in this function is the selected node element in the tree and “sender” is the event object.
    13onbeforeaddnodefunction(id, node, sender)this event is fired before a node is added. The parameter “id” is the unique identifier on the noe, “node” in this function is the selected node element in the tree and “sender” is the event object.
    14onafteraddnodefunction(id, node, sender)this event is fired after a node is added. The parameter “id” is the unique identifier on the noe, “node” in this function is the selected node element in the tree and “sender” is the event object.
    15onbeforeremovenodefunction(id, node, sender)this event is fired before a node is removed. The parameter “id” is the unique identifier on the noe, “node” in this function is the selected node element in the tree and “sender” is the event object.
    16onafterremovenodefunction(id, node, sender)this event is fired after a node is removed. The parameter “id” is the unique identifier on the noe, “node” in this function is the selected node element in the tree and “sender” is the event object.
    17onaddnodefunction(id, node, sender)this event is fired when is node is to be added. The parameter “id” is the unique identifier on the noe, “node” in this function is the selected node element in the tree and “sender” is the event object.
    18onremovenodefunction(id, node, sender)this event is fired when a node is to be removed. The parameter “id” is the unique identifier on the noe, “node” in this function is the selected node element in the tree and “sender” is the event object.
    19onnodecheckselectedfunction(id, node, sender)this event is fired when checkbox for a node is selected. The parameter “id” is the unique identifier on the noe, “node” in this function is the selected node element in the tree and “sender” is the event object.
  5. Node Data Structure
    S.No.Attribute NameTypeDescription
    1idintThe id of the node.
    2namestringThis is the text of the node.
    3parentidintThis is the parent’s id to the node. In case of root node, this id will be 0. Note: This needs to be specified only in case of Hierarchy data format.
    4hrefurlThis is a url link on the node.
    5targetstringIn case using the url attribute , the target can be set for the url (example, “_blank”).
    6buttoncheckbooleanWhether to show checkbox at node level. This property overrides the show_button_check property at plugin level.
    7buttonaddbooleanWhether to show add button at node level. This property overrides the show_button_add property at plugin level.
    8buttonremovebooleanWhether to show remove button at node level. This property overrides the show_button_remove property at plugin level.
    9classnodeiconstringClass to be specified for a node icon. This property overrides the class property at plugin level. The jquery-ui icons can be referred fromlink.
    10isdisabledbooleanSpecifies whether to disable the checkbox. This attribute can only be used along with buttoncheck attribute.
    11ischeckedbooleanSpecifies whether to check/uncheck the checkbox. This attribute can only be used along with buttoncheck attribute.
    12tooltipstringSets the tooltip for the node.
  6. Examples of input data to tree
    1. JSON – Linear
    2. JSON – Hierarchy
    3. XML – Linear
    4. XML – Hierarchy

Important links:

  1. Code
  2. Bugs / Feature Request

How to use:

  1. Run code from Github:
    1. Run “npm install”
    2. Run “bower install”
    3. Run “index.html”
  2. Implement in your project:
    1. Run “bower install jqueryuitreecontrol”
    2. Add “bower_components/jqueryuitreecontrol/dist/jquery.techbytarun.jqueryuitreecontrol.js” to your page.
Facebook Comments