Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > LazyTree converted to a Checkbox Tree, but checkbox clear?

Reply
Thread Tools

LazyTree converted to a Checkbox Tree, but checkbox clear?

 
 
jasonwinters71@yahoo.co.uk
Guest
Posts: n/a
 
      11-15-2006
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').innerHT ML = '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 http://www.velocityreviews.com/forums/(E-Mail Removed)

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

/************************************************** ***********************
* 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.getSecond s()+'.'+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="javascriptarentNode.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[i].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[i].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[i].title+', this='+this.title+')...' + ', eq='
+ (ac[i] == this));
if ( ac[i]!=this )
ac[i]._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[i].visit (cb, true, bDeep);
} else {
cb (this.aChilds[i]);
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[i]!=this && ac[i].bExpanded )
ac[i].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/

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
'The expression can not be converted to type' error A. Kong VHDL 4 10-10-2004 07:37 AM
product of real and (integer)(after converted to real one) value - vhdl found fatal error senthil VHDL 5 01-24-2004 04:37 AM
Converted to Mozilla but one thing missing - key macro/substitution no-spam Firefox 5 07-29-2003 08:07 PM
trying to consume a webservice with dotnet, but all numbers in the result are converted to zero Ross ASP .Net Web Services 0 07-15-2003 02:03 PM



Advertisments