TreeGrid jQuery plugin

Overview

What is it TreeGrid? This plugin needs for rendering tree in table

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

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

Configuration Settings

Settings

Parametr Type Default value Description
initialState String expanded Initial state of tree
'expanded' - all nodes will be expanded
'collapsed' - all nodes will be collapsed
expanderTemplate String <span class="treegrid-expander"></span> HTML Element when you click on that will be collapse/expand branches
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