jQuery Treetable
Take a plain html table, wrap the rows you want collapsing/expanding
in a tbody with an id of treetable, map each row to it's parent row,
set some options, and let jQTreeTable take it from there.
By wrapping it in a tbody, it means you can have other rows within
the same table not part of the tree, and it also means that if
javascript is disabled, users still get the plain table.
You can set which column takes the treeview effect, and you can
also set which parents are collapsed initially. To do this, it must be
done with an array, even if there is only one node you want collapsed.
A highlight option can be set so that rows change colour as they
are hovered over. There is dynamic striping of the rows, and there is
also a custom onselect event which fires on the table cells, that can
be handled with a callback function (watch the status bar when you
click on a cell). Links within the cells still work as expected.
I took the graphics files from Jörn Zaefferer's site, and adapted them for my purposes. I hope he doesn't mind.
Sorry I've nowhere to put comments as yet, but I will be keeping a
close eye on the jquery-en list, so any feedback/bug finds would be
appreciated.
By the way, if you use the script off this page, make sure to
remove the part of the script written for this page (just one line).
Alternatively, you can download the zipped file here. It includes this php page with it's random treetable generator.
var options = {openImg: "tv-collapsable.gif", shutImg:
"tv-expandable.gif", leafImg: "tv-item.gif", lastOpenImg:
"tv-collapsable-last.gif", lastShutImg: "tv-expandable-last.gif",
lastLeafImg: "tv-item-last.gif", vertLineImg: "vertline.gif", blankImg:
"blank.gif", collapse: false, column: 1, striped: true, highlight:
true, onselect: function(target){window.status = "You clicked
"+target.html();}};
Map Array for the table below is :
[0, 0,
0, 0, 0, 5, 5, 5, 5, 0, 0, 11, 12, 12, 0, 0, 0, 0, 18, 19, 0, 0, 22,
23, 24, 24, 24, 22, 28, 28, 30, 28, 32, 33, 28, 0, 36, 37, 37, 39, 40,
41, 41, 40, 37, 45, 46, 45, 48, 45]
| Row No | Description | Path to Row | Level | Status |
|---|
| Row No | Description | Path to Row | Level | Status |
|---|
| 1 |  Child of 0(Root) | [0, 1] | 1 | [Child] |
| 2 | Child of 0 | [0, 2] | 1 | [Child] |
| 3 | Child of 0 | [0, 3] | 1 | [Child] |
| 4 | Child of 0 | [0, 4] | 1 | [Child] |
| 5 |  Child of 0 | [0, 5] | 1 | [6,7,8,9] |
| 6 |  Child of 5 | [0, 5, 6] | 2 | [Child] |
| 7 | Child of 5 | [0, 5, 7] | 2 | [Child] |
| 8 | Child of 5 | [0, 5, 8] | 2 | [Child] |
| 9 |  Child of 5 | [0, 5, 9] | 2 | [Child] |
| 10 | Child of 0 | [0, 10] | 1 | [Child] |
| 11 | Child of 0 | [0, 11] | 1 | [12] |
| 12 |  Child of 11 | [0, 11, 12] | 2 | [13,14] |
| 13 |  Child of 12 | [0, 11, 12, 13] | 3 | [Child] |
| 14 | Child of 12 | [0, 11, 12, 14] | 3 | [Child] |
| 15 | Child of 0 | [0, 15] | 1 | [Child] |
| 16 | Child of 0 | [0, 16] | 1 | [Child] |
| 17 | Child of 0 | [0, 17] | 1 | [Child] |
| 18 | Child of 0 | [0, 18] | 1 | [19] |
| 19 |  Child of 18 | [0, 18, 19] | 2 | [20] |
| 20 | Child of 19 | [0, 18, 19, 20] | 3 | [Child] |
| 21 | Child of 0 | [0, 21] | 1 | [Child] |
| 22 | Child of 0 | [0, 22] | 1 | [23,28] |
| 23 | Child of 22 | [0, 22, 23] | 2 | [24] |
| 24 | Child of 23 | [0, 22, 23, 24] | 3 | [25,26,27] |
| 25 | Child of 24 | [0, 22, 23, 24, 25] | 4 | [Child] |
| 26 | Child of 24 | [0, 22, 23, 24, 26] | 4 | [Child] |
| 27 | Child of 24 | [0, 22, 23, 24, 27] | 4 | [Child] |
| 28 | Child of 22 | [0, 22, 28] | 2 | [29,30,32,35] |
| 29 | Child of 28 | [0, 22, 28, 29] | 3 | [Child] |
| 30 | Child of 28 | [0, 22, 28, 30] | 3 | [31] |
| 31 | Child of 30 | [0, 22, 28, 30, 31] | 4 | [Child] |
| 32 | Child of 28 | [0, 22, 28, 32] | 3 | [33] |
| 33 | Child of 32 | [0, 22, 28, 32, 33] | 4 | [34] |
| 34 | Child of 33 | [0, 22, 28, 32, 33, 34] | 5 | [Child] |
| 35 | Child of 28 | [0, 22, 28, 35] | 3 | [Child] |
| 36 | Child of 0 | [0, 36] | 1 | [37] |
| 37 | Child of 36 | [0, 36, 37] | 2 | [38,39,45] |
| 38 | Child of 37 | [0, 36, 37, 38] | 3 | [Child] |
| 39 | Child of 37 | [0, 36, 37, 39] | 3 | [40] |
| 40 | Child of 39 | [0, 36, 37, 39, 40] | 4 | [41,44] |
| 41 | Child of 40 | [0, 36, 37, 39, 40, 41] | 5 | [42,43] |
| 42 | Child of 41 | [0, 36, 37, 39, 40, 41, 42] | 6 | [Child] |
| 43 | Child of 41 | [0, 36, 37, 39, 40, 41, 43] | 6 | [Child] |
| 44 | Child of 40 | [0, 36, 37, 39, 40, 44] | 5 | [Child] |
| 45 | Child of 37 | [0, 36, 37, 45] | 3 | [46,48,50] |
| 46 | Child of 45 | [0, 36, 37, 45, 46] | 4 | [47] |
| 47 | Child of 46 | [0, 36, 37, 45, 46, 47] | 5 | [Child] |
| 48 | Child of 45 | [0, 36, 37, 45, 48] | 4 | [49] |
| 49 | Child of 48 | [0, 36, 37, 45, 48, 49] | 5 | [Child] |
| 50 | Child of 45 | [0, 36, 37, 45, 50] | 4 | [Child] |
| Random | data | outside | treetable | tbody |
Featured on:-