Awesome

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

Properties

Methods

Event Execution Life Cycle

1. onstart
2. onprocessingstart
3. onbeforedataconversion
4. onafterdataconversion
5. onprocessingcomplete
6. onrenderstart
7. onbeforenodeinsert
8. onafternodeinsert
9. onrendercomplete
10. onend

Event Details

Node Data Structure

Examples of input data to tree

Json - Linear

{
    "root": [
        {
            "id": 1,
            "name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
            "href": "http://google.com",
            "title": "test",
            "childnodes": [
                {
                    "id": 2,
                    "name": "Proin dignissim commodo elit, quis pretium metus volutpat at.",
                    "childnodes": [
                        {
                            "id": 4,
                            "name": "Morbi malesuada lorem dignissim sapien molestie varius.",
                            "childnodes": [
                                {
                                    "id": 6,
                                    "name": "In feugiat ante sit amet orci pulvinar sit amet vehicula enim ornare."
                                }
                            ]
                        }
                    ]
                },
                {
                    "id": 3,
                    "name": "Quisque tempor dui in magna ullamcorper ornare.",
                    "childnodes": [
                        {
                            "id": 5,
                            "name": "Integer et justo ac nunc viverra elementum vitae at eros."
                        }
                    ]
                },
                {
                    "id": 10,
                    "name": "Praesent venenatis ante iaculis enim semper iaculis.",
                    "childnodes": null
                }
            ]
        },
        {
            "id": 7,
            "name": "Cras at orci turpis, sed sodales velit.",
            "childnodes": [
                {
                    "id": 8,
                    "name": "Cras scelerisque urna vel mi condimentum ac feugiat libero iaculis."
                },
                {
                    "id": 9,
                    "name": "Ut pharetra sem non est facilisis iaculis."
                }
            ]
        }
    ]
}

JSON – Hierarchy

{
    "root": [
        {
            "id": 1,
            "name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
            "href": "http://google.com",
            "title": "test",
            "childnodes": [
                {
                    "id": 2,
                    "name": "Proin dignissim commodo elit, quis pretium metus volutpat at.",
                    "childnodes": [
                        {
                            "id": 4,
                            "name": "Morbi malesuada lorem dignissim sapien molestie varius.",
                            "childnodes": [
                                {
                                    "id": 6,
                                    "name": "In feugiat ante sit amet orci pulvinar sit amet vehicula enim ornare."
                                }
                            ]
                        }
                    ]
                },
                {
                    "id": 3,
                    "name": "Quisque tempor dui in magna ullamcorper ornare.",
                    "childnodes": [
                        {
                            "id": 5,
                            "name": "Integer et justo ac nunc viverra elementum vitae at eros."
                        }
                    ]
                },
                {
                    "id": 10,
                    "name": "Praesent venenatis ante iaculis enim semper iaculis.",
                    "childnodes": null
                }
            ]
        },
        {
            "id": 7,
            "name": "Cras at orci turpis, sed sodales velit.",
            "childnodes": [
                {
                    "id": 8,
                    "name": "Cras scelerisque urna vel mi condimentum ac feugiat libero iaculis."
                },
                {
                    "id": 9,
                    "name": "Ut pharetra sem non est facilisis iaculis."
                }
            ]
        }
    ]
}

XML – Linear

<root>
  <node id='1' name='Lorem ipsum dolor sit amet, consectetur adipiscing elit.' parentId='0' href='http://google.com' />
  <node id='2' name='Proin dignissim commodo elit, quis pretium metus volutpat at.' parentId='1' />
  <node id='3' name='Quisque tempor dui in magna ullamcorper ornare.' parentId='1' buttonadd='false'/>
  <node id='4' name='Morbi malesuada lorem dignissim sapien molestie varius.' parentId='2' buttonremove='false'/>
  <node id='5' name='Integer et justo ac nunc viverra elementum vitae at eros.' parentId='3' />
  <node id='6' name='In feugiat ante sit amet orci pulvinar sit amet vehicula enim ornare.' parentId='4' />
  <node id='7' name='Cras at orci turpis, sed sodales velit.' parentId='0' buttoncheck='true' buttonadd='false' buttonremove='false' classnodeicon='ui-icon-star' />
  <node id='8' name='Cras scelerisque urna vel mi condimentum ac feugiat libero iaculis.' parentId='7' href='https://github.com' target='_blank' />
  <node id='9' name='Ut pharetra sem non est facilisis iaculis.' parentId='7' buttoncheck='true' ischecked='false'/>
  <node id='10' name='Praesent venenatis ante iaculis enim semper iaculis.' parentId='1' buttoncheck='true' isdisabled='true' />
  <node id='11' name='Abra ka dabra.' parentId='9' buttoncheck='true' classnodeicon='ui-icon-lightbulb'/>
  <node id='12' name='Hakuna matata.' parentId='9' buttoncheck='true' classnodeicon='ui-icon-lightbulb' ischecked='true'/>
</root>

XML – Hierarchy

<root>
  <node id='1' name='Lorem ipsum dolor sit amet, consectetur adipiscing elit.' href='http://google.com' title='test'>
    <node id='2' name='Proin dignissim commodo elit, quis pretium metus volutpat at.'>
      <node id='4' name='Morbi malesuada lorem dignissim sapien molestie varius.'>
        <node id='6' name='In feugiat ante sit amet orci pulvinar sit amet vehicula enim ornare.'></node>
      </node>
    </node>
    <node id='3' name='Quisque tempor dui in magna ullamcorper ornare.'>
      <node id='5' name='Integer et justo ac nunc viverra elementum vitae at eros.'></node>
    </node>
    <node id='10' name='Praesent venenatis ante iaculis enim semper iaculis.'></node>
  </node>
  <node id='7' name='Cras at orci turpis, sed sodales velit.'>
    <node id='8' name='Cras scelerisque urna vel mi condimentum ac feugiat libero iaculis.'></node>
    <node id='9' name='Ut pharetra sem non est facilisis iaculis.'></node>
  </node>
</root>

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.