jQuery treeTable 2.0
Today I released treeTable, a jQuery JavaScript plugin. This plugin is essentially the same as the ActsAsTreeTable plugin I released just one month ago.
So, why the name change?
Well, I didn't like the ActsAsTreeTable name to begin with. Then why didn't I use treeTable to begin with? That's because there already exists a plugin that is named almost the same (jQTreeTable) and it does almost the same thing as my plugin. It works a bit differently, but it also displays a tree in a table. After a month of thinking I haven't come up with a better name and jQTreeTable doesn't look very much alive at this point, so I have decided that I will just use the name ‘treeTable’.
What's new?
With ActsAsTreeTable being my first jQuery plugin ever, I wanted to do a bit of refactoring to let the plugin benefit from everything I've learned about jQuery during the last month. And I wanted to find out how hard it would be to implement drag & drop with jQuery UI. Other changes are some additional and renamed configuration options and the addition of a minified version of the plugin (less than 4 KB!).
Dragging and dropping
The most notable feature is the addition of the appendBranchTo function, which lets you move an entire branch in the tree by dragging and dropping. The documentation contains an example that shows how to use this method in combination with Draggables and Droppables.
Cubicphuse
Welcome. This is a public diary, used to publish thoughts and findings on subjects that interest ludo.
Re: jQuery treeTable 2.0
how to can i do collapse-all/expand-all ? I want to put two links: Expand-all and Collapse-all.
Thanks
-Jignesh
Re: jQuery treeTable 2.0
I like this very much. I have managed to implement it on my own custom cms. I used to fetch the data from the table where there is a field call “parent” to get each records parent id. And I have written a small php class to read the data and convert the data in to a nested array which will generate an ordered list of nested array which meets the requirement of building the table as you have mentioned. Now that it all function very well, however I am at a point which I got this question. How would I be able to save the row order when using drag and drop. I do have an “order” field in my database table, but before that I believe I should be able to capture each time the file or folder I move to and assign its new parent value in the database as well as its order. Can you please suggest me a good idea.
Re: jQuery treeTable 2.0
Hi there, I have managed to achieve my request to have the drag and drop within the table to be saved in the database with few tricks. However I would really appreciate if you could let me know if it is possible to sort the nested list in the table using drag and drop. I have tried many ways but it seems not working the way I want. For example :
Root -
– Item A
– Child of A – Item B
– Child of A – Item C
I want to drag the item C on top of the item B so that it will be as given below:
– Item A
– Child of A – Item C
– Child of A – Item B
Please let me know how to do this.
Re: jQuery treeTable 2.0
Raf,
It should be possible to achieve what you want by using the code from my drag & drop example. I think it will work if you turn the ‘non-parent’ nodes into droppables by adding an event handler. Then you should be able to append the node that you dropped after (or before) the node on which you dropped. When you have achieved this you should be able to update your database with the new data.
Right now I don’t have time to look into this, but if you want you can send an example of what you currently have to me (info (at) cubicphuse . nl). Perhaps I can point you in the right direction to get it to work.
Re: jQuery treeTable 2.0
if i apply changes on the tree, how can i easily save the new order to a database?
i don’t know where can i retreive the data from…from the id’s of the tags?
Bug in IE 7.
Issue with IE 7,
On FF and Safari it works fine.
On IE the expandable icon is no showing. Appear to be issue with
margin-left: -19px; padding-left: 19px; in IE7.
Please see this link for example http://www.woodranchit.com/casetree/
Please help with the fix.
Bug in IE 7
resolved, by adding position: relative in css
You already have zoom: 1
I added position:relative and it worked
Which row has been clicked?
Ludo,
Great job with jQuery treeTable 2.0!
I am going use it in CMS, but first I need to know something…
Is it possible to know which row has been clicked?
If yes, how to get such info ? (row id, etc.)
simple example would help me a lot.
thanks in advance
Re: jQuery treeTable 2.0
I’m trying to initially expand the rows that have a checkbox checked and not the rows that are not checked. I tried the following:
$(“:checked”).parent().parent().expand();
Also tried $(“:checked”).parent().parent().addClass(“expanded”)
Any suggestions?
Re: jQuery treeTable 2.0
Any word on why the top level nodes don’t display the icon? Someone posted that question on the jquery site
Re: jQuery treeTable 2.0
To get top level icons to display correctly in IE, add the following after the ’.treeTable tr td .expander" declaration in the stylesheet
*:first-child+html .treeTable tr td .expander {position:absolute}