Simple and Flexible jQuery Tree Grid Plugin - TreeGrid
File Size: | 143 KB |
---|---|
Views Total: | 35003 |
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:
- 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.