Free Download

Site Search

 

Top Download

Friday, October 5, 2007

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, 0, 0, 8, 9, 8, 8, 0, 0, 14, 14, 14, 0, 18, 0, 0, 21, 22, 22, 22, 0, 0, 27, 27, 27, 30, 31, 31, 0, 0, 0, 0, 37, 37, 0, 0, 41, 41, 41, 44, 41, 46, 41, 41, 41]


Sample : http://www.hanpau.com/jquery/unobtrusivetreetable.php

No comments: