- 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