- 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

## 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

## 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

### 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
    };

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');
      }
    });

isLeaf

Is there a node leaf

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

isLast

Is node a last element of its parent

    // hide all last elements
    $('.tree').find('tr').each(function(){
      if ($(this).treegrid('isLast')){
    	$(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');

## Unit Tests