jQuery Tbl Tree - Making hierarchical tree from HTML tables

Download   Demo

Demos

• Tree on second column


• Large Table with 2800 rows


• Level Pickers

Tbl Tree is a jQuery plugin making hierarchical tree from HTML tables.

Features

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

2. HTML

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>

3. JAVASCRIPT

$(function() 
 // initialize with default options
 $( "#table1" ).tbltree();
);

jQuery Tbl Tree - Making hierarchical tree from HTML tables