TreeGrid jQuery plugin


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



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

Step 2. Make table

<table class="tree">
	<tr class="treegrid-1">
		<td>Root node</td><td>Additional info</td>
	<tr class="treegrid-2 treegrid-parent-1">
		<td>Node 1-1</td><td>Additional info</td>
	<tr class="treegrid-3 treegrid-parent-1">
		<td>Node 1-2</td><td>Additional info</td>
	<tr class="treegrid-4 treegrid-parent-3">
		<td>Node 1-2-1</td><td>Additional info</td>


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


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
getNodeId Return the id of node
  // Do something with node 2
getParentNodeId Return the id of parent node or null if node is root
  // Do something if parent node Id is 2
getParentNode Return the parent node or null if node is root
// Expand parent node
getChildNodes Return the child nodes or null if node is leaf
// Expand child nodes
getDepth Returns the depth of nested branch
// Expand all nodes 2nd nesting
  if ($(this).treegrid('getDepth')<2){
isLeaf Is there a node leaf
// hide all files
  if ($(this).treegrid('isLeaf')){
isLast Is node a last element of its parent
// hide all last elements
  if ($(this).treegrid('isLast')){
isExpanded Is node expanded
  // Do something if node expanded
isCollapsed Is node collapsed
  // Do something if node collapsed
isOneOfParentsCollapsed Is at least one of the parent nodes is collapsed
  // Do something if one of parent collapsed
expand Expand node
collapse Collapse node
expandRecursive Expand nodes recursively
collapseRecursive Collapse nodes recursively
expandAll Expand all nodes
collapseAll Collapse all nodes
toggle Collapse node if it expanded and expand when collapsed
render Redraw the node and all its children
Unit Tests