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, 1, 2, 2, 2, 2, 6, 1, 8, 9, 0, 0, 12, 0, 14, 15, 15, 0, 0, 19, 0, 21, 22, 22, 24, 0, 0, 0, 0, 0, 0, 0, 32, 33, 34, 33, 33, 37, 38, 33, 33, 41, 41, 33, 0, 0, 46, 46, 46, 49]
| Row No | Description | Path to Row | Level | Status |
|---|---|---|---|---|
| Row No | Description | Path to Row | Level | Status |
| 1 | Child of 0(Root) | [0, 1] | 1 | |
| 2 | Child of 1 | [0, 1, 2] | 2 | |
| 3 | Child of 2 | [0, 1, 2, 3] | 3 | |
| 4 | Child of 2 | [0, 1, 2, 4] | 3 | |
| 5 | Child of 2 | [0, 1, 2, 5] | 3 | |
| 6 | Child of 2 | [0, 1, 2, 6] | 3 | |
| 7 | Child of 6 | [0, 1, 2, 6, 7] | 4 | |
| 8 | Child of 1 | [0, 1, 8] | 2 | |
| 9 | Child of 8 | [0, 1, 8, 9] | 3 | |
| 10 | Child of 9 | [0, 1, 8, 9, 10] | 4 | |
| 11 | Child of 0 | [0, 11] | 1 | |
| 12 | Child of 0 | [0, 12] | 1 | |
| 13 | Child of 12 | [0, 12, 13] | 2 | |
| 14 | Child of 0 | [0, 14] | 1 | |
| 15 | Child of 14 | [0, 14, 15] | 2 | |
| 16 | Child of 15 | [0, 14, 15, 16] | 3 | |
| 17 | Child of 15 | [0, 14, 15, 17] | 3 | |
| 18 | Child of 0 | [0, 18] | 1 | |
| 19 | Child of 0 | [0, 19] | 1 | |
| 20 | Child of 19 | [0, 19, 20] | 2 | |
| 21 | Child of 0 | [0, 21] | 1 | |
| 22 | Child of 21 | [0, 21, 22] | 2 | |
| 23 | Child of 22 | [0, 21, 22, 23] | 3 | |
| 24 | Child of 22 | [0, 21, 22, 24] | 3 | |
| 25 | Child of 24 | [0, 21, 22, 24, 25] | 4 | |
| 26 | Child of 0 | [0, 26] | 1 | |
| 27 | Child of 0 | [0, 27] | 1 | |
| 28 | Child of 0 | [0, 28] | 1 | |
| 29 | Child of 0 | [0, 29] | 1 | |
| 30 | Child of 0 | [0, 30] | 1 | |
| 31 | Child of 0 | [0, 31] | 1 | |
| 32 | Child of 0 | [0, 32] | 1 | |
| 33 | Child of 32 | [0, 32, 33] | 2 | |
| 34 | Child of 33 | [0, 32, 33, 34] | 3 | |
| 35 | Child of 34 | [0, 32, 33, 34, 35] | 4 | |
| 36 | Child of 33 | [0, 32, 33, 36] | 3 | |
| 37 | Child of 33 | [0, 32, 33, 37] | 3 | |
| 38 | Child of 37 | [0, 32, 33, 37, 38] | 4 | |
| 39 | Child of 38 | [0, 32, 33, 37, 38, 39] | 5 | |
| 40 | Child of 33 | [0, 32, 33, 40] | 3 | |
| 41 | Child of 33 | [0, 32, 33, 41] | 3 | |
| 42 | Child of 41 | [0, 32, 33, 41, 42] | 4 | |
| 43 | Child of 41 | [0, 32, 33, 41, 43] | 4 | |
| 44 | Child of 33 | [0, 32, 33, 44] | 3 | |
| 45 | Child of 0 | [0, 45] | 1 | |
| 46 | Child of 0 | [0, 46] | 1 | |
| 47 | Child of 46 | [0, 46, 47] | 2 | |
| 48 | Child of 46 | [0, 46, 48] | 2 | |
| 49 | Child of 46 | [0, 46, 49] | 2 | |
| 50 | Child of 49 | [0, 46, 49, 50] | 3 | |
| Random | data | outside | treetable | tbody |
Featured on:-