Flexible JavaScript Tree Menu: dTree

While creating a filebrowser for a project, I have tried several JavaScript tree menus and found this one the easiest to work with.

dTree is an easy to setup & use classic JavaScript tree menu.

With a XHTML 1.0 strict validated output, this tree menu supports unlimited number of levels and remembers the state between pages.

http://www.destroydrop.com/javascripts/tree/default.html

Other features of dTree:

  • Can be used with or without frames
  • Possible to have as many trees as you like on a page
  • All major browsers supported
  • Alternative images for each node

The items don’t need to be in an order within the code as you can re-order them. This is a functional feature when creating the menu from a database.

The script is well-documented and this example shows how flexible it is.

10 Comments
  1. Reply frank August 26, 2008 at 8:42 PM

    Would love to see the file browser demo and code that you created using this.

  2. Reply Umut M. August 27, 2008 at 2:43 AM

    @frank,

    I’m hoping to release the code however it is a part of a project & I must clean-up other stuff before releasing it.

    The result is very similar to: http://www.webresourcesdepot.com/customizable-ajax-file-browser-for-jquery/ but does not depend on any frameworks.

  3. Reply balaji September 6, 2008 at 3:22 AM

    hai,
    i developed a tree in java script by using WEDbFXTree().but it is working only in MS-I Explorer.It is not working in MOzilla FireFox an other Explorers.can u tell me this dTree() will work in all the Explorers.reply immediatly.It’s urgent…

    thanking u..

    balaji

  4. Reply Umut M. September 6, 2008 at 6:33 AM

    @balaji,

    As far as I tried, yes. But just give the demo a try with different browsers.

  5. Reply ivan September 25, 2008 at 8:26 AM

    This is a great library. I’ve been using it for years and even though it has not been updated since 2003 in works great in all browsers.

    Two of its biggest advantages are:

    * it is very easy to hack if you need extra functionality (e.g. ajax loading of the subtrees takes about 30 extra lines of js code)

    * it accepts a parent-child list of nodes which is very easy to build with one sql statement if you display dynamic trees. Most of the others tree libraries need nested objects to run and nested objects are a (recursive) pain to build.

  6. Reply Mike August 27, 2009 at 3:55 PM

    Ivan, can you post or send me an example op a way to dynamic add/delete nodes of the tree. I try to figure it out but havent find a solution.

  7. Reply Sandy March 24, 2010 at 3:08 AM

    Um, dtree doesn’t work properly in a horizontally scrollable div in Mozilla. It doesn’t render “outside” the div, so it doesn’t scroll. If you then cause horizontal scrolling by something else in the div, then you can see that everything in tree was cut off at the div boundary, and everything to the right wasn’t drawn.

    In IE it scrolls horizontally properly…

    I *really* don’t like working with Mozilla – everything is painful… :-(((

  8. Reply Abbe February 10, 2011 at 7:24 PM

    Hi,
    I found a couple bugs and an issues with browser compatibility, the homepage has no forum or comments section so I post my fixes here for anyone who might be interested

    Line: (Bug)
    if (node.url || ((!this.config.folderLinks || !node.url) && node._hc) ) str += ‘‘;
    should be:
    if (node.url || ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)) str += ‘‘;

    Line: (Bug)
    if (this.config.useStatusText) str += ‘ onmouseover=”window.status=\” + node.name + ‘\’;return true;” onmouseout=”window.status=\’\’;return true;” ‘;
    should be:
    if (this.config.useStatusText) str += ‘ onmouseover=”window.status=\” + (node.name+”).replace(/[\\”‘]/g, ‘\\$&’).replace(/\u0000/g, ‘\’) + ‘\’; return true;” onmouseout=”window.status=\’\’; return true;” ‘;

    Line: (cross browser compatibility issue)
    str += ”;
    should be:
    str += ”;

    Good luck

  9. Reply Abbe February 10, 2011 at 7:28 PM

    Sorry, forgot tags, here is the code again.

    Line: (Bug)

    if (node.url || ((!this.config.folderLinks || !node.url) && node._hc) ) str += '';

    should be:

    if (node.url || ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)) str += '';

    Line: (Bug)

    if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';

    should be:

    if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + (node.name+'').replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\') + '\'; return true;" onmouseout="window.status=\'\'; return true;" ';

    Line: (cross browser compatibility issue)

    str += '';

    should be:

    str += '';

    Good luck

  10. Reply Jorge Santos May 21, 2012 at 3:30 PM

    Hi

    how can I set it to works using frames?

Leave a reply

Search