// Rico Tree Control // by Matt Brown // Oct 2006, rewritten Jan 2008 // email: dowdybrown@yahoo.com // leafIcon logic added by Marco Catunda // Requires prototype.js and ricoCommon.js // Data for the tree is obtained via AJAX requests // Each record in the AJAX response should contain 5 or 6 cells: // cells[0]=parent node id // cells[1]=node id // cells[2]=description // cells[3]=L/zero (leaf), C/non-zero (container) // cells[4]=0->not selectable, 1->selectable (use default action), otherwise the node is selectable and cells[4] contains the action // cells[5]=leafIcon (optional) Rico.TreeControl = Class.create( /** @lends Rico.TreeControl# */ { /** * @class Implements a pop-up tree control. * @extends Rico.Popup * @constructs * @param id unique identifier * @param url data source * @param options object may contain any of the following:
*
nodeIdDisplay
first, last, tooltip, or none? default=none
*
showCheckBox
show checkbox next to each item? default=false
*
showFolders
show folder icons? default=false
*
showPlusMinus
show +/- icons to open/close branches? default=true
*
showLines
show vertical lines connecting each level? default=true
*
defaultAction
function to call when user clicks on an item, default is to call returnValue method
*
height
control height? default=300px
*
width
control width? default=300px
*
leafIcon
url to img, default=doc.gif ('none'=no leaf icon)
*
*/ initialize: function(id,url,options) { Object.extend(this, new Rico.Popup({ignoreClicks:true})); Object.extend(this.options, { nodeIdDisplay:'none', showCheckBox: false, showFolders: false, showPlusMinus: true, showLines: true, defaultAction: this.nodeClick.bindAsEventListener(this), height: '300px', width: '300px', leafIcon: Rico.imgDir+'doc.gif' }); Object.extend(this.options, options || {}); this.id=id; this.dataSource=url; this.close=this.closePopup; }, atLoad : function() { var imgsrc = ["node.gif","nodelast.gif","folderopen.gif","folderclosed.gif"]; // preload images for (var i=0;i1) { var tdParent=parentNode.getElementsByTagName('td'); for (var i=0; i0) { var suffix=isLast && this.options.showLines ? 'last' : ''; var prefix=this.options.showLines ? 'node' : ''; if (this.options.showPlusMinus && isContainer) { var img = document.createElement("img"); img.name=nodeId; img.style.cursor='pointer'; img.onclick=this.clickBranch.bindAsEventListener(this); img.src=Rico.imgDir+prefix+"p"+suffix+".gif"; row.insertCell(-1).appendChild(img); } else if (this.options.showLines) { var img = document.createElement("img"); img.src=Rico.imgDir+"node"+suffix+".gif"; row.insertCell(-1).appendChild(img); } if (this.options.showFolders && (isContainer || (leafIcon && leafIcon!='none'))) { var img = document.createElement("img"); if (!isContainer) { img.src=leafIcon; } else { img.name=nodeId; img.style.cursor='pointer'; img.onclick=this.clickBranch.bindAsEventListener(this); img.src=Rico.imgDir+"folderclosed.gif"; } row.insertCell(-1).appendChild(img); } } if (isSelectable && this.options.showCheckBox) { var chkbx=document.createElement("input"); chkbx.type="checkbox"; chkbx.value=nodeId; row.insertCell(-1).appendChild(chkbx); } if (isSelectable && !this.options.showCheckBox) { var span=document.createElement('a'); if (typeof isSelectable=='string') { span.href=isSelectable; } else { span.href='javascript:void(0)'; span.onclick=this.options.defaultAction; } } else { var span=document.createElement('p'); } span.id=this.domID(nodeId,'Desc'); span.className='ricoTreeLevel'+level; switch (this.options.nodeIdDisplay) { case 'last': nodeDesc+=' ('+nodeId+')'; break; case 'first': nodeDesc=nodeId+' - '+nodeDesc; break; case 'tooltip': span.title=nodeId; break; } span.appendChild(document.createTextNode(nodeDesc)); row.insertCell(-1).appendChild(span); var parent=parentChildren || this.treeDiv; parent.appendChild(tab); parent.appendChild(div); }, nodeClick: function(e) { var node=Event.element(e); if (this.returnValue) { var t=this.domID('','Desc'); this.returnValue(node.id.substr(t.length),node.innerHTML); } this.close(); }, saveSelection: function(e) { if (this.returnValue) { this.returnValue(this.getCheckedItems()); } this.close(); }, getCheckedItems: function() { var inp=this.treeDiv.getElementsByTagName('input'); var vals=[]; for (var i=0; i