TreeGrid jQuery plugin

Features

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 nodeAdditional info
Node 1-1Additional info
Node 1-2Additional info
Node 1-2-1Additional 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

ParameterTypeDefault valueDescription
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