• Topic
  • Discussion
  • OATWikiWeb.OATDOCtree(Last) -- Owiki? , 2016-08-19 14:58:53 Edit owiki 2016-08-19 14:58:53

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

    Referenced by...