Simple and Flexible jQuery Tree Grid Plugin - TreeGrid

Simple and Flexible jQuery Tree Grid Plugin - TreeGrid
File Size: 143 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

TreeGrid is a lightweight and flexible jQuery plugin to create a tree grid component that renders hierarchical, nested and flat data in a table.

You might also like:

Basic Usage:

1. Create a 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>

2. The required stylesheet

.treegrid-indent {
width: 16px;
height: 16px;
display: inline-block;
position: relative;
}
.treegrid-expander {
width: 16px;
height: 16px;
display: inline-block;
position: relative;
}
.treegrid-expanded .treegrid-expander {
background-image: url(../img/collapse.png);
cursor: pointer;
}
.treegrid-collapsed .treegrid-expander {
background-image: url(../img/expand.png);
cursor: pointer;
}

3. Include jQuery library and jQuery TreeGrid plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.treegrid.js"></script>

4. Call the plugin and you're done

<script type="text/javascript">
$('.tree').treegrid();
</script>

Change logs:

v0.3.0 (2015-02-03)

  • Perfomance optimization
  • Bootstrap 3 update
  • Add minifiyed js
  • Add npm installation
  • Add borew installation

v0.2.0 (2014-01-22)

  • Add events support

v0.1.9 (2013-12-18)

  • fix table in table bug

v0.1.8 (2013-12-17)

  • fix: "-" symbol in id

v0.1.7 (2013-11-15)

  • added isFirst method

v0.1.6 (2013-11-13)

  • Add isNode method
  • Add getAllNodes method
  • Fix isLast method. Throw error if method is not node of tree.

This awesome jQuery plugin is developed by maxazan. For more Advanced Usages, please check the demo page or visit the official website.