jQuery Tbl Tree by gagiks

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

Usage

1. Install

Include jQuery and jQuery-ui in your page:

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

Include Plugin in your page:

<script type="text/javascript" src="./js/jquery.tbltree.js"></script>
<link type="text/css" href="css/jquery.tbltree.css" rel="stylesheet">

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. Make a tree

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>

Add javascript code:

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

Add javascript code:

Title	Column 1	Column 2	Column 3
Level 1	2	2	2
Level 1.1	2	2	2
Level 2	2	2	2
Level 2.1	2	2	2

Examples

Tree on second column
Large Table with 2800 rows
Level Pickers
Display counts based on children
Events

Configuration

1. Settings

Parameter	Type	Default	Description
rowAttr:	String	'row-id'	Attribute name which is set for `<tr>` tags and identifies the ID of the row.
parentAttr:	String	'parent-id'	Attribute name which is set for `<tr>` tags and identifies the ID of parent row. Note: this attribute must be skipped for root nodes.
initState:	String	'collapsed'
treeColumn:	String	0	Identifies the column of the table we want to make a tree.
saveState:	Boolean	false	If true tree state will be save after page is re-loaded
saveStateName:	String	'tbltree-state'	Name of cookie to save state
levelPicker:	String	''	jQuery selectot of an element where we cant to render level pickers.
expanderTemplate:	String	<span class="tbltree-expander"></span>	HTML Element when you click on that will be collapse/expand branches
levelPickerTemplate:	String	<div class="tbltree-level-pickers"> <span id="0" class="tbltree-level-item">[1]</span>  <span id="1" class="tbltree-level-item">[2]</span>  <span id="2" class="tbltree-level-item">[3]</span>  <span id="3" class="tbltree-level-item">[4]</span>  </div>	HTML template of level pickers, each element having class `tbltree-level-item` must have numberic id, identifying the level we want to show.
indentTemplate:	String	<span class="tbltree-indent"></span>	HTML Element that will be placed as padding, depending on the depth of nesting node
expanderExpandedClass:	String	'tbltree-expander-expanded'	Class using for expander element when it expanded
expanderCollapsedClass:	String	'tbltree-expander-collapsed'	Class using for expander element when it collapsed
count:	Object	AsIs	Define a way to count number and display for row based on children rows. Please see example for more details

2. Methods

Method	Description	Example
showLevel	Show level of tree we want	`$('#table1').tbltree('showLevel', 2)`
expand	Expand row with ID	`$('#table1').tbltree('expand', '1.1')`
collapse	Collapse row with ID	`$('#table1').tbltree('collapse', '1.1')`
isCollapsed	Returns true if row is collpased	`$('#table1').tbltree('isCollapsed', '1.1')`
isExpanded	Returns true if row is expanded	`$('#table1').tbltree('isExpanded', '1.1')`

2. Evenths

Event	Description	Example
create	Triggered when tree creation completed	$('#table1').tbltree({ create: function() { alert('Tree created') } })
expand	Triggered when any row is expanded	$('#table1').tbltree({ expand: function(e, row) { alert(row.attr('row-id')+ " was expadned"); } })
expand	Triggered when any row is collapsed	$('#table1').tbltree({ collapse: function(e, row) { alert(row.attr('row-id')+ " was collapsed"); } })
change	Triggered when any row is collapsed or expanded	$('#table1').tbltree({ change: function(e, data) { alert(data.row.attr('row-id')+ " was "+data.type); } })
showlevel	Triggered when tree level shown (for example from level pickers)	$('#table1').tbltree({ showlevel: function(e, level) { alert('Level '+level+' was shown') } })