ActsAsTreeTable: a jQuery Plugin
NOTE: ActsAsTreeTable has been renamed to treeTable. Please read jQuery treeTable 2.0 to see what has changed.
Lately, I have started doing more and more with JavaScript. I've developed some useful snippets that I use in a new project that I am currently working on. One of these snippets is something that I have been looking for since a long time: a good way of displaying a collapsable tree in a table. If you don't understand what I mean then you should open your favorite file explorer in your operating system. Almost all of these applications have a way of displaying a directory structure in a tabular format. The leftmost column commonly shows a tree of your directories with several columns on the right containing additional information on your files and folders, and each directory can be expanded/collapsed. This is what I wanted to display in a web browser, using a table.
After jotting down the structure and design on a piece of paper I downloaded the latest version of jQuery, read some documentation on authoring plugins and started coding. And now, twenty-four hours later, this is the result:
My very first jQuery plugin! ActsAsTreeTable allows you to turn a column in your table into a tree. The plugin has been made as unobtrusively as possible and I have posted it to the jQuery plugin index as ActsAsTreeTable 1.0. To make it as easy as possible to start using the plugin I have also written some documentation. You will also find several examples in this documentation.
NOTE: ActsAsTreeTable has been renamed to treeTable. Please read jQuery treeTable 2.0 to see what has changed.
Cubicphuse
Welcome. This is a public diary, used to publish thoughts and findings on subjects that interest ludo.
Re: ActsAsTreeTable: a jQuery Plugin
Hi,
Nice work! This could be just what I’m looking for. I’m in the process of writing a CMS and part of this is an integrated file manager/link selector. Plus I’m extending the browser dialog in FCKEditor. I notice you’ve done a file browser example. How hard would it be to add a selection and event for the tree item?
Also, any objections to putting this in the CMS?
Cheers
Graham
Re: ActsAsTreeTable: a jQuery Plugin
Thank you for your comment. I’ve put it up here for others to use in their applications, so feel free to use it in your CMS.
My intention with this plugin was to make it responsible for displaying the tree, and not bother about what else I want to do with the data. So any event handling is handled by separate code. But it should not be too hard to add this functionality in the plugin itself. Depending on what you want to do, the best place to start with this is probably the
$.fn.acts_as_tree_tablefunction. Feel free to contact me if you need any help with this plugin.Also, please note that the current release (1.0) in the jQuery plugin index has some trouble in IE7. This has been resolved in the source repository and I will upload a new release with these fixes to the jQuery plugin index shortly.
Re: ActsAsTreeTable: a jQuery Plugin
Update: ActsAsTreeTable 1.1 was released a few days ago, with better support for IE7.
Re: ActsAsTreeTable: a jQuery Plugin
Hi,
Cool script. I made a few modifications to suit my needs a bit better.
Here’s a patch if you think these features are useful too:
http://pastebin.osuosl.org/22443
Re: ActsAsTreeTable: a jQuery Plugin
Peter, your changes seem like a good extension so I will merge them into the plugin. The only problem I see with your changes is that jQuery already exposes a
togglefunction, so I would suggest renaming it totoggleBranch.I’ll look into it this weekend and see if I can release a new version with your changes.
Re: ActsAsTreeTable: a jQuery Plugin
excellent plugin – How hard would it be to optionally tally the contents of certain columns?
So in your example you have a folder with an empty value for KB – what’d be really cool is if it tallied the children’s values eg:
not
parent —
+ child1 20kb
+ child2 20kb
+ child3 20kb
but
parent 60kb
+ child1 20kb
+ child2 20kb
+ child3 20kb
this’d be brilliant!
Also not sure if this can become drag and droppable? (a demo of this would be awesome!) – as the above poster says it really opens the doors for use in things like CMSes…
great work – look forward to seeing how this develops!
Re: ActsAsTreeTable: a jQuery Plugin
Tallying these values shouldn’t be too hard, but I do not think it should be part of the plugin. This should be done in the code that generates your tree.
Drag & drop shouldn’t be a problem too. I will create an example that does this when I got time, since I need this myself too :-)
Re: ActsAsTreeTable: a jQuery Plugin
hi there!
I am looking for a way to start up a tree alreay collapsed, we are looking for some information on how to do it and the coding. Should I change de default (putting a code on it) or a code on the start up screen, what would this code be in this case?
If anyone knows, please let me know.
Thanks
Re: ActsAsTreeTable: a jQuery Plugin
re: Eduardo
$(“#foo”).acts_as_tree_table({
default_state: ‘collapsed’
});
enjoy!