Simple and Flexible jQuery Tree Grid Plugin - TreeGrid

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:

• jQuery Treemap Plugin for Hierarchical Data - jsTreemap
• jQuery Plugin for Tree Widget - jqTree
• Powerful and Multi-Functional jQuery Folder Tree Plugin  - zTree
• jQuery Flat Folder Tree Plugin - simplefolders
• Super Tiny jQuery Tree View Plugin - Good Tree
• Powerful jQuery Dynamic Tree View Plugin - dynatree
• jQuery Plugin For Displaying A Tree Of Data In A Table - treetable

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.