@Deepak: Thanks! Actually I figured that out by now – I’m just moving the background-position instead of changing it to a different one. You’re welcome to give the latest revision a try – or 1.4 is that is released by then.

change this to

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-image: none; }

This will work in all browser

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-image: url(../../images/enterprise/spacer.gif); }

I’ll look deeply on that.

@Mike: Animations and persistence are currently not supported for async trees. I yet have to figure out how to implement them properly. Any help is welcome.

I see a strange rendering bug under firefox2 and i am wondering if the lack of closing div tag at line 82 could be the problem:

this.prepend(“”)…

*where* the hell should be the inserted ?

tried some places, but no success.

Anyway, thanks for this great piece of code !

@Chupa: You could try to add a hover handler that triggers a click event on those div.hitarea elements. That avoids modifying the treeview plugin code.

@fred: The latest revision, soon to be released as 1.4 contains an addon, jquery.treeview.async.js. There is also a demo available. I recommend taking a look at that and let me know how close it is to what you need. If it isn’t what you need, it may help as a reference on how to extend the plugin without modifying its source. In any case you should give the 1.4pre a try.

@John: Changing from “ul” to “ul, ol” would require a lot of code changed. Even if that is provided as an option it gets rather ugly. I’ll try to find an acceptable solution.

The closed folder icon is a nice idea. The icon would be handy.

@NickeL: There are two examples for large trees in the latest revision (coming soon as 1.4). One with the usual render approach, and another one with a prerendered tree. When the prerendered option is used, the plugin assumes that all the additional classes and hitarea elements are already rendered on the serverside, and only the event handlers are added, which should be much faster for large trees. Of course it requires more work on the serverside, eg. the persist option has to reimplemented on the serverside.

@Otto Wyss: The upcoming 1.4 release uses only two images for the tree lines and icons. That makes it much easier to customize them, eg. remove the lines. You can already give the latest revision a try.

The tree control is currently very limited in functionality. That is due to lack of actual requirements, so I aimed for the simplest version and wait until someone provides other usecases – like yours. Though in this case you could just wrap the images with the anchors needed by the treecontrol. Let me know if that works.

@Mike Sidorov: Thats a good suggestion, thanks. I’ve added that.

Great thing, makes UI coding really simple, thanks.

Only a short request: make async trees with classes:

if you have static one, you can define class for span (folder of file for filetree), but not in asunc.

The solution – to add something like current.children('span').addClass(this.type || null);
in createNode function (where “type” is the class field for node).

Best regards, Mike S.


<img src="images/expand_all.png" onclick="javascript: ... >
<img src="images/collape_all.png" onclick="javascript: ... >
<img src="images/toggle_all.png" onclick="javascript: ... >


What do I have to write at “…”?

O. Wyss

Where are the options documented?

O. Wyss