Note: This plugin was superseeded by Dynatree, and later Fancytree.

Open demo:

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)

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
    Tag to the html code, where the tree should be displayed.
  5. Call the initialisation code in the onload-event.
      <pre class='prettyprint'><html>
    <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 ('<font color="#0000FF">idTree</font>', '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);
<body onload='initTree();' >  // (5)
    <div id='<font color="#0000FF">idTree</font>'> </div>  // (4)

For an advanced example check the source code of the demo.