easytree.js

做的一个数列表的例子

/*
 * rocky.shen
 * (blog:http://www.javaeye.com/topic/38027) 
 * ([e-mail])
 * 2006-12-26
 */

var EasyNode=Class.create();
EasyNode.prototype = {
	initialize:function(nodeData,parent,eTree,depth){	
			this.nodeName=eTree.treeName+".nodes['"+ nodeData.id + "']";//very important 1
			this.parent=parent;
			this.eTree=eTree;
			//this.parent is instanceof easynode or easytree we must add the node to the top level eTree
			if(this.parent!=""){this.eTree=this.parent.eTree;}
			this.depth=depth;
			var defaultNodeData={						
						isLast:false,
						isSelected:false,
						isOpen:false,						
						iconOpen:this.eTree.icon.folderOpen,
						iconClose:this.eTree.icon.folderClose,
						target:this.eTree.config.target,
						url:'#',						
						foldCallback:this.eTree.config.foldCallback,
						pageCallback:this.eTree.config.pageCallback
					 };
		  	Object.extend(defaultNodeData,nodeData);			
			this.nodeData=defaultNodeData;
			if(this.nodeData.childs){this.hasChilds=true;}
			this.result=[];		
			this.draw();
			var node=this;
			this.eTree.nodes[nodeData.id]=node;//very important 2 you must know the relation between 1 and 2
	},
	draw:function(){
			this.result[this.result.length]="<div class='folder'>";
			this.result[this.result.length]="<div class='links'>";
			if(this.eTree.config.onlyName){
				this.drawLinksOnlyname();
			}else{
				this.drawLinks();
			}			
			this.result[this.result.length]="</div>";
			if(this.hasChilds){
				this.drawChilds();	
			}
			this.result[this.result.length]="</div>";
	},
	drawLinks:function(){			
			var openOrClose=this.nodeName+".openOrClose();";
			var firstImg=this.eTree.treeName+"-first-"+this.nodeData.id;
			var secondImg=this.eTree.treeName+"-second-"+this.nodeData.id;
			var thirdImg=this.eTree.treeName+"-third-"+this.nodeData.id;
			var selectNode=this.nodeName+".selectNode(this);";
			var foldCallback=(this.eTree.config.folderLinks)?this.nodeData.foldCallback +"("+ this.nodeName  +","+this.eTree.treeName +");":"";
			var pageCallback=(this.eTree.config.pageLinks)?this.nodeData.pageCallback +"("+ this.nodeName  +","+this.eTree.treeName +");":"";
			if(!this.eTree.config.especialRoot&&this.depth>0){
				this.result[this.result.length]="<img src='" + this.eTree.icon.empty + "'   ></img>";	
			}			
			for(i=0;i<this.depth-1;i++){
				this.result[this.result.length]=(this.eTree.config.useLines)?"<img src='" + this.eTree.icon.line + "'   ></img>":"<img src='" + this.eTree.icon.empty + "'   ></img>";
			}			
			var imgSrc=null;
			//the openOrclose link contain +(plus) -(minus) and the join	
			if(!(this.eTree.config.especialRoot&&this.depth==0)){			
				if(this.hasChilds){
					if(!this.eTree.config.useLines||this.depth==0){
							imgSrc=(this.nodeData.isOpen==true)?this.eTree.icon.nlMinus:this.eTree.icon.nlPlus;
					}else{
						if(this.nodeData.isLast){				
							imgSrc=(this.nodeData.isOpen==true)?this.eTree.icon.minusBottom:this.eTree.icon.plusBottom;
						}else{
							imgSrc=(this.nodeData.isOpen==true)?this.eTree.icon.minus:this.eTree.icon.plus;
						}						
					}							
					this.result[this.result.length]="<a id='"+ firstImg +"' href='#'  onclick=\"" + openOrClose + "\" ><img src='" + imgSrc + "' ></img></a>";				
				}else{	
					if(this.eTree.config.useLines){
						imgSrc=(this.nodeData.isLast==true)?this.eTree.icon.joinBottom:this.eTree.icon.join;					
					}else{
						imgSrc=this.eTree.icon.empty;
					}
					this.result[this.result.length]="<img src='" + imgSrc + "' ></img>";									
				}	
			}												
			//the  folder link
			if(this.eTree.config.useIcons){
				if(this.eTree.config.especialRoot&&this.depth==0){
					imgSrc=this.eTree.icon.root;
					this.result[this.result.length]="<a  id='"+ secondImg +"' onclick=\""+ openOrClose +"\"><img src='" + imgSrc + "' ></img></a>";
				}else{
					imgSrc=(this.hasChilds)?(this.nodeData.isOpen)?this.nodeData.iconOpen:this.nodeData.iconClose:this.eTree.icon.page;
					this.result[this.result.length]="<a  id='"+ secondImg +"' ><img src='" + imgSrc + "' ></img></a>";
				}	
			}					
			//the name link
			if(this.hasChilds){
				this.result[this.result.length]="<a  id='" + thirdImg + "' herf='"+this.nodeData.url+"' target='"+this.nodeData.target+"' onclick=\""+ selectNode + foldCallback  + "\"  class='unSelected' >" + this.nodeData.name + "</a>";	
			}else{
				this.result[this.result.length]="<a  id='" + thirdImg + "' herf='"+this.nodeData.url+"' target='"+this.nodeData.target+"' onclick=\""+ selectNode + pageCallback + "\"  class='unSelected' >" + this.nodeData.name + "</a>";
			}				
	},
	drawLinksOnlyname:function(){
			var openOrClose=this.nodeName+".openOrClose();";
			var thirdImg=this.eTree.treeName+"-third-"+this.nodeData.id;
			var selectNode=this.nodeName+".selectNode(this);";
			var foldCallback=(this.eTree.config.folderLinks)?this.nodeData.foldCallback +"("+ this.nodeName  +","+this.eTree.treeName +");":"";
			var pageCallback=(this.eTree.config.pageLinks)?this.nodeData.pageCallback +"("+ this.nodeName  +","+this.eTree.treeName +");":"";
			if(this.hasChilds){
				this.result[this.result.length]="<a  id='" + thirdImg + "' herf='"+this.nodeData.url+"' target='"+this.nodeData.target+"' onclick=\""+ openOrClose + selectNode + foldCallback  + "\"  class='unSelected' >" + this.nodeData.name + "</a>";	
			}else{
				this.result[this.result.length]="<a  id='" + thirdImg + "' herf='"+this.nodeData.url+"' target='"+this.nodeData.target+"' onclick=\""+ openOrClose + selectNode + pageCallback + "\"  class='unSelected' >" + this.nodeData.name + "</a>";
			}				
	},
	drawChilds:function(){
			this.result[this.result.length]="<div class='childs'>"	
			var cl=(this.nodeData.isOpen==true)?"open":"close";	
			this.result[this.result.length]="<ul id='"+ this.eTree.treeName+"-"+ this.nodeData.id +"' class='"+ cl +"'>";
			var len=this.nodeData.childs.length;
			for(var i=0; i<len; i++){							
				this.result[this.result.length]="<li>";
				var child=this.nodeData.childs[i];									
				if(i==len-1){child.isLast=true;}						
				var parent=this;				
				this.result[this.result.length]=new EasyNode(child,parent,this.eTree,this.depth+1).getHTML();				
				this.result[this.result.length]="</li>";
			}
			this.result[this.result.length]="</ul>";
			this.result[this.result.length]="</div>";	
	},
	openOrClose:function(type){		
			this.nodeData.isOpen=(this.nodeData.isOpen==true)?false:true;	
			var ulId=this.nodeData.id;				
			var ul=$(this.eTree.treeName+"-"+ulId);			
		  	if(ul){ul.className=(this.nodeData.isOpen==true)?"open":"close";}	
			var src=null;
			if(this.eTree.config.useLines&&this.depth!=0){
				if(this.nodeData.isOpen){
					src=(this.nodeData.isLast==true)?this.eTree.icon.minusBottom:this.eTree.icon.minus;				
				}else{
					src=(this.nodeData.isLast==true)?this.eTree.icon.plusBottom:this.eTree.icon.plus;
				}			
			}else{
				src=(this.nodeData.isOpen)?this.eTree.icon.nlMinus:this.eTree.icon.nlPlus;
			}
			var firstImg=$(this.eTree.treeName+"-first-"+ulId);	
			if(firstImg){firstImg.innerHTML="<img src='"+ src +"'>";}							
			var secondImg=$(this.eTree.treeName+"-second-"+ulId);			
			src=(this.nodeData.isOpen==true)?this.nodeData.iconOpen:this.nodeData.iconClose;				
			if(secondImg&&!(this.depth==0&&this.eTree.config.especialRoot)){secondImg.innerHTML= "<img src='"+ src +"'>";}
			//alert(type);
			if(typeof type=="undefined"&&this.eTree.config.closeSameLevel){
				var node=this;
				this.eTree.closeSameLevel(node);
			};
			if(typeof type!="undefined"&&type=="openTo"&&this.eTree.config.closeSameLevel){
				var node=this;
				this.eTree.closeSameLevel(node);
			}	
	},
	openTo:function(){
			var parentNode=this.parent;
			if(parentNode!=""){
		  		parentNode.nodeData.isOpen=false;//not false because  the function openOrClose will change the state 
	  			parentNode.openOrClose("openTo");
	  			parentNode.openTo();
  			}
	},
	selectNode:function(elm){		
			if(this.eTree.config.useSelection){			
				var oldSid=this.eTree.treeName+ "-third-" + this.eTree.selectedId;			
				if($(oldSid)){$(oldSid).className="unSelected"};
				elm.className="Selected";
			}
			this.eTree.selectedId=this.nodeData.id;		
			this.isSelected=true;						
	},
	getHTML: function(){
			return this.result.join("\n");
	}
}
var EasyTree=Class.create();
EasyTree.prototype = {
  initialize: function(treeData,parent,config,treeName) {
  	this.treeName=treeName;	
	this.parent=parent;
	this.treeData = treeData;
	this.result=[];	
	this.nodes={};
	this.depth=0;
    this.config = Object.extend({
     target: "_blank",
     showMode: "1",		
   	 especialRoot:true,	
	 folderLinks: true,
	 folderCallback:"",
	 pageLinks:true,
	 pageCallback:"",
	 useSelection: true,
	 useCookies: true,
	 useLines: true,
	 useIcons: true,
	 onlyName:false,
	 closeSameLevel: false 
    },config||{});
	this.selectedId=null;
	this.icon = {
		root				: 'img/base.gif',
		folderClose			: 'img/folder.gif',
		folderOpen	: 'img/folderopen.gif',
		page				: 'img/page.gif',
		empty				: 'img/empty.gif',
		line				: 'img/line.gif',
		join				: 'img/join.gif',
		joinBottom	: 'img/joinbottom.gif',
		plus				: 'img/plus.gif',
		plusBottom	: 'img/plusbottom.gif',
		minus				: 'img/minus.gif',
		minusBottom	: 'img/minusbottom.gif',
		nlPlus			: 'img/nolines_plus.gif',
		nlMinus			: 'img/nolines_minus.gif'
	};
	this.draw();	
  },  
  draw:function(){
  	var eTree=this;  
	this.treeData.isFirst=true;
	this.treeData.isLast=true;
	if(this.parent!=""){this.depth=this.parent.depth+1;}
	this.result[this.result.length]=new EasyNode(this.treeData,this.parent,eTree,this.depth).getHTML();	
  },
  closeSameLevel:function(eNode){	
  	var node=null;
  	for(var nodeId in this.nodes){
  		node=this.nodes[nodeId];
  		if(nodeId!=eNode.nodeData.id&&node.depth==eNode.depth&&node.hasChilds){
  			node.nodeData.isOpen=true;//not false because  the function openOrClose will change the state 
  			node.openOrClose("closeSameLevel");
  		}
  	}
  },
  openTo:function(nodeID){
  	var node=null;
  	var parentNode=null;
  	for(var nodeId in this.nodes){
  		node=this.nodes[nodeId];  		
  		if(nodeID==node.id){  			
			node.openTo();
  		}
  	}			
  },
  getHTML:function(){
	return this.result.join("\n");
  },
  toString:function(){
	return this.result.join("\n");
  }
    
}