Tech » lazyTree

JavaScript tree view control

I am currently working on a port of this library to jQuery.

Es gibt auch eine deutsche Version.

lazyTree sample

Click here for a sample...

LazyTree is JavaScript library that sports a Dynamic HTML tree, with support for lazy loading of branches.
Main features include:

  • Simple JavaScript programming interface: object orientated with additional callbacks.
  • Written from scratch. The library does not depend on any other code.
  • Support for 'lazy nodes' i.e. branches may be loaded when the user expands a specific node.
    This is typically implemented by adding a callback that send an Ajax request and uses the results to add the new subnodes.
  • Support for different node types with custom icons
  • Tested with IE 6+7, Firefox 1.5, Opera 7
  • It's free (see 'Terms of Use' below)

Terms of Use

This code may be used freely, as long as you accept the following terms of use:

  • NO WARRANTY of any kind is given.
    Use this code it a your own risk OR DON'T USE IT AT ALL.
    Also, I may not be able to support or maintain it in the future.
  • The comment header must be left intact.
    If you make changes, add an additional comment describing it.
    Even better: if you find bugs or improvements let me know, so we can share it.

Download and Install

Zip file Download lazyTree.zip (8 kB)

  1. Extract the zip file into a lazytree directory below your servers html root directory.

Usage and Samples

Simple example:

  1. Import lazyTree library and stylesheet.
  2. Add code to handle selection of items.
  3. Add code to define tree options and data structure.
  4. Add a <div> Tag to the html code, where the tree should be displayed.
  5. Call the initialisation code in the onload-event.
<html>
<head>
    [...]
    <script type='text/javascript' src='lazyTree.js'></script> // (1)
    <link rel='stylesheet' type='text/css' href='skin/lazyTree.css' />
    [...]
    <script type='text/javascript'>
    function onTreeSelect (tn) { // (2)
        alert ('You selected ' + tn.title);
    }
    function initTree() { // (3)
        var tree = new CLazyTree ('idTree', 'Root Cause');

        tree.bAutoCollapse = true;
        tree.onSelect      = onTreeSelect;

        var f, d;
        f = tree.getRoot().addFolder ('Folder 1');
        f.addDoc ('Document 1');
        f.addDoc ('Document 2');

        f = tree.getRoot().addFolder ('Folder 2');
        f.addDoc ('Document 3');
        tree.enableUpdate (true);
    }
    </script>
</head>
<body onload='initTree();' > // (5)
    [...]
    <div id='idTree'> </div> // (4)
    [...]
</body>
</html>
For an advanced example check the source code of this sample.

Change Log and previous releases

2006-08-07
v0.2
  • There now is a separate icon for open folders.
  • Tested with IE 7 beta 3
  • Added support for tooltips
  • Added support for custom icons
  • Added support for additional custom data that can be attached to any node
2006-07-15
v0.1
 First preview release

 

  
     
     
     
home – top – contact
© martin wendt