Board Logo

open page with root nodes collapsed
breakthrufish - 3/20/2005 at 12:09 PM

Hi all:

I'm busily looking though various js options for a tree of about 2000 nodes with rather long urls and names.

I have to say that Tigra seems to handle this size best of all so far, but I have come across one issue I can't seem to resolve:

Exactly how does one open a page (with thousands of nodes in my case) with the root nodes collapsed?

Of course, to work effectively it means having those little + signs to the left of the root node icon to give users something to click on so they can expand that node.

One post in the forums had addressed the problem, by adding this in, somewhere, but it didn't seem to work for me (probably because I don't really know quite what to do with it):

function expand_all () {
for (var i = 1; i < trees[0].a_index.length; i++) {
var o_item = trees[0].a_index[i];
if (!o_item.b_opened);
function collapse_all () {
for (var i = 1; i < trees[0].a_index.length; i++) {
var o_item = trees[0].a_index[i];
if (o_item.b_opened);

Is this option only a PRO possibility, by any chance?

There is a workaround - to have a single top-level root node, thereby shifting all child nodes down by one level in the heirarchy. Something more elegant would be nicer, if possible.

Thanks in advance.

rock - 3/21/2005 at 08:35 AM

Within function tree (tree.js) comment one line:

function tree (a_items, a_template) {
for (var i = 0; i < this.a_children.length; i++) {
//;//comment the line to have all roots closed.

breakthrufish - 3/22/2005 at 10:53 AM

Thanks for the advice.

Did I say i was impressed with the speed?

APSeabrook - 11/10/2005 at 06:18 AM

Rock, I want to be able to do the same thing but in PRO. Can you explain the technique there? The page needs to load with the tree collapsed.



rock - 11/10/2005 at 08:14 AM

Use 'st':0 key-value pair in the root items scope settings.

APSeabrook - 11/11/2005 at 12:05 AM

Many Thanks!

APSeabrook - 11/23/2005 at 02:21 AM


Is it possible to associate the expand/collapse to a single click? at the moment the st event is triggered by a double click.

rock - 11/23/2005 at 04:32 PM

For PRO version see product documentation section 'Node open on single click'
User solution for free version

stevadbran - 4/8/2006 at 07:49 PM

Commenting out the call to; collapses all of the nodes for me. However, the user may not be aware that there is a tree underneath the icons. How can it default to collapsed and have the [+] symbols at the root nodes?


jennih - 4/22/2006 at 11:09 AM

I needed the same this for a VLE I'm designing for a school (want each section as a different tree for managability) so I just had a hack at the code and came up with his.

Be warned though this is a major league cludge and I take no responsibility if it falls on it's face! :)

Ok, so you know there are a few alterations in here.

1) Changable target for each item.

I do this by cheating and removing the quotes, this allows you to just type the target in the URL section. However there are two things to watch for. One is that it no longer responds to the target entry in tree_tpl, and secondly without quotes it really doesn't like urls with spaces or weird characters.

2) Collapsed base node. There is a new parameter to turn this on and off (just a true false switch on the new tree command) . Set it to false and you collapse to the root node.

3) Leading spaces. Another parameter on the new tree line, it adds leading spaces to the tree to pad it out from the left, set it to 0 to have no padding.

4) plus/minus symbols on the root node. again this is a parameter on the new tree line. true for on, false for off. This is a big cludge and the path to the plus + minus symbols are hard coded into tree.js so you'll have to change where they point. There is definately a more elegant way to do it, but this isn't bad for 3 hours playing this afternoon.

A new tree line now looks like this:

new tree (TREE_EXT2, TREE_STD, false,1,false);

Hope this helps.


jennih - 4/23/2006 at 08:45 AM

Quick Update:

Just spend a few minutes tidying the code a little.

Changes are:

1) works with default target again if you don't enter one

2) extra parameters are now optional and set themsevelf to the standard usage if left out.

3) Also, all the parameters are false for "don't use" (originally the openbase parameter was false for use) this means ['fred','fred.html',false,0,false] or just ['fred','fred.html'] is all extras off.

4) The path for the cludged icons is now on a variable. Either set it at the top of tree.js or take it our and set it in each html doc if you want (handy for multi layer web sites).

The upshot of all this is if you use this tree.js without putting in any of the extra settings, it will work as if it is unaltered. So it's still a cludge, but now it's a compatable cludge. :)

Oh, lastly, I hid the links in the status bar as described in

Hope that helps.


EDIT: Noticed two bugs that are now fixed, and if you are using the standard plus and minus gifs you'll get dotted lines going the wrong way. Simple fix is to make a new gif and point to it. (I'm using the lay out without lines so didn't notice)

Back to forum: