TreeGrid jQuery plugin



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


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
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
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
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){
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
  if ($(this).treegrid('isLeaf')){
isLast Return true if node is last in branch
// hide all last elements
  if ($(this).treegrid('isLast')){
isFirst Return true if node is first in branch
// hide all last elements
  if ($(this).treegrid('isFirst')){
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


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(){
expand Will fire when node expanded
//Alert when node with id "node1" expanded
$('#node1').on('expand', function(){
change Will fire when node changed. Expanded or collapsed
//Alert when node in treegrid with class "tree" changed. 
$('.tree').treegrid('getRootNodes').on('change', function(){

Unit Tests