/* * (c) 2005-2009 Richard Cowin (http://openrico.org) * (c) 2005-2009 Matt Brown (http://dowdybrown.com) * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under the * License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, * either express or implied. See the License for the specific language governing permissions * and limitations under the License. */ // Rico Tree Control // Requires prototype.js and ricoCommon.js // Data for the tree can be 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 = function(id,url,options) { this.initialize(id,url,options); }; Rico.TreeControl.prototype = { /** * @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
Rico event handle 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
class name to display img, default="rico-icon rico-doc" ('none'=no leaf icon)
*
*/ initialize: function(id,url,options) { Rico.extend(this, new Rico.Popup()); Rico.extend(this.options, { ignoreClicks:true, nodeIdDisplay:'none', showCheckBox: false, showFolders: false, showPlusMinus: true, showLines: true, defaultAction: Rico.eventHandle(this,'nodeClick'), height: '300px', width: '300px', leafIcon: 'rico-icon rico-doc' }); Rico.extend(this.options, options || {}); this.id=id; this.dataSource=url; this.close=this.closePopup; this.hoverSet = new Rico.HoverSet([]); }, atLoad : function() { this.treeDiv=document.createElement("div"); this.treeDiv.id=this.id; this.treeDiv.className='ricoTree'; if (Rico.theme.treeContent) Rico.addClass(this.treeDiv,Rico.theme.treeContent); this.treeDiv.style.height=this.options.height; this.treeDiv.style.width=this.options.width; this.createContainer(); this.content.className=Rico.theme.tree || 'ricoTreeContainer'; this.content.appendChild(this.treeDiv); if (this.options.showCheckBox) { this.buttonDiv=document.createElement("div"); this.buttonDiv.style.width=this.options.width; this.buttonDiv.className='ricoTreeButtons'; if (Rico.getStyle(this.container,'position')=='absolute') { var span=document.createElement("span"); span.innerHTML=RicoTranslate.getPhraseById('treeSave'); Rico.setStyle(span,{'float':'left',cursor:'pointer'}); this.buttonDiv.appendChild(span); Rico.eventBind(span, 'click', Rico.eventHandle(this,'saveSelection')); } var span=document.createElement("span"); span.innerHTML=RicoTranslate.getPhraseById('treeClear'); Rico.setStyle(span,{'float':'right',cursor:'pointer'}); this.buttonDiv.appendChild(span); this.content.appendChild(this.buttonDiv); Rico.eventBind(span, 'click', Rico.eventHandle(this,'clrCheckBoxEvent')); } this.close(); }, setTreeDiv: function(divId) { this.treeDiv = Rico.$(divId); this.openPopup = function() {}; }, open: function() { this.openPopup(); if (this.treeDiv.childNodes.length == 0 && this.dataSource) { this.loadXMLDoc(); } }, loadXMLDoc: function(branchPin) { var parms = { id: this.id }; if (branchPin) parms.Parent=branchPin; Rico.log('Tree loadXMLDoc: '+this.id); var self=this; new Rico.ajaxRequest(this.dataSource, {parameters:parms, method:'get', onComplete: function(request) { self.processResponse(request); } }); }, domID: function(nodeID,part) { return 'RicoTree_'+part+'_'+this.id+'_'+nodeID; }, processResponse: function(request) { var response = request.responseXML.getElementsByTagName("ajax-response"); if (response == null || response.length != 1) return; var rowsElement = response[0].getElementsByTagName('rows')[0]; var trs = rowsElement.getElementsByTagName("tr"); var rowdata=[]; for (var i=0; i < trs.length; i++) { var cells = trs[i].getElementsByTagName("td"); if (cells.length < 5) continue; var content=[]; content[5]=this.options.leafIcon; for (var j=0; j1) { 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("div"); img.name=nodeId; img.style.cursor='pointer'; Rico.eventBind(img, 'click', Rico.eventHandle(this,'clickBranch')); img.className='rico-icon rico-tree-'+prefix+"p"+suffix; row.insertCell(-1).appendChild(img); } else if (this.options.showLines) { var img = document.createElement("div"); img.className='rico-icon rico-tree-node'+suffix; row.insertCell(-1).appendChild(img); } if (this.options.showFolders && (isContainer || (leafIcon && leafIcon!='none'))) { var img = document.createElement("div"); if (!isContainer) { img.className=leafIcon; } else { img.name=nodeId; img.style.cursor='pointer'; Rico.eventBind(img, 'click', Rico.eventHandle(this,'clickBranch')); img.className='rico-icon rico-folderclosed'; } 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)'; Rico.eventBind(span, 'click', this.options.defaultAction); } this.hoverSet.add(span); } 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=Rico.eventElement(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