Index | OAT homepage | OpenLink Software

# OATDOCtree

- OATDOCtree
- _ _ tree.js
- _ _ _ _ Objects
- _ _ _ _ _ _ OAT.Tree(options)
- _ _ _ _ Methods
- _ _ _ _ _ _ OAT.Tree.assign(listElement, collapse)
- _ _ _ _ HTML Enhancement
- _ _ _ _ Example

## 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) ; 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);

Copyright (C) 2005-2008 OpenLink Software