Other Projects
JQTreeTable
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. A minimum of
classes (three all told, with a maximum of two at any one time if
highlighting and striping are enabled) are set on the <tr>
element, so it should not get in the way of any styling that is set.
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 state variable, which sets whether to keep collapsed/expanded state.
Some of the graphics files are courtesy of Jörn Zaefferer's site, which I adapted for my purposes.
The full list of options are on the next tab.
To turn a plain table into a treetable,you just need to include jquery.js, jqtreetable.js and jqtreetable.css, and you then build it like this:
$("tbody_id_or_class").jqTreeTable(map, options);
The arguments are as follows:
map: An array of parents by row number. A child can only have one direct parent, so the row number of that parent is what goes into the array. If you have twenty rows, there would be twenty values. Top level nodes have a parent of 0.
options:
- openImg: Relative url of the image to use for an expanded parent node.
- shutImg: Relative url of the image to use for a collapsed parent node.
- leafImg: Relative url of the image to use for a child node.
- lastOpenImg: Relative url of the image to use for the last expanded parent node. Required if using lines. If not set this to the same as openImg.
- lastShutImg: Relative url of the image to use for the last collapsed parent node. Required if using lines. If not set this to the same as shutImg.
- lastLeafImg: Relative url of the image to use for the last child node. Required if using lines. If not set this to the same as leafImg.
- vertLineImg: Relative url of the image to use for the vertical lines. If not using lines, set this to the same as blankImg.
- blankImg: Relative url of the image to use for the filler that creates the indenting.
- collapse: An
array of parent row numbers whose children are collapsed initially.
Must be an array even if you only want one parent collapsed
- column: A zero based index of the column you want to show the treetable effect in, i.e. first column is 0.
- striped: Boolean indicating whether you want a striped effect. Set the colour in the css with an even class selector.
- highlight: Boolean indicating whether you want a highlighting effect when hovering over the rows. Set the colour in the css with an over class selector.
- state: Boolean indicating whether you want the collapsed state of each parent to be set
in a cookie. Set this to false if there is likely to be a change in the
relationshiop between the child nodes and their parents.
JQuery/PHP Website and Applications Developer, based in Ireland.
Interests: Open Source Software, Supercomputers, Financial Markets, Sport, Science, Sustainable Energy. AGW Skeptic.
Help me build a supercomputer
Page visited 76207 times.
69 Comments
Post New CommentNice script. Like that you can put up two or three of these on the same page. Thanks
a) structure of table
b) structure of corresponding array.
I not a php programmer, so hard for me to understand from PHP code
Your plugin looks great otherwise and I would like to use it.
Not sure how much more I can tell you. Could you expand on what you had in mind for the treetable - what server language you are working in?
Whatever way you generate it, you will end up with a plain html table, no PHP need be involved.
After that, you have to work out which rows will be parents, and which will be children, i.e. which ones will collapse. You might have this relationship mapped in a database - the usual way, or you might have your own way of doing it.
Basically, every parent will have at least one child, and could have more, but every child can only have one direct parent. This is what you need to store in the map array. So the first row will have a parent of 0. If the second and third row are children of the first row, their parent will be 1, and so on until you get to the last row. If you look at the examples, it should become clear as to how it's mapped.
HTH,
Paul.
here is the url http://www.woodranchit.com/newcasetree/
Just looked at it and first thing I noticed is your images don't seem to be loading. Also, what does map1 contain? I'm getting map1 is not defined.
For the page you showed me, try map1 = [0, 1, 1, 0, 4, 5]. That should put Row 1 and Row 4 as top level parents, Row 2 and Row 3 as children of row 1, row 5 as child of row 4 and row 6 as child of row 5.
Paul
screenshot: http://hiphotos.baidu.com/51plan/pic/item/7d85813f6ca74bdf7d1e713b.jpg
This is amazing! I am using it as part of a CMS:
http://www.betterbrief.co.uk/jqtreetable.png
I would, however, really value something which made it a more spangly.
This: [url=http://www.guistalk.com/labo/] uses jquery effects which I would like to use, but don't have the expertise in javascript (at all!) to find where in your code to put effects.
I also had to hack around it a lot to get icons for empty folders displaying, so that's how you could expand it maybe.
Anyway, thanks for a great plugin! Help with slide-down effects (or whatever) would be appreciated!
Josh
Thanks for the comments. The guistalk website uses an unordered list, as against a table which makes it easier to render the effect, and I spent most of the time coding it to be fast rather than trying to slow it down :). I'll have a look into it further soon, but there's a few other things I need to get through first
I'm trying to use this inside an existing (table based) layout and I 'm running into problems:
I created a simple HTML file with the usual
in it and it works beautifully.
However, when I wrap the 'tablemain' table inside another table, like so
then it breaks, I think because somehow the row numbers no longer match the correct rows. Clinking on the topmost collapsible item sets the collapsed CSS class to the first row of the wrapper table, effectively hiding the whole table.
I've tried to look in the .js code, but I'm fairly new to jquery and I'm not sure what the correct fix should be.
Any help would be appreciated! Just some confirmation that this indeed should be fixed and maybe some pointers as to what would be the best way to do it may be enough for me to fix it and I would be more than happy to share my changes back with you for an improved, more robust version.
Remco.
P.S. BTW the submitted date/times of all the comments seem to be broken, they are all at the current time
Let me check this out and I'll get back to you. By the way, it should be wrapped in a tbody with the class/id set on the tbody.
Paul.
I have implemented your tree table, but am having a problem with the 'collapse' option, I have tried setting it to true, and i have also tried adding in an actual array with the nodes I want collapsed (all of them) but for some reason only the first node in my tree actually gets collapsed.
Any thoughts?
Thanks
Richard
I've tried it out wrapped in another table and no problem. Only the rows you want collapsing/expanding should be wrapped by jqTreeTable(). Best way is a tbody, set a class or id on the tbody and call that in your code.
@Richard
Without seeing any code, my guess is that the first node is being set to collapsed, and it is collapsing the whole tree. When you expand it, are the nodes you want collapsed, collapsed? If you use it, you should only use an array. The best advice I can give is try collapsing just one node i.e. collapse: [2]. Also, while debugging make sure the state variable is not set to true and delete any cookies for the treetable.
Paul.
Thank you Paul, I have worked that out and the problem was somewhere in my collapse array.
I have applied your scripts to a much larger table now and because of its size, your scripting takes a lot longer to complete, therefore it looks a little untidy, is there a way to hide the table while it loads and renders?
Many thanks
Richard
Before I start testing your plugin one thing I must know...
Is it possible to add childrens on the fly? I mean is it possible to rebuild treetable from ajax calls/responses during page use?
regards,
Piotr
Glad you sorted it out. In order to hide the table you would need to go into the jQTreeTable code, and edit it directly.
At line 67 just before
for (var x=0,xl=map.length; x<xl;x++){
you'd need to put
$(\"#\" + tid).hide();
and then before the call to stripe(); on line 87, you'd need to put
$(\"#\" + tid).show();
That should work.
@Piotr
It is possible, but each time you update the table, you would need to provide a new map array to reflect the new hierarchy, and then call jQTreetable on the new table again. It should be OK as long as the data set isn't insanely big. If it is, maybe hiding the table as above might help.
Thank you for your code, talking to the development team here we have come up with a different solution as well, if you are interested:
we created a loading Div:
<div id=\"loading\" style=\"position:absolute; left:10; top:10; width:100px;\">
<marquee behavior=\"scroll\" direction=\"left\">* * *</marquee>
</div>
and added into your options another parameter for a function:
var options1 = { onFinishLoading: function() {$(\"#loading\").fadeOut(); $(\"#tableDiv\").fadeIn()}, openImg: \"...
and to utilise this we added on line 108:
if (opts.onFinishLoading) opts.onFinishLoading();
Hope this is of some use to someone else...
Richard
I know I keep wanting to change things, or have things done differently, but I have just one last query.
Your code allows the table to be striped, what happens if i want all the rows in my table grey, with each child a slightly lighter grey.
For example a root row would be a dark grey, every row with just one ancestor would be a ligher grey, and each row with two ancestors would be lighter than that etc...
Any thoughts on how this would be achieved? I have been looking at your javascript and cant work out any way to find out how many ancestors a particular row has.
Thanks in advance
Richard
That sounds like an elegant compromise for large tables.
With regard to your other query, the mapa array will give you what you need.
Basically, when you feed it the initial map of parents to children, this gets parsed into a two dmensional array of children to parents, so any node that is a parent will have a corresponding array (even if it has only one child) of the indexes of its children in the mapa array. So you could then use the length property on that array to find how many children a parent node has. If a node is only a child, it will not have an entry in the mapa array, so you'll need to do an if(mapa[index]) test. if you look at the for loop on line 68 - 74, you'll get an idea how it is constructed. It's tricky in the sense that the mapa array is zero based, but it stores the children as one based. The reason is that zero is reserved for the invisible root, i.e. the parent of the top level parents.
I've encountered a problem when using the plugin.
When nodes of the table are collapsed, a \"tree\" attribute is written into the session. When the same nodes are expanded again, the value of the tree attribute in the session would but set to an empty string. At this point if the browser is refreshed, the empty tree attribute in the session will cause a problem in firefox and google chrome.
Perhaps a check on the tree attribute before using it?
thanks again, the plugin really is a huge help
William
Thanks for the comment. I'll put in a check for an empty cookie, as you suggested.
@Alex,
What problems are you encountering. I'm using it now in Google Chrome with no issues
Yes the page looks good but I would like to see the table and what it looks like.
Easiest thing to do is to download the zip file. That has examples in it, including the php file that generates the map of parents to children. If after that you have any specific questions, I'll do my best to help.
Paul
Can we add new row dynamically through the JavaScript in the JQtreetable.
Regards
Akshaya
Yes, it can be done, but there isn't a way to do that in jQTreeTable yet. You need a way to add it, i.e. a button or a context menu, and then you will need to do an insertBefore or after on the new row, and then rebuild the map to reflect the new hierarchy, and finally, reload the treetable.
Hope you are doing fine.
Please accept my thanks for the suggestions provided by you. I just got busy in some other projects and have to move focus on them.
Paul as per suggested by you I have written a function to add new row but not getting to how to reload the complete treatable without using the post back.i have also succeeded in generating the arrays dynamically form the java script. But when i apply it to the tree table it doesn't remove the formatting but first array. this make all the efforts to zero.
I am just sending u the code what I have written. May be u show some light on this.
<span onclick=\"insertRow('treet1','txtInsertIndex','errorMessage');\">[+]</span>
function insertRow(tblId, txtIndex, txtError)
{
//alert(tblId)
//alert(txtIndex)
//alert(txtError)
var tbl = document.getElementById(tblId);
var rowIndex = txtIndex; //2//document.getElementById(txtIndex).value;
//alert(tbl)
var newRow = tbl.insertRow(rowIndex);
var newCell0 = newRow.insertCell(0);
newCell0.innerHTML = 'yahoo';
var newCell1 = newRow.insertCell(1);
newCell1.innerHTML = 'yahoo';
var newCell2 = newRow.insertCell(2);
newCell2.innerHTML = 'yahoo';
var newCell3 = newRow.insertCell(3);
newCell3.innerHTML = 'yahoo';
var newCell4 = newRow.insertCell(4);
newCell4.innerHTML = 'yahoo';
}
-----------------------------
Thanks & Regards,
Akshaya Kaushik
Hope you are doing fine.
Please accept my thanks for the suggestions provided by you. I just got busy in some other projects and have to move focus on them.
Paul as per suggested by you I have written a function to add new row but not getting to how to reload the complete treatable without using the post back.i have also succeeded in generating the arrays dynamically form the java script. But when i apply it to the tree table it doesn't remove the formatting but first array. this make all the efforts to zero.
I am just sending u the code what I have written. May be u show some light on this.
<span onclick=\"insertRow('treet1','txtInsertIndex','errorMessage');\">[+]</span>
function insertRow(tblId, txtIndex, txtError)
{
//alert(tblId)
//alert(txtIndex)
//alert(txtError)
var tbl = document.getElementById(tblId);
var rowIndex = txtIndex; //2//document.getElementById(txtIndex).value;
//alert(tbl)
var newRow = tbl.insertRow(rowIndex);
var newCell0 = newRow.insertCell(0);
newCell0.innerHTML = 'yahoo';
var newCell1 = newRow.insertCell(1);
newCell1.innerHTML = 'yahoo';
var newCell2 = newRow.insertCell(2);
newCell2.innerHTML = 'yahoo';
var newCell3 = newRow.insertCell(3);
newCell3.innerHTML = 'yahoo';
var newCell4 = newRow.insertCell(4);
newCell4.innerHTML = 'yahoo';
}
-----------------------------
Thanks & Regards,
Akshaya Kaushik
Two questions here:
1.
Is it possible to collapse all node by default when the table loads? The current default will have all the nodes expanded and the option set \"collapse: true\" will only collapse all child node but leaving the top parent expanded. What I need is to have all expandable nodes collapse by default on load.
2.
Is it possible to expand all and collapse all nodes by clicking on links?
Thanks in advance for your help.
Peter
there are two bugs in the plugin, that makes life hard
first:
cget = function(n){var v='',c=' '+document.cookie+';',s=c.indexOf(' '+n+'=');
if (s>=0) {
s+=n.length+2;
v=(c.substring(s,c.indexOf(';',s))).split(\"|\");
}
return v||0;
}
shouldn't heresomething of an array returned? i think so because function value is assigned to collarr which is an array, so this will result in error if push() is called on a string or integer
second:
collarr is set here to a boolean, also no longer an array and then array functions like pus() don't work anymore
there are two bugs in the plugin, that makes life hard
first:
cget = function(n){var v='',c=' '+document.cookie+';',s=c.indexOf(' '+n+'=');
if (s>=0) {
s+=n.length+2;
v=(c.substring(s,c.indexOf(';',s))).split(\"|\");
}
return v||0;
}
shouldn't heresomething of an array returned? i think so because function value is assigned to collarr which is an array, so this will result in error if push() is called on a string or integer
second:
collarr is set here to a boolean, also no longer an array and then array functions like pus() don't work anymore
i noticed another bug, maybe its an improvement.
rendering a hidden treetable with stripping enabled result in a not stripped table, because of the visible selector. also its never a bad idea to add also a odd class like the even one
better is that way:
but the selector shouln't be use the visible selector
last one, thanks for the plugin, i will use it in phpsysinfo in the next release
i can also verify that it works quite well with jQuery 1.3
Many thanks for the feedback. The first two are out and out bugs. The third I'll look into and align with best practices.
It has been my intention to overhaul that code to enable some features. This will encourage me to move it up the list.
have you a version where the first two bugs are fixed? i would really like to use your plugin
thanks
any news about a fixed version? please don't blame me, but i really would like to use your plugin, any other i found are little bit overloaded
regards
this script is very nice! Only one question: how can I have a link or button to expand all or collapse all? Thank you!
Is there any limitation on how large the table can be? I have a few hundred rows and when I attempt to collapse one section of the tree, the page just goes blank. Any thoughts?
Thanks,
is it possible to add extra icon next to the minus / plus ?
I would like to have there favorite icon, and by clicking on it i would set cookies which node was clicked. So later, whn you refresh the tree, only fav. nodes will be displayed...
Thanks
D>
I am having trouble with the state persistance
Not only in my own code but also in the demo on your website (In the first example)
When I collapse all nodes manually hit f5, and then expand the last node.
The result sometimes differs from the state the table was in before I hit refresh
i.e. another node (not the one on row 17) ( mostly the one on row 2 ) is expanded.
I have tested in IE7 and Firefox 3.06
regards, Sebastian
I allready found the problem
it seems that the \"jq.inArray(num, collarr)\" is returning -1 even when \"num\" is present in the Array.
I solved the problem by replacing the inArray function with my own version which is the same exept for
the fact that i use == instead of === ( the latter requires type equality in the array ) it is not very elegant but it works for me..
regards, sebastian
After reading through the material it looked like this would be a snap to put in, but I don't seem to be able to get the table to actually appear as a tree (the table shows up, but that's not exactly what I'm looking for). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to take up the whole page with a huge amount of code, but I'll try to include enough so you can see what I've got. The following statements are inside the head tags of the document.
This is the first bit of the table
and it goes on from there. I was looking for a way to attach a text file of the actual source, but I couldn't do that. I'm learning my way around jquery and the plugin's so maybe I've missed something really obvious. Hopefully someone will see it and be able to point it out.
thanks
steve
After reading through the material it looked like this would be a snap to put in, but I don't seem to be able to get the table to actually appear as a tree (the table shows up, but that's not exactly what I'm looking for). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to take up the whole page with a huge amount of code, but I'll try to include enough so you can see what I've got. The following statements are inside the head tags of the document.
This is the first bit of the table
and it goes on from there. I was looking for a way to attach a text file of the actual source, but I couldn't do that. I'm learning my way around jquery and the plugin's so maybe I've missed something really obvious. Hopefully someone will see it and be able to point it out.
thanks
steve
After reading through the material it looked like this would be a snap to put in, but I don't seem to be able to get the table to actually appear as a tree (the table shows up, but that's not exactly what I'm looking for). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to take up the whole page with a huge amount of code, but I'll try to include enough so you can see what I've got. The following statements are inside the head tags of the document.
This is the first bit of the table
[code]
<table class=\"dashboard\" id=\"overView\">
<tbody
After reading through the material it looked like this would be a snap to put in, but I don't seem to be able to get the table to actually appear as a tree (the table shows up, but that's not exactly what I'm looking for). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to take up the whole page with a huge amount of code, but I'll try to include enough so you can see what I've got. The following statements are inside the head tags of the document.
This is the first bit of the table
[code]
<table class=\"dashboard\" id=\"overView\">
<tbody
After reading through the material it looked like this would be a snap to put in, but I don't seem to be able to get the table to actually appear as a tree (the table shows up, but that's not exactly what I'm looking for). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to take up the whole page with a huge amount of code, but I'll try to include enough so you can see what I've got. The following statements are inside the head tags of the document.
This is the first bit of the table
[code]
<table class=\"dashboard\" id=\"overView\">
<tbody
After reading through the material it looked like this would be a snap to put in, but I don't seem to be able to get the table to actually appear as a tree (the table shows up, but that's not exactly what I'm looking for). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to take up the whole page with a huge amount of code, but I'll try to include enough so you can see what I've got. The following statements are inside the head tags of the document.
This is the first bit of the table
[code]
<table class=\"dashboard\" id=\"overView\">
<tbody
After reading through the material it looked like this would be a snap to put in, but I don't seem to be able to get the table to actually appear as a tree (the table shows up, but that's not exactly what I'm looking for). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to take up the whole page with a huge amount of code, but I'll try to include enough so you can see what I've got. The following statements are inside the head tags of the document.
This is the first bit of the table
[code]
<table class=\"dashboard\" id=\"overView\">
<tbody
After reading through the material it looked like this would be a snap to put in, but I don't seem to be able to get the table to actually appear as a tree (the table shows up, but that's not exactly what I'm looking for). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to take up the whole page with a huge amount of code, but I'll try to include enough so you can see what I've got. The following statements are inside the head tags of the document.
This is the first bit of the table
[code]
<table class=\"dashboard\" id=\"overView\">
<tbody
After reading through the material it looked like this would be a snap to put in, but I don't seem to be able to get the table to actually appear as a tree (the table shows up, but that's not exactly what I'm looking for). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to take up the whole page with a huge amount of code, but I'll try to include enough so you can see what I've got. The following statements are inside the head tags of the document.
This is the first bit of the table
[code]
<table class=\"dashboard\" id=\"overView\">
<tbody
After reading through the material it looked like this would be a snap to put in, but I don't seem to be able to get the table to actually appear as a tree (the table shows up, but that's not exactly what I'm looking for). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to take up the whole page with a huge amount of code, but I'll try to include enough so you can see what I've got. The following statements are inside the head tags of the document.
This is the first bit of the table
[code]
<table class=\"dashboard\" id=\"overView\">
<tbody
Well I'm an idiot. I just saw that I managed to garbage up the page with a bunch of duplicate posts and to top it off I managed to chop the post in half so you can't even see all the information. I hope you can easily clean that up. I'll try this one more time without making a bunch of extra posts.
I don't seem to be able to get the table to actually appear as a tree (the table shows up, but as a plain table, not a tree). I've got jquery 1.3.2, jquery UI 1.7.2, and treeTable 2.2.3. I don't want to add the code from the whole page, so hopefully this is enough of the code.
Any suggestions on why I'm not getting the table. I thought I followed the directions for putting this in place and using it, but I'm obviously missing somthing.
thanks
steve
such a nice plugin
but a slight bug: the tree table won't work after an alert in fire fox.
I found this bug by clicking your link in the 2nd table in your demo.
but a slight bug: the tree table won't work after an alert in fire fox.
I found this bug by clicking your link in the 2nd table in your demo.
but a slight bug: the tree table won't work after an alert in fire fox.
I found this bug by clicking your link in the 2nd table in your demo.
but a slight bug: the tree table won't work after an alert in fire fox.
I found this bug by clicking your link in the 2nd table in your demo.
but a slight bug: the tree table won't work after an alert in fire fox.
I found this bug by clicking your link in the 2nd table in your demo.
but a slight bug: the tree table won't work after an alert in fire fox.
I found this bug by clicking your link in the 2nd table in your demo.
but a slight bug: the tree table won't work after an alert in fire fox.
I found this bug by clicking your link in the 2nd table in your demo.
but a slight bug: the tree table won't work after an alert in fire fox.
I found this bug by clicking your link in the 2nd table in your demo.
but a slight bug: the tree table won't work after an alert in fire fox.
I found this bug by clicking your link in the 2nd table in your demo.
but a slight bug: the tree table won't work after an alert in fire fox.
I found this bug by clicking your link in the 2nd table in your demo.