LazyTree converted to a Checkbox Tree, but checkbox clear?

Discussion in 'Javascript' started by jasonwinters71@yahoo.co.uk, Nov 15, 2006.

  1. Guest

    I have been working with lazytree.js to convert it to a checkbox tree.
    LazyTree.js runs really quickly and other free checkbox trees that I
    have come across seem to be too slow - but if anyone knows of a better
    example to work on please let me know.

    The problem that I am having with my conversion of this [originally]
    folder tree to a checkbox tree is that i) checked boxes are being
    cleared when the tree is closed and then reopened, ii) I can't seem to
    get the values of the checkboxes out to form values and iii)
    checkboxing of a parent element does need to have some function to
    automatically checkbox the child checkboxes.

    The html is:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>lazytree checkbox tree testing</title>
    <meta name="vs_targetSchema"
    content="http://schemas.microsoft.com/intellisense/ie5" />
    <link rel='stylesheet' type='text/css' href='skin/lt.css' />
    <script src='lazyTree.js' type='text/javascript'></script>



    <script type='text/javascript'>

    function onTreeSelect (tn) {
    document.getElementById('idTreeSelection').innerHTML = 'You selected
    "' + tn.title + '".';
    if ( tn.data && tn.data.url )
    window.open (tn.data.url, '_blank');
    }
    function onTreeRead (tn) {
    tn.setLazyNodeStatus (LTNodeStatus_Reading);
    tn.setLazyNodeStatus (LTNodeStatus_Ok);
    }
    function initTree() {
    var tree = new CLazyTree ('idTree', 'Root Cause');

    // tree.bExpandOnAdd = true;
    tree.bRootVisible = false;
    tree.bRootCollapsible = true;
    // tree.bSelectExpandsFolders = false;
    tree.bAutoCollapse = false;

    tree.onSelect = onTreeSelect;
    tree.onLazyRead = onTreeRead;

    tree.enableUpdate (false);

    // --- this is a sample of a simple node hierarchy:
    var m1 = tree.getRoot().addFolder ('Team 1');
    var m2 = tree.getRoot().addFolder ('Team 2');


    var n;

    n = m1.addDoc ('Front');
    n.addDoc ('Player 1');
    n.addDoc ('Player 2');
    n = m1.addDoc ('Mid');
    n.addDoc ('Player 1');
    n.addDoc ('Player 2');
    n = m1.addDoc ('Rear');
    n.addDoc ('Player 1');
    n.addDoc ('Player 2');
    n.addDoc ('Player 3');
    n.addDoc ('Player 4');
    n = m1.addDoc ('Goal');

    n = m2.addDoc ('Front');
    n.addDoc ('Player 1');
    n.addDoc ('Player 2');
    n = m2.addDoc ('Mid');
    n.addDoc ('Player 1');
    n.addDoc ('Player 2');
    n = m2.addDoc ('Rear');
    n.addDoc ('Player 1');
    n.addDoc ('Player 2');





    ltLog ('tree was created.');
    tree.enableUpdate (true);
    }
    </script>
    </head>
    <body onload='initTree();'>

    <div id='idNoJS'>This page requires JavaScript. Please make sure you
    have enabled this in your browser's settings.</div>
    <script type='text/javascript'>
    document.getElementById('idNoJS').style.display = 'none'; </script>



    <div id='idTree'>
    </div>
    <div id='idTreeSelection'>
    </div>
    <hr>
    <div id='idLogPanel'>
    </div>
    <p>(Remove the div-tag with id <code>idLogPanel</code> to suppress
    debug output.)</p>
    </body>
    </html>


    the jscript is:

    /*************************************************************************
    LazyTree
    Dynamic HTML tree, with support for lazy loading of branches.

    This code may be used freely, as long as
    - you accept, that NO WARRANTY is given:
    use it a your own risk OR DON'T USE IT AT ALL
    - this comment header is left intact

    A current version and some documentation should be available at
    http://www.wwWendt.de/ref/lazytree/

    Let me know, if you find bugs or improvements.
    (c) 2006

    *************************************************************************/

    /*************************************************************************
    * Common functions for extending classes etc.
    * Borrowed from prototype.js
    */
    var Class = {
    create: function() {
    return function() {
    this.initialize.apply(this, arguments);
    }
    }
    }

    /*************************************************************************
    * Debug funcions
    */
    var bDebug = true;
    var divLogPanel = null;
    function ltLog (msg) {
    if ( !bDebug )
    return;
    if ( !divLogPanel ) {
    divLogPanel = document.getElementById('idLogPanel');
    if ( !divLogPanel ) {
    bDebug = false;
    return;
    }
    }
    var dt = new Date();
    divLogPanel .innerHTML +=
    dt.getHours()+':'+dt.getMinutes()+':'+dt.getSeconds()+'.'+dt.getMilliseconds()
    + ' ' + msg + '<br>';
    }

    /*************************************************************************
    * CLazyTreeNode
    */
    var LTNodeStatus_Error = 'Error.';
    var LTNodeStatus_Reading = 'Loading...';
    var LTNodeStatus_Ok = null;

    var CLazyTreeNode = Class.create();
    CLazyTreeNode.prototype = {
    initialize: function(tree, data) {
    this.tree = tree;
    if ( typeof data == 'string' ) {
    this.data = null;
    this.title = data;
    } else {
    this.data = data;
    this.title = data.title;
    }
    this.parent = null; // not yet added to a parent
    this.div = null; // not yet created
    this.span = null; // not yet created
    this.aChilds = null; // new Array();
    this.bIsFolder = false;
    this.bDelayed = false;
    this.bRead = false;
    this.bExpanded = false;
    },
    inspect: function() {
    return '"' + this.title + '" (' + this.data + ')';
    },
    getInnerHtml: function() {
    // cache tags
    var ip = this.tree.imagePath; //'images/';

    this.tagFld = '<input type=checkbox name=checkbx value=unknown
    onclick="toggleNodeOpen(this)" >';
    this.tagFld_o = '<input type=checkbox name=checkbx value=unknown
    onclick="toggleNodeOpen(this)" checked>';
    this.tagDoc = '<input type=checkbox name=checkbx value=unknown
    onclick="toggleNodeOpen(this)">';


    this.tagL_ns = '<img src="' + ip + 'ltL_ns.gif" alt="|" height="16"
    width="16"/>';
    this.tagL_ = '<img src="' + ip + 'ltL_.gif" alt="" height="16"
    width="16"/>';

    var res = '';

    // parent connectors
    var bIsRoot = (this.parent==null);
    var bHideFirstConnector = ( !this.tree.bRootVisible ||
    !this.tree.bRootCollapsible );

    var p = this.parent;
    while ( p ) {
    if ( ! (bHideFirstConnector && p.parent==null ) )
    res = ( p.isLastSibling() ? this.tagL_ : this.tagL_ns) + res ;
    p = p.parent;
    }

    // connector (expanded, expandable or simple
    // alert (this.title + ' isLast=' + this.isLastSibling());
    var imgConnector = null;
    var imgAlt = '';
    var bHasLink = true;
    if ( bHideFirstConnector && bIsRoot ) {
    // skip connector
    imgConnector = null;
    bHasLink = false;
    } else if ( this.aChilds && this.bExpanded ) {
    imgConnector = ( this.isLastSibling() ? 'ltM_ne' : 'ltM_nes' );
    imgAlt = '-';
    } else if (this.aChilds) {
    imgConnector = ( this.isLastSibling() ? 'ltP_ne' : 'ltP_nes' );
    imgAlt = '+';
    } else if (this.bDelayed) {
    imgConnector = ( this.isLastSibling() ? 'ltD_ne' : 'ltD_nes' );
    imgAlt = '?';
    } else {
    imgConnector = ( this.isLastSibling() ? 'ltL_ne' : 'ltL_nes' );
    bHasLink = false;
    }

    // var anchor = '#' + this.key;
    if ( bHasLink )
    res += '<a href="#" onClick="parentNode.ltn.expand();">';
    // res += '<a href="javascript:parentNode.ltn.expand();">'
    if ( imgConnector )
    res += '<img src="' + this.tree.imagePath + imgConnector + '.gif"
    alt="' + imgAlt + '" height="16" width="16" />'
    if ( bHasLink )
    res += '</a>';

    // folder or doctype icon
    // res += ( this.bIsFolder ? this.tagFld : this.tagDoc );
    if ( this.data && this.data.icon ) {
    res += '<img src="' + ip + this.data.icon + '" alt="" height="16"
    width="16"/>';
    } else if ( this.bIsFolder ) {
    res += ( this.bExpanded ? this.tagFld_o : this.tagFld );
    } else {
    res += this.tagDoc;
    }
    res += '&nbsp;';

    // node name
    var hint = ( this.data && typeof this.data.hint == 'string' ) ? '
    title="' + this.data.hint + '"' : '';
    if ( this.bIsFolder && this.tree.bSelectExpandsFolders &&
    (this.aChilds || this.bDelayed) ) {
    res += '<a href="#" onClick="parentNode.ltn.expand();"' + hint +
    '>' + this.title + '</a>';
    } else if ( !this.bIsFolder ) {
    res += '<a href="#" onClick="parentNode.ltn.select();"' + hint +
    '>' + this.title + '</a>';
    } else {
    res += this.title;
    }
    /*
    res += (this.bSelectable ? '<a href="#"
    onClick="parentNode.ltn.select();">' : '')
    + this.title
    + (this.bSelectable ? '</a>' : '');
    */
    return res;
    },
    _createOrSetDomElement: function() {
    if ( this.div==null ) {
    this.div = document.createElement ('div');
    this.div.className = 'tnLevelN';

    this.span = document.createElement ('span');
    this.span.className = 'ltNode';
    this.span.ltn = this;
    this.div.appendChild ( this.span );
    } else {
    // simply replace existing span's inner html
    }
    return this.div;
    },
    render: function (bDeep, bHidden) {

    // ltLog ('render '+this.title+', expanded='+this.bExpanded + ',
    aChilds='+(this.aChilds?this.aChilds.length:'0'));
    // --- create <div><span>..</span></div> tags for this node
    if ( ! this.span ) {
    this._createOrSetDomElement();
    if ( this.parent )
    this.parent.div.appendChild ( this.div );
    this.span.className = ( this.bIsFolder ? 'ltFolder' : 'ltDocument'
    );
    }
    // hide root?
    if ( this.parent==null )
    this.span.style.display = ( this.tree.bRootVisible ? '' : 'none');
    // hide this node, if parent is collapsed
    this.div.style.display = ( this.parent==null || this.parent.bExpanded
    ? '' : 'none');

    // set node connector images, links and text
    this.span.innerHTML = this.getInnerHtml();

    if ( bDeep && (this.aChilds != null ) && (bHidden || this.bExpanded)
    ) {
    for (var i=0; i<this.aChilds.length; i++) {
    this.aChilds.render (bDeep, bHidden)
    }
    }
    },
    isLastSibling: function() {
    var p = this.parent;
    if ( !p ) return true;
    return p.aChilds[p.aChilds.length-1] == this;
    },
    select: function() {
    this.tree.tnSelected = this;
    if ( this.tree.onSelect )
    this.tree.onSelect (this);
    },
    setLazyNodeStatus: function (lts) {
    var firstChild = ( this.aChilds ? this.aChilds[0] : null );
    if ( lts==LTNodeStatus_Ok ) {
    if ( firstChild ) {
    this.div.removeChild (firstChild.div);
    }
    this.bRead = true;
    } else {
    if ( firstChild ) {
    firstChild.title = lts;
    firstChild.render (false, false);
    } else {
    this._addChildNode (new CLazyTreeNode (this.tree, lts, null));
    }
    }
    },
    _expand: function (bExpand) {
    if ( this.bExpanded == bExpand )
    return;
    // ltLog ('_expand ('+this.title+', '+bExpand+')...');
    this.bExpanded = bExpand;
    // expanding a lazy node: set 'loading...' and call callback
    if ( bExpand && this.bDelayed && !this.bRead ) {
    if ( this.tree.onLazyRead ) {
    this.setLazyNodeStatus ('reading');
    this.tree.onLazyRead (this);
    } else {
    alert ('onLazyRead callback not set');
    }
    return;
    }
    // render expanded nodes
    this.render (true, false);
    // we didn't render collapsed nodes, so we have to update the
    visibility of direct childs
    if ( this.aChilds ) {
    for (var i=0; i<this.aChilds.length; i++) {
    this.aChilds.div.style.display = (this.bExpanded ? '' : 'none');
    }
    }
    },
    expand: function() {
    ltLog ('expand ('+this.title+')...');
    this._expand ( ! this.bExpanded);
    // auto-collapse mode
    if ( this.bExpanded && this.parent && this.tree.bAutoCollapse ) {
    var ac = this.parent.aChilds;
    for (var i=0; i<ac.length; i++) {
    // ltLog ('aci=('+ac.title+', this='+this.title+')...' + ', eq='
    + (ac == this));
    if ( ac!=this )
    ac._expand (false);
    }
    }
    ltLog ('expand ('+this.title+') done.');
    },
    /*
    onLoad: function() {
    alert ('expand ' + this.key);
    },
    _cbHide: function (tn) {
    tn.div.style.display = 'none';
    },
    _cbShow: function (tn) {
    tn.div.style.display = '';
    },
    showChilds: function (bShow) {
    // don't recurse, because div tags are nested anyway
    this.visit (bShow ? this._cbShow : this._cbHide, false, false);
    },
    visit: function (cb, bSelf, bDeep) {
    var n = 0;
    if ( bSelf ) { cb (this); n++; }
    if ( this.aChilds ) {
    for (var i=0; i<this.aChilds.length; i++) {
    if ( bDeep ) {
    n += this.aChilds.visit (cb, true, bDeep);
    } else {
    cb (this.aChilds);
    n++;
    }
    }
    }
    return n;
    },
    */
    _addChildNode: function (tn) {
    // ltLog ('addChild '+tn.title);
    if ( this.aChilds==null ) {
    this.aChilds = new Array();
    this.eExpandable = 1;
    }
    this.aChilds.push (tn);
    tn.parent = this;

    if ( this.tree.bExpandOnAdd || ( (!this.tree.bRootCollapsible ||
    !this.tree.bRootVisible) && this.parent==null ) )
    this.bExpanded = true;
    if ( this.tree.bEnableUpdate )
    this.render (true, false);
    return tn;
    },
    collapseSiblings: function() {
    if ( this.parent==null )
    return;
    var ac = this.parent.aChilds;
    for (var i=0; i<ac.length; i++) {
    if ( ac!=this && ac.bExpanded )
    ac.expand();
    }
    },
    addDoc: function (data) {
    var tn = new CLazyTreeNode (this.tree, data);
    return this._addChildNode (tn);
    },
    addFolder: function (data) {
    var tn = new CLazyTreeNode (this.tree, data);
    tn.bIsFolder = true;
    return this._addChildNode (tn);
    },
    addLazyDoc: function (data) {
    var tn = new CLazyTreeNode (this.tree, data);
    tn.bDelayed = true;
    tn.bRead = false;
    return this._addChildNode (tn);
    },
    addLazyFolder: function (data) {
    var tn = new CLazyTreeNode (this.tree, data);
    tn.bIsFolder = true;
    tn.bDelayed = true;
    tn.bRead = false;
    return this._addChildNode (tn);
    },
    // --- end of class
    lastFunction: function ()
    {}
    }

    /*************************************************************************
    * CLazyTree
    */
    var CLazyTree = Class.create();
    CLazyTree.prototype = {
    // static members
    version: '0.2',
    // constructor
    initialize: function (id, name) {
    ltLog ('CLazyTree.initialize()');
    // instance members
    this.bEnableUpdate = true;
    this.tnSelected = null;
    this.imagePath = 'skin/';
    this.onSelect = null;
    this.onLazyRead = null;

    this.bRootVisible = true;
    this.bRootCollapsible = false;
    this.bExpandOnAdd = false;
    this.bSelectExpandsFolders = true;
    this.bAutoCollapse = false;

    // find container element
    this.divTree = document.getElementById (id);
    // create the root element
    this.tnRoot = new CLazyTreeNode (this, {title:name, key:'root'});
    this.tnRoot.bIsFolder = true;
    this.tnRoot.render (false, false);
    this.divRoot = this.tnRoot.div;
    this.divRoot.className = 'lazyTree';
    // add root to container
    this.divTree.appendChild (this.divRoot);
    },
    // member functions
    inspect: function() {
    return 'CLazyTree "' + name + '"';
    },
    redraw: function() {
    ltLog ('redraw... ');
    this.tnRoot.render (true, false);
    ltLog ('redraw done. ');
    },
    getRoot: function (tn) {
    return this.tnRoot;
    },
    enableUpdate: function (bEnable) {
    if ( this.bEnableUpdate==bEnable )
    return bEnable;
    this.bEnableUpdate = bEnable;
    if ( bEnable )
    this.redraw();
    return !bEnable; // return prev. value
    },
    // --- end of class
    lastFunction: function ()
    {}
    }


    The css is:
    ..lazyTree
    {
    font-family: tahoma, arial, helvetica;
    font-size: smaller;

    line-height: 0;

    white-space: nowrap;

    padding: 3;
    border-width: 2;
    border-style: inset;
    border-color: buttonhighlight;

    background-color: threedlightshadow; /*#f0f0f0;*/
    /* padding: 0;
    margin: 0;
    border-width: 0; */
    }
    ..lazyTree a
    {
    text-decoration: none;
    }
    ..lazyTree a:visited
    {
    text-decoration: none;
    }
    ..lazyTree a:hover
    {
    text-decoration: underline;
    }
    ..lazyTree a:focus
    {
    text-decoration: none;
    background-color: Gray;
    }
    ..lazyTree a:active
    {
    text-decoration: none;
    background-color: Gray;
    }
    ..lazyTree img
    {
    border-width: 0;
    }
    ..tnLevelN
    {
    }
    ..ltFolder
    {
    font-weight: bold;
    color: graytext;
    vertical-align: middle;
    /* background-color:#DDDDDD;
    padding: 0;
    margin: 0;
    border-width: 0;*/
    }
    #idLogPanel {
    background-color: #f0f0f0;
    font-size:smaller;
    }



    original code credit: http://wwwendt.de/tech/lazytree/
     
    , Nov 15, 2006
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bill Dodd
    Replies:
    4
    Views:
    337
    Bill Dodd
    Nov 13, 2003
  2. Stub

    B tree, B+ tree and B* tree

    Stub, Nov 12, 2003, in forum: C Programming
    Replies:
    3
    Views:
    10,127
  3. David

    Response.Clear() doesn't clear

    David, Jan 31, 2008, in forum: ASP .Net
    Replies:
    2
    Views:
    1,036
    Mark Fitzpatrick
    Jan 31, 2008
  4. Ross
    Replies:
    0
    Views:
    141
  5. InvalidLastName

    Unrecognized element 'add' after <clear></clear>

    InvalidLastName, Feb 26, 2007, in forum: ASP .Net Web Services
    Replies:
    3
    Views:
    971
    Steven Cheng[MSFT]
    Mar 6, 2007
Loading...

Share This Page