tree.js

Converts Unordered List (<ul> element) into interactive tree.

Objects

OAT.Tree(options)

Options may contain any of the following:

• imagePath - path to all images used in tree
• imagePrefix - prefix to all images
• ext - image name extension
• onlyOneOpened - boolean; can only one branch can be opened at a time?
• allowDrag - boolean; can user re-drag Tree nodes?
• useDots - boolean; draw dotted connectors?
• onClick - "select|toggle|false"; what to do when user clicks label/icon
• onDblClick - "select|toggle|false"; what to do when user double-clicks label/icon
• poorMode - boolean; switch to "memory_saving_increased_performance / lower_visual_features" mode?
• checkboxMode - boolean; use checkbox mode?
• allowDrag - boolean; can user re-drag Tree nodes?
• defaultCheck - boolean (only in checkbox mode) ; (ToBeDone: are checkboxes checked by default?)
• checkNOI - boolean (only in checkbox mode); if true, then checked nodes are contained in OAT.Tree::checkedNOI. Otherwise, this array contains unchecked nodes.
• checkCallback - function (only in checkbox mode); will be executed (with nodeSet argument) when user changes state of a checkbox.

Methods

OAT.Tree.assign(listElement, collapse)

This converts a list into an interactive tree.listElement specifies an <ul> element in which your list lives. Argument collapse toggles initial collapsing of whole tree.

Tree data structure can be accessed and modified. See Example for usage.

HTML Enhancement

Add attributes branchImg, toggleOpenImg, and toggleClosedImg, which would be appended to the <li> tag. This way we can have any desired name AND file format for the tree decoration.

Example

var t1 = new OAT.Tree({imagePath:"images",    // will take images from
         imagePrefix:"", ext:"gif"});         // images/Tree_*.gif
var t2 = new OAT.Tree({imagePath:"images",    // will take images from
         imagePrefix:"prefix", ext:"png"});   // images/Tree_prefix_*.png
t1.assign("myUL1", true);   // collapsed
t2.assign("myUL2", false);  // expanded

var node1 = t1.tree.children[0];
var node2 = t2.tree.children[1];

node2.appendChild(node1);
node1.setLabel("newLabel");
node2.expand();
node1.createChild("newLabel", true);  // second argument means that new 
                                      // child is a node rather than leaf
node2.deleteChild(node1);