jQuery plugin: Treeview
Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements. Supports both location and cookie based persistence.
Current version: 1.4
Compressed filesize: 3390 bytes
License: MIT/GPL
Tested in: Firefox 2, IE 6 & 7, Opera 9, Safari 3
Files:
Download
Changelog
Demos
Documentation
Dependencies
Required
Support
- Please post questions to the jQuery discussion list, putting (treeview) into the subject of your post, making it easier to spot it and respond quickly. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
- Please post bug reports and other contributions (enhancements, features) to the plugins.jQuery.com bug tracker
@Luke: Thanks, I’ve implemented your suggestions. Should be included in 1.4.
@Joe: Could you post a testpage? This may also help.
@Duncan: Could you explain that?
@Joe (another one): Your setup is way to complex. Try to simplify it by applying the treeview in a callback to the load call. Basically just this:
That way it should be much easier to spot the error, if it hasn’t gone away already.
@Gagi: Yeah, thats true. Prerendering is explicitly for rendering the tree on the serverside, so in that case you have to check the cookie on the server and render the tree accordingly. Or avoid using the combination of persist and prerendered. Anyway, its by design and not a bug.
I have a treetable component from webgalileo. When expanding in safari 2.0.4 it crashes the browser. Need help.
Hello!
I want to my list expanding on hover event. How can i do this?
Where change code?
P.S.: Sorry for English.
hi,
thanks for a great plugin that worked right out of the box. my requirements need to dynamically expand the nodes of the treeview using AJAX. i would like to be able to register a listener for the click event and have it build the additional node info when the node is expanded. i would also like to register a listener for the hover event so that i can display additional information about the node in a tooltip.
i have hacked the plugin code and added a call to my function at the end of the toggler to get at the click event but i would appreciate a cleaner way to pass the handler functions in as parameters when the treeview is initialized.
thanks
Hi,
great plugin. I was wondering if it is possible to persist the status of a tree from page to page.
I know it is possible to presist the state on the same page with “persist: cookie”, but I’m using the tree as a navigation and as soon as I jump to the next page, hte status from the page befor is lost. It seems to me, that the cookie is page-related, so every page has it’s own page status.
michael
@jorn: i tried doing the callback function, but no dice
@fred – want to share what you’ve done? We’d love to see
Hi,
Could you change your selectors from just “ul” to “ul,ol”? Some folks I work with do insist on using ordered lists…
I also added a closed folder and changed the css too
.filetree li.collapsable span.folder { background: url(../images/folder-open.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(../images/folder-closed.gif) 0 0 no-repeat; }
which gives a nice bit of extra feedback. I can send you the folder-closed.gif if you like, but it’s nothing special.
Thanks for taking the time to write this, looking forward to you next release
J.
Before i try this one out (it look remarkably good!) i wonder if anyone has experience with a higher number of nodes, 800-1000?
Will this slow down performance a lot? Today i use TigraTreeMenu PRO but really like to move
Regards
Is it possible to use treeview without lines, just the plus/minus icon? How?
Where are the options documented?
O. Wyss
In sample 3 there’s a treecontroll header with links to “Collapse All”, “Expand All”, “Toggle All”. Is it possible to access these functions via a button or clickable image, e.g.
<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
Hi there!
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.
@kanvin: I can’t provide support for other’s tree components. If you need support for this one, a testpage helps a lot.
@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.
Hi,
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 !
One more thing about async trees – the A links, leading to current URL are not marked with “selected” class. And I didn’t figure, how to add it (manual adding after tree is ready doesn’t work).
@babar: Your example code didn’t quite make it through the comment system. Could you post it again or drop me a mail? Thanks.
@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 figured 2 ways of solving this problem:
1. to apply classes AFTER tree was calculated (but it will make apllying twice – 1st when node is added: hidden/shown, 2nd – ater all).
2. to apply classes while adding nodes (so, when we load another node, we apply classes for SPANs and As, then add them to tree).
I’ll look deeply on that.
To fix the bug of IE 7 (not working properly collapse and expand)
Just a minor change in jquery.treeview.css
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); }
@Mike: Okay, let me know what you come up with.
@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.
Comments here are now closed.