jQuery plugin: Treeview

Lightwof an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements. Supports both location and cookie based persistence.

Note as of April 2010: While the plugin still works as it is, it has some shortcomings, and not maintained anymore. There are now plenty of alternative jQuery tree plugins, like jsTree. Eventually there will be successor as part of jQuery UI.

Note October 2010: Despite the above, I’ve moved the plugin to GitHub, fixed a bug when combining persist: “location” and prerendered: true, and released (tagged in Git) 1.4.1.

Current version: 1.4.1
License: MIT/GPL

Files:

Download
Changelog
Demos
Documentation
GitHub Repository

Dependencies

Required

Support

  • Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “treeview”. 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.

Donate

$ USDDonate€ EURDonate


No more comments.
  1. 31. January 2007 |22:20

    HI there!!

    first of all thanks for the great job of upgrading treeview – im using it together with jtab – which was not possible before!
    I’m relatively new to jquery – i’m trying to use the tree view within a typical two-columns css layout – but i cant understand how to properly set up the $(…) elements..

    so I want to apply the effect only within the

    i tried with

    
    	$(document).ready(function(){
            $(div.content_left_navigation > ul).Treeview({ speed: "fast", collapsed: true, control: "#treecontrol" });
    	});
    

    but it doesnt work!!!
    where is the mistake?

    many thanks indeed

  2. 1. February 2007 |17:18

    Hi Mikele,

    could you post a link to an example page I could look at it?

  3. 9. February 2007 |08:03

    There seems to be a problem in IE 7, the Lists do not collapse when you click on a node.

    greets

  4. 12. February 2007 |16:29

    Hi Jorn, thanks for the interest – i’ve put a dump of the lisp-generated code I’m producing at http://kmi.open.ac.uk/people/mikele/offsite/example-jquery/lisp-output-sample.html

    As you can see, it works fine. It’s just not clear to me how the $(div… ) syntax should be used… you know, for further modifications of the layout!

  5. pingback

    [...] Following suggestions which turned out to be really good, I’ve found myself having a lot of fun with the JQuery library. It’s immensely easy to use, and beautiful to see its results. Plenty of tutorials around, and people developing widgets. Have a look at the interface elements, for example. Or at the cool fisheye menu..lately I’ve been experimenting with the handy TreeView. [...]

  6. brent
    12. February 2007 |17:08

    hi jorn, very nice! i thought i was going to have to resort to YUI for this.
    do you have an example of dynamically adding nodes to the tree?
    i’m sure it’s possible, but i’d like to be able to do it without redrawing the entire tree each time… is that do-able?
    thanks,
    -brent

  7. 12. February 2007 |19:28

    @Mikele:

    The treeview plugin adds the “treeview” class to the UL element itself. You could as well just add it in the markup and select the UL element via that class, eg. “ul.treeview”. By using a different selector you can very easily apply different styles for the js-disabled ul.

    @brent:

    Haven’t investigated that yet. It should be doable without too much trouble. I need to upload a new version anyway for the IE7 bug that alex mentioned.

  8. pingback

    [...] Un clásico entre los clásicos, la presentación de listas anidadas en forma de árbol desplegable, ya tiene un buen representante escrito con y para jQuery.jQuery plugin: Treeview, una criatura de Jörn Zaefferer. [...]

  9. Andres Barreto
    10. March 2007 |21:05

    Very nice and usable plugin. I wonder if you plan to include an option to make the tree ‘remember’ the previous open/close status for each branch on page re-loads.
    Andres

  10. 11. March 2007 |00:29

    @Andreas: So far I hadn’t any plans for that. But I’m always implementing based on requests, therefore it is quite possible to add that.

    Thinking about it, there are two options: Cookie based and AJAX/serverside based storage.

    Both require some kind of serialization. Cookie-saving could use the existing cookie-plugin for the grundwork. AJAX/serverside storage requires more work on the serverside, and would mereley define to form and protocol for storage and restoration.

    Size of cookies is very limited, so the serialization has to be very effective to allow big enough trees to be stored.

    Any other thoughts on that?

  11. Andres Barreto
    11. March 2007 |06:49

    Hi Jorn

    It is great to have responses this fast. Well, what I had in mind was the cookie approach, I have used other javascript based treemenu libraries that followed the cookie approach to solve this issue and worked pretty well on that regard.

    I like it your treeview better though b/c of the nice effects, simplicity and integration with JQuery. Again, I think the “persistent” mode for menu system applications is a must and the only one serious concern I have with treeview.

    In the while, I can see a workaround by placing treeview in a separated frame if frameless design is not a requirement.

    Hey, thank you very much for sharing your work!

    Andres

  12. 11. March 2007 |17:41

    @Andres: I’ve implemented the first step of cookie-based storage. For a preview, take a look at the files in SVN.

    I need to find a way to create a unique cookie-name for each tree, currently only one tree can be stored.

    And I’m thinking about using a binary storage instead of a JSON-array. Should be even more efficient in size.

  13. Andres Barreto
    11. March 2007 |20:09

    Hi Jorn
    I just tried the cookie-based (w/ JSON) at SVN and everything worked pretty well with my customized test page (one tree only). This is a really welcome addition even with the current ‘only-one’ persistent tree condition. Lot of chances that I will use it in my next project, if so I will publish credits on the project’s website and let you know. Thanks!
    Andres

  14. 12. March 2007 |09:15

    Good to know it works for you. After a cup of sleep I came up with a solution to store each tree on one page. Once that is implemented, I’ll notice you, and if everything works fine, I’d like to release that as Treeview 2.0.

  15. Diego
    28. March 2007 |18:16

    Hi all

    Thanks for the great effort in this development, it has been a wonderful for me to find it and se that fits all my reqs.
    Just a quick question, is it possible to use it with dynamic content? imagine getting the menu items from a database, it is possible?

    Thanks in avance

  16. 28. March 2007 |18:48

    @Diego: You could get the menu from a database and “render” it via AJAX/JavaScript, and then apply the treeview plugin. You can’t add branches (only leafs, but not at the end of a branch) after applying the plugin, that isn’t supported (yet).

  17. pingback

    [...] Wat is en Treeview – da stellen wir uns ganz dumm und sagen det is en Boom wo de Äste nur wachse wenn de drufklickst – un wat passiert wenn de Äste wachse, das sehen mir später… Was ich damit sagen will: Wer ein Treeview braucht ist mit dem Treeview von Jörn sehr gut bedient – das Script benötigt gepackt nur 2kb – dazu kommen natürlich noch die Bilder – aber die schlagen auch nur geringfügig zu Buche… [...]

  18. Xel
    30. March 2007 |16:32

    Hi Jörn,
    would it be possible to add drag/drop capabilities to this treeview (with a callback function to save changes where needed)?

    This would really give users much more possibilities to use this treeview.

    Bye Alex

  19. 31. March 2007 |17:33

    @Xel: That is an interesting matter, but currently beyond the scope of this plugin. You could check the Interface folder tree demo.

  20. Xel
    2. April 2007 |09:14

    yeah its a way – but there is one realy problem with it… did you ever tried this demo with IE6?
    There are serious problems with it (for example you can not move something into a folder wich wasn’t visible there at page loading [cause its tree was callpsed then or cause it was moved to its actual position])

    This may be a problem of usage of the plugins but as I am not too good at JS and the demo seams to be made by one who knows what he’s doing (he wouldn’t write the Interface Plugin if he didn’t I think) I don’t think I would be doing it better…

    Since it should be integrated into an admin component for a cms(joomla) I think IE6 should be supported and I don’t think I am able to make this script suit IE. [I hate IE anyway but I can't make it disapear]. Well I’ll try anyway – but if you add drag/drop support to your treeview plugin sometime please let me know.

  21. 2. April 2007 |20:10

    Well, I guess I would start with Interface’ drag’n'drop support anyway. I’ll keep in mind to inform you.

    Another option would be to look at what Ext is offering. I guess its even bulkier then Interface, but maybe it works better for you.

  22. 3. April 2007 |20:37

    Please. Fix the first item in tree, now it show “expandable” css style, but for good view needed firstExpandable whithout top dots…

  23. 3. April 2007 |20:56

    A valid request, though that would add quite a few additional images. If anyone is willing to help creating those images, I’ll implement the logic to set the classes.

  24. Ron
    16. April 2007 |21:52

    If you have problems with flickering at the bottom of the treeview in Internet Explorer then make sure your document is of the type:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>

    When I used the following:

    <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”>
    <html>

    Internet Explorer 7 flickers the animation when that doctype is used. If
    you don’t know what the flickering is causing then it could take a lot
    of time to solve this problem :-)

  25. 9. May 2007 |11:43

    Is there a possibility to get the latest and greatest version of the plugin? I would like to try the state cookie saving mechanism, but all links to the latest versions in SVN appear to be dead. Thanks.

  26. 9. May 2007 |20:47

    @Andrew: The jQuery subversion repository has moved to Google Code. I’ve updated the link.

  27. goodguy
    18. May 2007 |10:40

    BUG:there will be one white-space indent at the first li item when “speed” not set.

  28. J.
    18. May 2007 |22:05

    Excellent plug in Jorn. Is there any plans to make possible adding nodes dynamically.

    Very tight code ;)

  29. 20. May 2007 |15:48

    @goodguy: I’ll check that.

    @J.: Adding nodes is much more complicated then you’d think at first look. Until someone provides some help on that matter, don’t wait for it.

  30. 24. May 2007 |19:07

    Great plug in, made it part of a lot of the work I’m doing.

    Not sure if someone already reported this, but I did notice a minor bug which is that the width and height are set after the animation is complete (which can cause graphic problems later.) The obvious fix is to add a call back that resets the width and height of the animated item:

    $(“ul.content_files”).Treeview({speed:”fast”,toggle:treeCallback});
    function treeCallback(){
    $(this).height(”);
    $(this).width(”);
    }

  31. 24. May 2007 |19:36

    @Jonathan: Thanks for the report, I’m gonna take a look at that and maybe integrate your fix into the plugin.

  32. Pieter-Jan
    14. June 2007 |16:07

    When I run Treeview with ‘{speed: “fast”, collapsed: true}’ it works fine in IE 6 but in FF 1.5 the list is completely expanded. Becaus your demo works as expected in both IE 6 and FF 1.5, I assume it’s my own fault. Any idea what might cause this problem in FF?

  33. 14. June 2007 |18:00

    @Pieter-Jan: That is difficult to guess, especially since most issues occur in other browsers then FF. A test page would help alot.

  34. Pieter-Jan
    15. June 2007 |07:50

    Thanks for your reply. I understand it’s difficult to guess. Unfortunately I’m working on a (not public) Intranet site, so I can not give you an url to the actual page. It’s a Java application I’m maintaining (didn’t develop it myself originally) which generates quite big and messy web pages. I’ll try to reproduce the problem in a simpler, custom page and get back to you.

  35. Pieter-Jan
    15. June 2007 |12:12

    I found the problem. The original developer of the application decided to set the css ‘visibility’ property of an outside to ‘hidden’ and then unhide that using JavaScript in the onLoad event of . Because the pages are quite large and (in my humble opinion needlessly) complex, I can imagine he had some complaints from users about flickering and/or slow page displays. Removing the ‘visibility’ property from the stylesheet solves the problem.

  36. Pieter-Jan
    15. June 2007 |12:19

    By the way, can you think of a workaround for this problem? I think I get in trouble if I permanently remove the ‘visibility’ property from the style sheet, but I do want the treeview to initially show up collapsed.

  37. Pieter-Jan
    15. June 2007 |13:17

    Sorry, that was choosing for the line of least resistance. I solved that too by moving Treeview initialization from $(“ul”).ready() to a custom JavaScript function which gets called at an appropriate moment.

    By the way: how about a nice forum on your site? I feel like I’m abusing this comment system to show off my inexperience and lack of knowledge :-)

  38. 15. June 2007 |17:35

    @Pieter-Jan: Glad to hear you solved it.

    You are right, the comment system doesn’t hold up anymore and the need for a forum is growing. I’m thinking about “moving” to jQuery’s plugin discussion list, as soon as it is ported to google groups.

  39. PsychodelEKS
    16. June 2007 |11:59

    Jörn, great work =)
    Have one question so far, is there any way to expand branch to certain element on demand from inside JS? E.g. I want to show user certain element of my list depending on his choice. Item is selected in the select box -> tree is expanded to show the item.

  40. Daniel
    17. June 2007 |11:28

    Hallo,

    gibt es mittlerweile eine Version oder Möglichkeit auf einer Seite zwei trees per cookie zu speichern ?

  41. 17. June 2007 |17:50

    @PsychodelEKS: Nope, not yet. You can only expand the whole tree at once.

    @Daniel: Leider noch nicht. Das Speichern eines Trees klappt schon nicht so richtig.

  42. PsychodelEKS
    18. June 2007 |16:40

    @Jörn: It’s a pity, would’ve been a great feature. Very usefull for webapplications, to give direct links to your list. Hope it’ll be implemented.

  43. PsychodelEKS
    19. June 2007 |15:17

    I’ve also faced a problem, that hitarea div’s do not handle external .click() =(
    Just tried to make folders collapse/expand on folder name click, using corresponding div click emulation, though div.click() is not handleld, though may be my bug…

  44. 19. June 2007 |22:24

    PsychodelEKS: The treeview plugin currently uses the custom toggle-event to handle clicks. I just discovered that there is no reason to use the toggle-event. Please try to replace “.toggle( toggler, toggler );” in your local copy with “.click( toggler );”.

  45. Lior Cohen
    5. July 2007 |09:54

    Great work :)

    It could be very handy if the plugin allowed providing custom class names for tree items (the LI elements). This would allow for adding of draggable/droppable and some additional functionality.

    This could be done using selectors, but it would be much more readable and clear as to what’s being done when using this plugin.

    Thank you,

    Lior.

  46. 5. July 2007 |12:13

    @Lior: Making the tree sortable is definitely on the list features to add. Paul Pakaus is working on the new UI stuff (see the jQuery blog for details), and on that way we’ll enhance this plugin.

  47. Steve
    6. July 2007 |16:38

    Found an issue with this in Safari 3.0.1 for the PC. The tree works but defaults to opening every branch automatically whether you set it to default closed or not. Also setting the li class to closed seemed to have no effect for me as well.

  48. 8. July 2007 |13:41

    @Steve: Thanks for the report. I’ve haven’t done any testing with Treeview on Safari 3 yet, but will do.

  49. Jeunejean Pierre
    12. July 2007 |16:48

    How can I download version 1.2, right now I only see a “Download Treeview plugin 1.1″ link, thanks a lot, P.

  50. 12. July 2007 |17:44

    Sorry for the confusion. I forgot to upate the version number on the link. Corrected!

  51. Thomas
    16. July 2007 |11:59

    Hello Jörn!

    Regarding the following Issue: “Expand/collapse of branches is limited to clickevent on hitarea, add option to use the entire line”, i’ve added a slight workaround, which works nicely. Assuming that you add your own anchor elements to the tree list:

    <li><a href=”javascript:;”>Item 1.2.2</a>
    <ul>
    <li><a href=”test.html”>Item 1.2.2.0</a></li>
    <li>Item 1.2.2.1</li>
    </ul>

    You simply have to add this line of code after appending the “hitarea” which is done in line 269 of the uncompressed version:

    // append tree toggle to anchors
    branches.find(“a”).click( toggler );

    Please note that any url defined in href will only work for leaf nodes (those w/o sub elements). Any other anchors which are placed inside of collapsible/expandable nodes, will only toggle the node and abort the default event.

    This is ok in my case since only the leaf nodes may have any content to show up.

    Hope this helps, if anybody was missing that.
    btw. there might be better solutions.

  52. 17. July 2007 |17:41

    @Thomas: Thanks! I’ll try to offer that as a plugin option.

  53. Thomas
    17. July 2007 |18:43

    Hello Jörn,

    this is a follow up comment to my previous post from 16th of July, regarding the following statement: “Please note that any url defined in href will only work for leaf nodes (those w/o sub elements). Any other anchors which are placed inside of collapsible/expandable nodes, will only toggle the node and abort the default event.”

    Looks like this is not the case, or at least, not always, which i wasn’t able to find out exactly. In my current modification i need to use a “blank” action, for example: href=”javascript:;” or “javascript:void(0);”, else the toggle event will fire and continue with the default action. The second option I was able to find out is to include a “return false” at the end of the “toggler” (line ~ 204), if there were any subitems..:

    if ($( this ).parent().find( “>ul” ).length > 0)
    return false;

    not elegant, but working…

  54. 20. July 2007 |02:40

    Hi Jörn

    Thanks for the excellent plugin!

    There seams to be an issue with the treeview plugin introduced between jQuery versions 1.1.2 and 1.1.3.1 where non-root nodes do not have a hitarea GIF image although they are still clickable and can be expanded/collapsed as normal.

    Are you aware of this? Do you know of any fix? If not where in the source code does the plugin apply this image to the sub-nodes so I might understand the workings of the plugin a bit better to debug it myself?

    Thanks in advance for any help you can provide regarding this.

    Isaac

  55. 24. July 2007 |13:51

    @Isaac: Nope, I wasn’t aware of it, thanks for bringing it up. Those images are all background-images applied via CSS (see index.html).

  56. Vlad
    24. July 2007 |14:15

    > Expand/collapse of branches is limited to clickevent on hitarea, add option to use the entire line

    This is very needed feature!

    Also, thank You for the nice plugin. Goog luck!

  57. caesar
    24. July 2007 |16:40

    Hi for everyone!

    First of all….excelent work!
    I’m new in Jquery.
    I want to know if is posible to build a dynamic treeview with this pluggin?

    Thks!

  58. 24. July 2007 |18:32

    @Vlad: Right. Thomas provided some useful code for that matter, I just haven’t yet gotten around to include that into the plugin. If you want to give it a try, looks for the comments from him above (posted on 16. and 17. of July).

    @caesar: Currently there is no real support for that. Adding a leaf to a branch works as long as it not the last one, but thats it.

  59. Paparent
    6. August 2007 |19:58

    Hi,

    Nice plugin. I use it to display categories in an internal apps but i miss a feature: When i click the link (’cause the treeview is some <a>) i can’t highlight the selected element. I could use the :active css, but it won’t work when i loose focus. What can i do?

    Tahnks and good job!

  60. 7. August 2007 |20:24

    @Paparent: Looks like you need a feature that the accordion plugin now provides. It “saves” its state by looking at the current location.href, selecting the part of the accordion that matches the href. I’ll check how that can be added to treeview.

  61. birko
    9. August 2007 |10:21

    hi. i have used our treecontrol plugin an think its great. but i have a problem with displaying it on Opera and IE. The link where i use it is
    http://prehlad.neonus.sk
    thanks for any help

  62. Paparent
    11. August 2007 |00:14

    @Jörn: well, my <a>s aren’t link to javascript function. It’s an Web Application so. dunno if accordion can do.

  63. Pieter-Jan
    16. August 2007 |11:31

    Apparently Treeview must be able to retain it’s state (using cookies) but my version 1.2 (the one I downloaded from http://jquery.bassistance.de/treeview/jquery.treeview.zip) doesn’t seem to support that yet. Where can I obtain the latest version?

  64. 24. August 2007 |16:34

    @birko: I get an syntax error from the packed validation.js, doh. Sorry for releaseing that.

    @Paparent: Accordion doesn’t care about anchors, it just hides and shows element at certain positions.

    @Pieter-Jan: I couldn’t really get state-saving to work so far. Its still on the list, but may take a while.

  65. 30. August 2007 |09:50

    Take a look at:

    http://dev.jquery.com/ticket/1457

    I fixed that bug with the lastCollapsable not showing the “plus” or “minus” symbol. Also I made some code cleanup.

  66. Fabrizio
    31. August 2007 |17:01

    Hi! Great work!
    Just a question: do you think that the issue “Animations in IE are not perfectly smooth” can be corrected?or it’s something thats depends from internal ie implementation?

    hovewer, really nice library!!

  67. 31. August 2007 |18:20

    @mbirth: Thanks for those patches. I’ll integrate them into the codebase.

    @Fabrizio: Animations seem to be fine now, thanks to some updates in jQuery itself. My demos have a problem when ClearType is enabled on Windows, I need to look up how to fix that.

  68. gnattali
    3. September 2007 |12:55

    The problem around lastCollapsable occurs when the target “ul” is not specified uniquely.

    I added some comment and something that source side can do to
    http://dev.jquery.com/ticket/1457

    please take a look.
    thank you for the great plugin!!

  69. 4. September 2007 |19:21

    @gnattali: Thanks!

  70. steki
    5. September 2007 |00:12

    hi,

    i want to use treeview in combination with drag and drop to populate the tree. so if i drag an element from a pool i need a visual feedback.

    example is a simple mail client where i drag a mail from the inbox to the tree. any idea on how to start

    see zimbra screenshot
    http://www.zimbra.com/products/ss_inbox.html
    (draggin mail to mailbox (treeview))

  71. 5. September 2007 |17:00

    @steki: D&D is beyond the scope of this plugin. The new UI project will include a D&D tree that should be better suited for your needs. See this entry on the jquery-ui mailing list.

  72. Thomas
    5. September 2007 |17:54

    Hello Jörn,

    Thanx a lot for your plugin! I have one little problem that maybe is easy to solve:

    My trees are very large, sometimes several hundred items and several levels. For the plugin to initialize that tree takes about 800ms, which is much to long on a production site. Would it be possible to “lazy load” the tree items? i.e. I start with a collapsed tree and only as I expand, the plugin is applied to the subitems?

    Is it possible with a small change to the source?

    I hope you can help me and thanks again for you nice plugin!

    Thomas

  73. 5. September 2007 |20:43

    @Thomas: No, that is beyond the scope of this plugin. It could be built on top of this plugin though. For now I can recommend the Ext Tree component. I’m using that in a project and it works very well, supporting both lazy-load and drag&drop. You just have to deal with the file size.

  74. Christoph
    7. September 2007 |14:47

    Hey Jörn,

    I love your treeview! (I don’t like the new ui-tree in it’s current state at all…) If you have some time, you could start making it jQuery 1.2-compatible. See http://dev.jquery.com/ticket/1575 (that’s all that needed to be done to make it work with the latest jQuery-svn-revisien).

    But maybe you want to wait, until 1.2 is finally released..

    Thanks anyways! Cheers, Christoph

  75. Thomas
    7. September 2007 |16:41

    Thanx a lot for your fast reply Jörn! I’ll give Ext Tree a trie.

    What I meant was not real lazy loading through ajax but adding the hitarea to subitems of a collapsed branch at the moment it is expanded and not when the document is loaded. Do you think that’s possible? I would still output the whole tree with all data but apply the plugin only to branches that are actually expanded by the user.

  76. 8. September 2007 |12:54

    @Christoph: Thanks for the report. I’ll keep that in mind.

    @Thomas: Ah, I didn’t get that. That should be possible and would speed up building the tree a lot. I’ll give it a try.

  77. Thomas
    8. September 2007 |14:20

    Thank you so much Jörn! I tried to implement it myself but sadly i’m no JS expert ;) I think it would be a nice feature for the plugin. It should really improve performance if you start with a collapsed tree.

  78. Jakub Witkiewicz
    10. September 2007 |11:50

    There was talk of a cookie-based persistence for the treeview.
    Approximately when do the developers think that will that be avaliable?

    Keep up the good work.

  79. 11. September 2007 |09:51

    @Jakub: My experiments with that were all very unsuccessful. I’ve implemented a location-based state-saving now, which works quite well when you use the tree for the navigation.

  80. Jonathan Pasquier
    12. September 2007 |16:34

    Hello,

    First of all, thanks a lot for the plugin! it’s working really well!

    I’ve just tried to use the treeview plugin with jQuery 1.2 and with a minor tweak it worked.

    On line 212 of the uncompressed version, you have to change $(“li[ul]“, this) by $(“li:has(ul)”, this)
    (it seems that li[ul] is deprecated in jQuery 1.2)

  81. 12. September 2007 |23:57

    Hi,
    This is a very nice JQuery plugin.
    And although i dont seem te get it working 100% with cookies, i’m wondering how i can link the folder listitems to open or close the list beneath it. That would make browsing the tree much easier and better to use.

    Also the cookie’s dont seem to work, but perhapse some extra examples about the cookie function would help?

  82. Nate
    13. September 2007 |00:51

    I can’t get the cookie based store option to work. Can anyone point me to a working demo so that I can see might be wrong with mine?

  83. Nate
    13. September 2007 |18:25

    Might there be some css hack with a negative margin to make the hit area wider and extend so many pixels to the right of the current small hit area?

  84. Thomas
    14. September 2007 |10:17

    Thanks to Jonathan Pasquier, i guess this fix should be integrated in a official release :)

    Martin, i described a little fix on 16. Juli 2007, if that’s what you mean, just browse the comments.

  85. 14. September 2007 |13:36

    @Jonathan: Thanks for the report!

    @Martin and Nate: There is no official cookie support yet. I gave it a try, but never got it working reliable.

    For closing other items: Try the unique-option.

    @Nate: I haven’t tried it myself. Let me know if you have any success with CSS hacks.

  86. 14. September 2007 |16:51

    Hey there, Jörn, I’ve experienced a very strange behavior with FF2 with Kubuntu: hitareas are not visible.

    I’ve solved the matter by adding two spaces inside the div element at line 224.

    Keep up the good work :)

  87. 17. September 2007 |15:46

    @Nikola: Thanks for the report. Very strange indeed.

  88. Frank
    19. September 2007 |02:53

    Jörn, your doing a great job!. however, this plugin doesn’t work well with the latest version of jQuery (1.2.1). All of the node seems to be expanded.

  89. Sanjay
    20. September 2007 |09:18

    Jörn, your plugin is good. However, it doesn’t seem to be working well with JQuery 1.2.1. I can see only the first level of the tree. What could be the reason?

    Thanks.

  90. Sergii
    20. September 2007 |18:09

    I have the same problem as Frank. I saw somewhere plugin to backwards compatibility with jQuery 1.0 and 1.1 but did not tried yet

  91. Sergii
    20. September 2007 |18:46

    to Jonathan Pasquier
    after changes tree is works but incorrect – incorrect images show onload

  92. 21. September 2007 |15:55

    I don’t suppose you have state saving working yet somewhere? On the version I downloaded from the link and on your demo page it does not yet appear to be working. Otherwise, solid plug in. :)

  93. 21. September 2007 |22:51

    Double check your lists to make sure your tree opens and closes properly.
    i.e.

    Tree

    Subtree

    … etc

    If the ul’s for your subtree aren’t contained within the li’s, then the $(“li:has(ul)”, this) function will return nothing and the plugin won’t function correctly. Once I realized this, it seems the plugin works just fine with 1.2.1. This is assuming you make the replacement Jonathan Pasquier suggests (there are actually 3 places that need changing), as the [] function is now depricated and replaced by :has()

    Hope this helped those of you having issues with getting this great plugin to work with 1.2 and 1.2.1 (Been using it on FF 2.0.0.7 and IE7)

  94. SoulMan
    21. September 2007 |22:53

    Previous post should have an example tree, such as (comment ate my html example)

    (ul)
    (li)Tree
    (ul)
    (li)Subtree(/li)
    (ul)
    (/li)
    (/ul)

  95. 23. September 2007 |23:44

    For anyone interested in cookie-based statesaving: Its back! I’ve got it working in FF, IE and Opera, though not yet Safari3 (can’t test Safari2).

    I’ve also resolved the issues with animations in IE and Opera.

    Take a look at the current state if you like.

  96. OLEO
    24. September 2007 |17:53

    Hi,
    I’m OLEO.nice to meet you.
    I also meet this problem when I use JQuery1.2
    finally I modifid jquery.treeview.js
    from $(“li[ul]“, this) to $(“li:has(ul)”, this) and then it works well

    i think you can add some code to improve the compatibility.

    good luck

  97. Jonathan Pasquier
    25. September 2007 |09:00

    @Sergii
    You’re right!
    You have to modify the selectors at line 214 and 219 too.
    So, instead of this:
    // find all tree items with child lists
    $(“li[ul]“, this) ul:hidden]”) ul:hidden]”) ul:hidden)”) ul:hidden)”)

  98. Jonathan Pasquier
    25. September 2007 |09:04

    Oops!
    The comment system ate half of my previous post :-/
    Well, here is the code:
    From the original jquery.treeview.
    // find all tree items with child lists
    $(“li[ul]“, this)
    // handle closed ones first
    .filter(“[>ul:hidden]“)
    .addClass(CLASSES.expandable)
    .swapClass(CLASSES.last, CLASSES.lastExpandable)
    .end()
    // handle open ones
    .not(“[>ul:hidden]“)
    .addClass(CLASSES.collapsable)
    .swapClass(CLASSES.last, CLASSES.lastCollapsable)
    .end()
    And the modified version:
    $(“li:has(ul)”, this)
    // handle closed ones first
    .filter(“:has(>ul:hidden)”)
    .addClass(CLASSES.expandable)
    .swapClass(CLASSES.last, CLASSES.lastExpandable)
    .end()
    // handle open ones
    .not(“:has(>ul:hidden)”)
    .addClass(CLASSES.collapsable)
    .swapClass(CLASSES.last, CLASSES.lastCollapsable)
    .end()

  99. 25. September 2007 |19:40

    @Thanks Jonathan. I’ve included that in the latest revision. A new release should be out soon.

  100. Tartembouille
    27. September 2007 |17:39

    Hi,

    Great work its a very good plugin !

    Nevertheless it seems its broke with the latest jquery core.

    Is an update planed for treeview plugin ?

    Thanks for reply.

  101. 29. September 2007 |12:35

    Tartembouille: Yep! Actually an update is nearly ready, I’m only finishing a bit debugging on Safari 3. You can already get the latest files from SVN.

  102. matt
    2. October 2007 |20:32

    Hi,
    Thanks for the great plugin. I am trying to build a form where i would use the accordion plugin along with the treeview plugin. Essentially the accordion list the “top level” categories, with either standard form elements in each LI or a treeview list if there is nested data. I think the two may be stepping on each other’s toes since I can’t seem to get them to work together, although independently they’re great. Does anyone have any idea why this would be? Here’s an example of what I’m talking about. Thanks for any ideas:


    Name

    Name

    Name Part

    Type


    Something Else
    testesteste

  103. Ivo Benedito
    3. October 2007 |12:25

    Hi !! Seems like the new release (1.3) is still broken with jquery 1.2.1 … The [] was replaced by :has function.

  104. Ivo
    6. October 2007 |20:53

    Ok, the 1.3 archive is now with the correct version :) !! In the demos, the “Sample 1 – default” with filetree css class seems to not work properly with the IE7 when i try to expand/collapse nodes with the tree tv-expandable.gif and tv-collapsable.gif buttons. This seems to be fixed if i remove the property display:block from the span.folder block. Anyone have this problm ?? Thanks.

  105. Phill
    7. October 2007 |11:24

    Hello,
    first of all this plugin is great!

    While trying to implement some AJAX code for dynamic loading to this plugin, I’ve found an error in treeview when adding new items. (Of course I can provide the code as soon as it works correctly. :)

    I use the svn version and the following code doesn’t work as I would expect.

    var branches = $(“<li>first</li> <li> second</li>”).prependTo(“#folder21″);
    $(“#navigation”).treeview({ add: branches });

    Any character between </li> and <li> makes the tree distorted. It happens in O9, FF2. IE7 is fine though :-(

    Any ideas how to fix this?

    Thank you!

  106. 9. October 2007 |03:36

    Hi Jorn,

    I’m new to jquery and treeview so I hope this input is useful..

    1) Thanks for a great tree control. Very professional finish.

    2) I think I know why people are still reporting the ‘[]‘ bug.. when we downloaded 1.3 from the JQuery site, we got 1.2 again, perhaps some http proxy somewhere is breaking this. We finally got the real 1.3 from this site only.

    3) Like others we needed dynamic server-sourced population too. I saw that in 1.3 you have quietly introduced the “add” handler and therefore shown how to grow the tree. I have picked up on this and after quite a lot of work can now submit the following sample code to dynamically build the tree. (This could be the “help” you asked for above)

    To use this code, the server-side-generated tree must supply the PKey of the not-yet-populated branch as an attribute. In our case the attribute is “org_unit_key”. Also, because we want a ‘+’ hitarea to appear even for such a branch, the server side must also go ahead and pre-load such a branch with a single node with content ‘placeholder’. This code will replace ‘placeholder’ with the results of the ajax call…

    $("ul.treeview2").treeview({
                    unique: true,
                    collapsed: false,
                    toggle: function() {
                        var li = this;
                        if (!li.org_unit_key) return;
                        if (!$(li).hasClass('collapsable')) return;
                        var $ul = $('ul:first',li);
                        if (!$('li:first:contains("placeholder")', $ul).length) return;
                        $ul.empty();
                        var args = {org_unit_key: li.org_unit_key};
                        $.get("/subtree", args, function(str) {
                            var $branches = $(str).contents();
                            $branches.appendTo($ul);
                            $("ul.treeview2").treeview({add: $branches})
                        })
                    }
    });

    .. the JQuery code could be more compact but anyway this works very nicely for us. Thanks Jorn.

  107. 9. October 2007 |10:56

    @matt: Could you post that as a testpage? Integration with other plugins is always the difficult part, but also the most interesting.

    @Phill: Did you trying simply leaving out any characters between those tags?

    @Frank: Thanks, I’ve uploaded 1.3 again and it seems to be the right version now.

    And thanks a lot for you dynamic-tree code. I guess I need to add that to the plugin :-) I’ll definitely take a look. It would help (even more) if you could post a demo page for that tree. That way I can take a look at what you are transferring via AJAX to and from the server.

  108. 11. October 2007 |01:42

    Our project is behind security walls Jörn, so I can’t do that from here, but if possible I will try to put up a simple demo from my own server sometime Real Soon Now ™.

    In the meantime, if it helps, what we are returning from the server is a subtree starting at a , and your demo code showed us that “branches” should be simply an uncontained list of ‘s, so that’s why I call “contents()”.. it’s simply to get the list of ‘s from out of the . We can throw away the returned high-level because that’s the underneath the that got clicked on in the first place.. we already have it.

    Also, in the returned subtree, note that we still generate the “placeholders” with class=closed, only for cases where further expansion is needed. aww. what the heck.. here’s a cut-and-paste showing the returned tree.

    example 1.. where still further expansion will be possible..

    HARBOURSIDE
    placeholder

    HURSTVILLE
    placeholder

    ST GEORGE
    placeholder

    BOTANY BAY
    placeholder

    EASTERN BEACHES
    placeholder

    ROSE BAY
    placeholder

    KINGS CROSS
    placeholder

    SURRY HILLS
    placeholder

    THE ROCKS
    placeholder

    LEICHHARDT
    placeholder

    .. examle 2 .. we are at the end-leaves, no further expansion ..

    BALMAIN
    GLEBE
    ANNANDALE
    LEICHHARDT

    If it’s of interest, on the server side we use Perl, so calling HTML::Element->new_from_lol() combined with Class::DBI did most of the magic for us in constructing those subtrees. There.. I hope you enjoyed your tour of Sydney.

  109. 11. October 2007 |01:44

    hmm.. I’m sorry, the comment-filter has completely melted my html. Was i supposed to put it in “pre” tags or “code” tags or something?

  110. 11. October 2007 |23:34

    Sorry Frank for the stupid comment-stripping. I should have fixed that long ago… Stiil, thanks for the explanations, I think I got most of it. It could still be quite useful to see a full response – just drop me a mail.

  111. Erik Unger
    12. October 2007 |21:45

    Hi Jörn, great plugin. What I am missing is support for other background-color than white.

  112. 14. October 2007 |12:33

    @Erik: We just have to find someone who is willing to replace white with transparent on all those images…

  113. Chris
    16. October 2007 |14:52

    Hi Jorn,

    Thanks for the great plugin, it really works nicely.

    I am loading the tree into a iframe using the jquery Thick Box plugin.
    It works great in IE but in FF it loads the tree without the clickable expandable nodes (the node gifs are missing but the rest of the styles from the style sheet are there). If i manually reload the iframe contents it then works correctly?

    Have you any ideas where i should start with this?

    Regards
    Chris

  114. 17. October 2007 |05:15

    Hi Jorn, thanks for creating a great plugin! I’ve been using v1.2, and am now trying to update to 1.3. However I am having some problems I can’t fix.

    Example page: http://papastreets.com/temp/treeview/

    The script seems to stop after the prepareBranches() has been done. It doesn’t do branches.applyClasses, or setup the treecontroller. Can you give me any clues as to why it has stopped working? If I change back to v1.2 it all works fine.

    Thanks in advance!

  115. Tavin
    17. October 2007 |06:52

    why is Item 2 indented to the right of Item 1 when everything is collapsed? (in the first demo at the top of the demo page)

    firefox 2.0.0.6

  116. 17. October 2007 |09:41

    @Chris: That could be related to this bug. Would you mind giving the latest jQuery revision a try?

    @Miles: You have to upgrade to jQuery 1.2 to use treeview 1.3.

    @Tavin: I can’t see that issue (FF 2.0.0.7).

  117. Nick
    18. October 2007 |16:01

    When viewing the treeview demo in Safari (Version 2.0.4 (419.3)), the animated sample (Sample 2 – fast animations) crashes Safari every time. The other examples all seem fine.

    Am I the only one this is happening to?

    Cheers,
    N

    (great work btw)

  118. Stan
    19. October 2007 |05:00

    Hi Jorn, thanks for the great plugin! Is there a way to dynamically removed nodes from the treeview??

  119. 20. October 2007 |14:37

    @Nick: I haven’t been able yet to test in Safari 2, I’ll try to fix that.

    @Stan: Not yet. You could take a look at the “add” implementation, a “remove” option should work quite similar.

  120. jay
    26. October 2007 |23:30

    It will be nice to have a end to end sample either in ASP or JSP or PHP that does go back to server on click event.

  121. Douglas Smith
    27. October 2007 |17:49

    I would like to suggest an option to expand to level X, so i can show the tree mostly collapsed, but open to level 2 for example.

  122. 28. October 2007 |04:54

    @jay: What exactly would you like to see in the example? How to use the treeview plugin for navigation with php/…?

    @Douglas: Good point. I’ll try to add an option that gives you “remote control” over the tree. The treecontrol could then use that, too.
    Until then you can still control which parts to open why using appropiate classes, eg. use collapsed:true but set an class “open” on the first two levels.

  123. 1. November 2007 |19:36

    Jörn,
    This is some beautiful code and a great introduction to jQuery.

    I need to have one of my branches auto-expand when the parent is opened. I can make this happen outside of the treeview blackbox, but I would like to make use of the functions already available.

    Is there a function I can call to expand all the children and sub-children of a parent when the parent is clicked?

  124. Preston Williams
    5. November 2007 |20:55

    I’m part of a Fortune 200 web development team that is very glad to jQuery and powerful plugins such as yours available. Unfortunately after a few hours of trying I can’t get the cookie persistence to work in our project when using IE 6. I made certain that the browser is set to accept all cookies and still can’t get Sample 3 of your demo page to save state in IE 6. I thank you very much in advance for your time and help!

  125. Preston Williams
    5. November 2007 |20:59

    I’M SORRY, I WAS WRONG! Tested this on some other clients and it worked there. Must be some wacky configuration in my local IE 6 (gotta love that browser). So sorry to doubt you, and thanks so much again for such a useful tool!

  126. 6. November 2007 |10:35

    Hi Jörn,
    I’m using the Treeview plugin at the moment to create the navigation for a site I’m working on.

    In IE, when I expand a node of the tree the browser window puts scrollbars in allowing me to see the rest of the tree.

    In firefox, it doesn’t, so most of the tree disappears off the bottom of the page until I collapse the bit of the tree I’m looking at.

    Is there a way to force Firefox to show the scrollbars for this?

    Thanks,
    James

  127. Tiago
    6. November 2007 |22:56

    Hey, first of all, great control
    Helped me a lot, thank you very much =)
    The bug reported by Ivo in fact happens, when using IE7 with ‘classed’ spans that have ‘display: block’, the collapse/expand button doesnt work
    It seems to be caused by the way IE7 treats the empty div, so adding a background color and setting opacity to 0 solves the problem
    just add this to ‘.treeview div.hitarea’ on jquery.treeview.css

    background-color: #ddd;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;

    (ps; grey is just a personal preference =P)

  128. 8. November 2007 |01:57

    @Michael: Currently the tree lacks some kind of activate-method. I guess I really need to add that. Any help is welcome, the tree implementation isn’t that complicated.

    @Preston: You got me there for a moment :-)

    @James: Usually you set overflow:auto via CSS to tell browser to display scrollbars when elements are too big to fit their container.

    Please post a testpage if that doesn’t help you any further.

    @Tiago: Thanks for the report. I’ll try to replicate the problem and give the solution a try. Would be nice to integrate it into the plugin so that noone else has to bother with the issue.

  129. 16. November 2007 |07:29

    Jörn,

    I’ve made some mods to the tree view that might be worthy of being put back in to your code:

    * Graphically handle the root node so the lines don’t go above it – this needed several new graphics (a few for each colour) and some CSS which I’ve made

    * Hide the controller using CSS then show it only when it’s activated via JS

    * Default CSS allows wrapping of node captions, including those with icons

    I also plan:

    * Ability to set initial number of levels displayed via settings

    * Compatibility with metadata plugin

    * Publicly accessible default settings (eg. if I want to change class names, etc)

    I can’t remember your email address so if you want me to send the files over drop me an email (I’m away the next few days though).

  130. Luke
    16. November 2007 |17:48

    Love the treeview…especially how it automatically selects the node based upon the url…I modified that portion to not be case-sensitive when it compares the url of the document to the url of each node. Any thoughts on throwing that in? thanks, and great work!

  131. Wil
    21. November 2007 |06:56

    Hey Jörn,

    Thanks for the great work. I wanted to use it for a database-driven version that doesn’t load into the page until it is requested. My dataset is so large that loading the entire tree at once would be impossible.

    The list is generated initially using the db table id as the span id with empty unordered lists when the list item is a parent to be populated when the list opens.

    I anticipated using something (like this: $("span").attr("id");
    ) to grab the id number to query my database and return the list and append it to the empty .

    I’m working on it at the moment but if you have any tips I’d love the help getting started. Server-side features are ready, just working out the jQuery…

  132. pete
    21. November 2007 |12:18

    Hi Jörn,
    Very impressive treeview you’ve there! Here’s my *****!

    Refering to:

    # alex, posted 9. Februar 2007 |08:03
    There seems to be a problem in IE 7, the Lists do not collapse when you click on a node.

    It does collapse/expand when you click on the name, but not when clicking on the boxes [-] and [+]. Any news or intentions?

    Keep up the good work!

  133. Kevin Thorpe
    22. November 2007 |14:10

    I’m having trouble using dynamic loading as offered by Frank Carnovale. Sorry if this question is obvious, but my js is almost as bad as my jQuery.

    I can get nodes to dynamically add inside js (commented out lines) and it all works fine. If I replace that with a .get call which returns exactly the same html (non-indented code) I get errors:

    message: Statement on line 1362: Type mismatch (usually a non-object value used where an object is required)
    Line 1362 of linked script http://www.pricetrak.com/jquery/jquery-1.2.1.js

    can anyone explain why?

    toggle: function() {
    var li = this;
    if (!$(li).hasClass(‘collapsable’)) return;
    var $ul = $(‘ul:first’,li);
    if (!$(‘li:first:contains(“placeholder”)’, $ul).length) return;
    $ul.empty();
    // var $branches = $(“Stationeryplaceholder”);
    // $branches.appendTo($ul);
    // $(“#prodlists”).treeview({add: $branches})
    var args = { };
    $.get(“prodlist.php”, args, function(str) {
    var $branches = $(str).contents();
    $branches.appendTo($ul);
    $(“#prodlists”).treeview({add: $branches})
    })
    }

  134. 23. November 2007 |04:34

    So esay a treeview plugin,Thanks!

  135. 27. November 2007 |14:31

    @Guy: Thanks for your contributions.

    @Luke: I played around a bit with that but couldn’t get it working. Could you post an example of your modifications?

    @Wil: Take a look at my experimental async treeview. The API is still subject to change, your feedback is welcome!

    @pete: I have to take a closer look at Guy’s contributions, lets hope he already fixed that. I’ll look into it.

    @Kevin: You may want to give my async treeview a try, too. There is also a demo available.

    @ 莫敏琪: You’re welcome!

  136. Ivo
    29. November 2007 |13:12

    Hi !!

    When we define a tree control block for the control element of the treeview (collapse/expand/toggle) functions, in your code u use this:

    // click on first element to collapse tree
    $(“:eq(0)”, control).click( handler(CLASSES.collapsable) );
    // click on second to expand tree
    $(“:eq(1)”, control).click( ……………

    I changed it with (added an anchor element to the selector, because it’s that what you want to search, i had img elements and span’s inside the control block and wasn’t working because of that …)
    // click on first element to collapse tree
    $(“a:eq(0)”, control).click( handler(CLASSES.collapsable) );
    // click on second to expand tree
    $(“a:eq(1)”, control).click( ……………

  137. Alexander
    30. November 2007 |15:35

    nice plugin, but it does to much dom operations.

    i have a tree with 1000 nodes on the first level.

    adding classes and nodes using javascript is slow, i wrote a component that renders them to markup directly, so i need only attach listeners this seems much faster.

    probably you can provide method that just setup listeners?

  138. Abu
    1. December 2007 |11:18

    Thanks for this great plugin.

    Is there anyway to restrict functionality to the first level…

    This can expand and collapse

    This cannot expand or collapse

    This can expand and collapse

    This cannot expand or collapse

  139. Abu
    1. December 2007 |11:20

    Sorry… looks like the html’s been stripped. I hope you understand my question without the example.

  140. 2. December 2007 |13:44

    @Ivo: Good point. I’ve fixed that, should be included in 1.4.

    @Alexander: Stuff like that always makes me wonder: Why display 1000 nodes at once anyway?

    Nonetheless, I have a good point. I’ve added a prerendered option to the latest revision. That should be included in 1.4 as well.

    @Abu: Well, so far there wasn’t. But with the prerendered option I just added you could add the necessary classes and hitareas to just the first level. Take a look at the prerendered demo to see if that is what you are looking for.

  141. Alexander
    3. December 2007 |14:05

    thats kind of file tree,and its actually not my requirement to handle 1000 nodes

    i’m developing ajaxable tree component using tapestry5+jquery

    thanks

    ps i suggest to add

    .filetree span.folder, .filetree span.file {
    white-space: nowrap;
    }

    makes sence when splitter plugin is used

  142. PeteMo
    4. December 2007 |23:02

    Jorn,

    Great job on this plugin. Very professional and well documented. We need more of this! ;-)

    Do you know of any javascript/html/plugin,… that will take in a directory name (e.g. /opt/tree/myDir) and have all of the subdirectories and sub-files automatically show up? This would have to recursively generate the to feed into this plugin.

    Again, great plugin and any help would be appreciated!

    PeteMo.

  143. 6. December 2007 |09:22

    @PeteMo: That sounds like you need a serverside component to generate the necessary html, doesn’t it?

  144. Luke
    11. December 2007 |18:47

    To make the url matching not case-sensitive, I made the following change:

    case "location":
    var loc=location.href.toLowerCase();
    var current = this.find("a").filter(function() { return this.href.toLowerCase() == loc; });
    if ( current.length ) {
    current.addClass("selected").parents("ul, li").add( current.next() ).show();
    }
    break;

  145. Luke
    11. December 2007 |18:49

    I also made a couple methods smaller just because i was bored…

    swapClass: function(c1, c2) {
    var c1Elements = this.filter('.'+c1);
    this.filter('.'+c2).removeClass(c2).addClass(c1);
    c1Elements.removeClass(c1).addClass(c2);
    return this;
    },
    replaceClass: function(c1, c2) {
    return this.filter('.'+c1).removeClass(c1).addClass(c2);
    },

  146. Joe
    17. December 2007 |18:04

    Hello!

    I’m trying to append an anchor tag to the “file” class elements of my tree (the “leaves” in tree parlance). I need this because I want to trigger an event when the file is clicked on.

    I’m having very little luck in getting this to work. (I’m very new to JQUERY) My tree comes from a taconite formatted xml file… here’s a sample:

    Folder:Employees

    Test File

    Another File

    So I need the link to be applied to the “File” class elements. I tried this code, which comes right after my “.treeview” call:

    $(‘.filetree span.File’).each(function() {
    $(this).wrap(‘‘);
    });

    I’ve tried this code on a static nested and it worked as intended, but in the code that actually gets my data from my xml service, it fails. I’ve tried it in various places… immediately after the .treeview code, but before the end of my .get function that receives the data; after the data function, but still within the document.ready function; and even in a separate, document.load function. Nothing works.

    Ideas? Do I need to modify the plugin? Thanks for your help!

  147. 18. December 2007 |16:20

    Hi Jörn,
    thanks for this neat plugins its work without any glitch on my first try. keep up the good works .. Im using it with my new theme. merci

  148. 23. December 2007 |04:07

    hi…i like your js
    could you tell me how to dynamic set the option “unique” is fase or true
    ,“`thanks

  149. Joe
    24. December 2007 |22:10

    Hi– I can’t get htis working in IE7 and IE6 and I have no clue why

    In IE6 it doesn’t click at all (expand / collapse)

    In IE7 after the first click it stops working

    http://www.joesak.com/cbi/

    Can you please help?

    Thanks.

  150. Gagi
    27. December 2007 |08:12

    Hi! I have noticed a small bug while using the component with persisting option set to ‘cookie’ and prerendering set to true… If I expand a tree node and then hit reload button, this tree node is now displayed with an expand icon (‘+’) even though it is already expanded and should be (‘-’).
    Good job, anyway! :)

    Cheers!

  151. 7. January 2008 |18:38

    @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:

    $("#thelist").load('/cbi/leftpanes/samples.html', function() {
      $("#sublist").treeview({
        ...
      });
    });

    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.

  152. kanvin
    9. January 2008 |13:11

    I have a treetable component from webgalileo. When expanding in safari 2.0.4 it crashes the browser. Need help.

  153. 10. January 2008 |23:01

    Hello!
    I want to my list expanding on hover event. How can i do this?
    Where change code?

    P.S.: Sorry for English.

  154. fred
    14. January 2008 |21:59

    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

  155. michael
    23. January 2008 |12:54

    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

  156. Joe
    23. January 2008 |19:03

    @jorn: i tried doing the callback function, but no dice

    @fred – want to share what you’ve done? We’d love to see

  157. John
    29. January 2008 |19:21

    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.

  158. NickeL
    30. January 2008 |16:15

    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

  159. Otto Wyss
    31. January 2008 |07:57

    Is it possible to use treeview without lines, just the plus/minus icon? How?

    Where are the options documented?

    O. Wyss

  160. Otto Wyss
    31. January 2008 |08:47

    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

  161. Mike Sidorov
    4. February 2008 |07:31

    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.

  162. 4. February 2008 |15:20

    @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.

  163. babar
    4. February 2008 |21:14

    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 !

  164. Mike Sidorov
    5. February 2008 |12:43

    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).

  165. 5. February 2008 |20:01

    @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.

  166. Mike Sidorov
    6. February 2008 |06:19

    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.

  167. Deepak Kaithwas
    6. February 2008 |12:35

    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); }

  168. 6. February 2008 |22:34

    @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.