- Download
  ZIP File
- Download
  TAR Ball
- View On
  GitHub

# TreeGrid jQuery plugin

## Features

- Create TreeGrid from HTML table
- Simple and flexible javascript
- Compatible with bootstrap
- Ability to save the state of the tree
- Events support

## Usage

Step 1. Initialize plugin

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.treegrid.js"></script>
    <link rel="stylesheet" href="css/jquery.treegrid.css">

    <script type="text/javascript">
      $('.tree').treegrid();
    </script>

Step 2. Make table

    <table class="tree">
    	<tr class="treegrid-1">
    		<td>Root node</td><td>Additional info</td>
    	</tr>
    	<tr class="treegrid-2 treegrid-parent-1">
    		<td>Node 1-1</td><td>Additional info</td>
    	</tr>
    	<tr class="treegrid-3 treegrid-parent-1">
    		<td>Node 1-2</td><td>Additional info</td>
    	</tr>
    	<tr class="treegrid-4 treegrid-parent-3">
    		<td>Node 1-2-1</td><td>Additional info</td>
    	</tr>
    </table>

Step 3. See result

Root node | Additional info
Node 1-1 | Additional info
Node 1-2 | Additional info
Node 1-2-1 | Additional info

## Other examples

Basic example

Tree on 2nd column example

Save state example

TreeGrid for bootstrap 2.x

TreeGrid for bootstrap 3.x

TreeGrid for bootstrap 3.x resize demo

Events examples

Big data example

## Configuration Settings

### Settings

Parameter | Type | Default value | Description
--- | --- | --- | ---
treeColumn | Numeric | 0 | Number of column using for tree
initialState | String | expanded | Initial state of tree 'expanded' - all nodes will be expanded 'collapsed' - all nodes will be collapsed
saveState | Boolean | false | If true you can reload page and tree state was saved
saveStateMethod | String | cookie | 'cookie' - save state to cookie 'hash' - save state to hash
saveStateName | String | tree-grid-state | Name of cookie or hash to save state.
expanderTemplate | String | <span class="treegrid-expander"></span> | HTML Element when you click on that will be collapse/expand branches
expanderExpandedClass | String | treegrid-expander-expanded | Class using for expander element when it expanded
expanderCollapsedClass | String | treegrid-expander-collapsed | Class using for expander element when it collapsed
indentTemplate | String | <span class="treegrid-indent"></span> | HTML Element that will be placed as padding, depending on the depth of nesting node
onCollapse | Function | null | Function, which will be executed when one of node will be collapsed
onExpand | Function | null | Function, which will be executed when one of node will be expanded
onChange | Function | null | Function, which will be executed when one of node will be expanded or collapsed

### Public methods

Method name | Description | Example
--- | --- | ---

getRootNodes

Returns the root branches

    // Expand all root nodes
    $('.tree').treegrid('getRootNodes').treegrid('expand');

getNodeId

Return the id of node

    if($('#node-2').treegrid('getNodeId')===2){
      // Do something with node 2
    };

getParentNodeId

Return the id of parent node or null if node is root

    if($('#node-2').treegrid('getParentNodeId')===2){
      // Do something if parent node Id is 2
    };

getAllNodes

Return the all nodes of tree

    // Find all nodes
      $('#tree-1').treegrid('getAllNodes').each(function() {
        if ($(this).treegrid("isLast")) {
          //Do something with all last nodes
        }
      });

getParentNode

Return the parent node or null if node is root

    // Expand parent node
    $('#node-2').treegrid('getParentNode').treegrid('collapse');

getChildNodes

Return the child nodes or null if node is leaf

    // Expand child nodes
    $('#node-2').treegrid('getChildNodes').treegrid('expand');

getDepth

Returns the depth of nested branch

    // Expand all nodes 2nd nesting
    $('.tree').find('tr').each(function(){
      if ($(this).treegrid('getDepth')<2){
    	$(this).treegrid('expand');
      }
    });

isNode

return true if element is node

      $('#tree-1').find('tr').each(function() {
        if ($(this).treegrid("isNode")) {
          //Do something
        }
      });

isLeaf

Is there a node leaf

    // hide all files
    $('.tree').find('tr').each(function(){
      if ($(this).treegrid('isLeaf')){
    	$(this).hide();
      }
    });

isLast

Return true if node is last in branch

    // hide all last elements
    $('.tree').find('tr').each(function(){
      if ($(this).treegrid('isLast')){
    	$(this).hide();
      }
    });

isFirst

Return true if node is first in branch

    // hide all last elements
    $('.tree').find('tr').each(function(){
      if ($(this).treegrid('isFirst')){
    	$(this).hide();
      }
    });

isExpanded

Is node expanded

    if($('#node-2').treegrid('isExpanded')){
      // Do something if node expanded
    };

isCollapsed

Is node collapsed

    if($('#node-2').treegrid('isCollapsed')){
      // Do something if node collapsed
    };

isOneOfParentsCollapsed

Is at least one of the parent nodes is collapsed

    if($('#node-2').treegrid('isOneOfParentCollapsed')){
      // Do something if one of parent collapsed
    };

expand

Expand node

    $('#node-2').treegrid('expand');

collapse

Collapse node

    $('#node-2').treegrid('collapse');

expandRecursive

Expand nodes recursively

    $('#node-2').treegrid('expandRecursive');

collapseRecursive

Collapse nodes recursively

    $('#node-2').treegrid('collapseRecursive');

expandAll

Expand all nodes

    $('#tree').treegrid('expandAll');

collapseAll

Collapse all nodes

    $('#tree').treegrid('collapseAll');

toggle

Collapse node if it expanded and expand when collapsed

    $('#node-2').treegrid('toggle');

render

Redraw the node and all its children

    $('#node-2').treegrid('render');

### Events

Event name | Description | Example
--- | --- | ---

collapse

Will fire when node collapsed

    //Alert when node in treegrid with class "tree" collapsed
    $('.tree').treegrid('getRootNodes').on('collapse', function(){
       alert(this);
    });

expand

Will fire when node expanded

    //Alert when node with id "node1" expanded
    $('#node1').on('expand', function(){
       alert(this);
    });

change

Will fire when node changed. Expanded or collapsed

    //Alert when node in treegrid with class "tree" changed.
    $('.tree').treegrid('getRootNodes').on('change', function(){
       alert(this);
    });

## Unit Tests