jquery ActsAsTreeTable plugin: turn a table into a tree
by Jack K
This jQuery plugin lets you turn a table of data into an expandable/collapsible tree, allowing you to have a tree that has multiple columns of data:
http://ludo.cubicphuse.nl/jquery-plugins/acts_as_tree_table/doc/index.html
The examples show a typical use case scenario for something like a file browser. We're using it for an expand/collapse tree for an ajax-oriented product editor, where the tree table shows a hierarchy of products and categories and the user expands the tree to get to the levels/products that they want to work with.
By using a multi-column tree, the user gets a nice little subset of info for each product (SKU, amount available, etc) to help them decide whether to click on it and go into full edit mode (in another div on the screen) for the product.
Getting the CSS right is a little quirky: the expand/collapse icons keep wanting to appear outside the table, but we'll figure it out. There's a table row id/class naming convention that has to be adhered to so that the data knows parent/child relationships, which makes sense.
UPDATE 11/24: There's a new version of this plugin available:
http://blog.cubicphuse.nl/2008/11/12/jquery-treetable-2-0. This version adds options for drag and drop and gives the plugin a new name: jQuery treeTable 2.0.
11/12/08 10:31:16 pm, 