Get Loom

Tree

The tree component is a javascript-only library that transforms a series of nested <ul> tags into a tree component:

Example of tree

Standalone tree

Trees can be instantiated from a series of nested lists of data:

<ul id="tree">
    <li id="t1-1">Item 1</li>
    <li id="t1-2">Item 2</li>
    <li id="t1-3">Item 3
        <ul>
        <li id="t1-3.1">Item 3.1
            <ul style="display:none">
                <li id="t1-3.1.1">Item 3.1.1</li>
            </ul>
        </li>
        <li id="t1-3.2">Item 3.2 with <a href="#">link</a>
            <ul>
                <li id="t1-3.2.1">Item 3.2.1</li>
                <li id="t1-3.2.2" class="folder">Item 3.2.2</li><!-- Activates dynamic loading -->
            </ul>
        </li>
        </ul>
    </li>
</ul>

<script>
var tree1 = new loom.ui.Tree('tree', {
	loader : function (i) {
		return { nodes : [{ id : i + 4, title : 'user-created ' + i, hasChildren : true }] };
	}
});
</script>

This example will some nested lists as a tree, and if a <li> has a "folder" class but no children nodes, the "loader" function will be invoked with the expanding item id.

Ajax trees

The loader parameter can be a user-defined javascript function, or a server URL that must be invoked to get tree children:

   var tree2 = new loom.ui.Tree('ajax-tree', {
        loader : '/usr/some/Tree.action',
        loaderType: 'JSON',
        root : {
            id : 'ROOT',
            title : 'tree root'
        },
        onclick : function(tree, id) {
            alert('node ' + id + ' clicked!');
        }
    });

This example will invoke the provided URL to get children data when the user expands a node. The server response may use JSON or HTML syntax. For further details about the expected syntax, see tree.js.

In this example we are also specifying a root node, and an onclick handler that will be invoked when a node gets clicked.