New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/jquery-tbl-tree-making-hierarchical-tree-from-html-tables/
jQuery Tbl Tree - Making hierarchical tree from HTML tables
Large Table with 2800 rows
Tbl Tree is a jQuery plugin making hierarchical tree from HTML tables.
Create Tree table from HTML table
Comparibaly fast on big tables
Ability to specify column to make a tree
Compatible with jquery-ui $.widget
Ability to save the state of the tree
Ability to expand/collapse by level of hierarchy
1. INCLUDE CSS AND JS FILES
<link type="text/css" href="css/jquery.tbltree.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> <script type="text/javascript" src="./js/jquery.tbltree.js"></script>
If you want to use saveState: option, then need to include $.coocke plugin as well:
<script type="text/javascript" src="./js/jquery.cookie.js"></script>
Create HTML Table by adding ‘row-id’ and ‘parent-id’ attributes to “tr” tags. Attributes names can be configured by options `rowAttr` and `parrentAttr`.
<table id="table1"> <tr> <th>Title</th><th>Column 1</th><th>Column 2</th><th>Column 3</th> </tr> <tr row-id="1"> <td>Level 1</td><td class="data">2</td><td class="data">2</td><td class="data">2</td> </tr> <tr row-id="1.1" parent-id="1" > <td>Level 1.1</td><td class="data">2</td><td class="data">2</td><td class="data">2</td> </tr> <tr row-id="2"> <td>Level 2</td><td class="data">2</td><td class="data">2</td><td class="data">2</td> </tr> <tr row-id="2.1" parent-id="2" > <td>Level 2.1</td><td class="data">2</td><td class="data">2</td><td class="data">2</td> </tr> </table>
$(function() // initialize with default options $( "#table1" ).tbltree(); );