HTML Treetable javascript allows creating a components capable of expanding and contracting rows as well as showing multiple columns of data. It can be useful in presenting hierarchical tabular data.
HTML Treetable javascript allows creating a components capable of expanding and contracting rows as well as showing multiple columns of data. It can be useful in presenting hierarchical tabular data.
Let’s look at some examples first:
Example 1 – most basic example
Example 2 – icon that shows expanded / collaped row state is added, as well as some style to table.
Every table row has an id attribute set and the id is assebled of table id, eventual parent rows indexes and current row index in parent row delimitated with underscore (_). If we give id to the table in examples table1, the first row would have id of table1_0, it’s child record would have id of table1_0_0, second row table1_0_1 and so on. Anchor that would expande or collapse specific row would call javascript function treetable_toggleRow(row_id);, where row_id is id of specific row.
Functions treetable_collapseAll(tableId) and treetable_expandAll(tableId) allows all rows in table to be expanded or collapsed.
Callback javascript function that would be called every time row is collapsed or expanded can be defined by setting value of treetable_callbacks['eventRowStateChanged'] to callback function name.
HTML table is meant to be created from server side script. If there is interest for a PHP script that would create HTML code for the table from an array please drop a comment.
Script has been tested on WIN XP with Firefox 1.06, IE6 and Opera 8.
Download the script and examples
13.11.2009:
Mario Estrada made some modifications to script that allows treetable to support saving states.
Download.
To use add:
window.onunload=treetable_saveit
window.onload = treetable_rebuild