- 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

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