copy of easytree.js

做的一个数列表的例子

var EasyNode=Class.create();
EasyNode.prototype = {
	initialize:function(nodeData,parent,eTree,depth){	
			this.nodeName=eTree.treeName+".nodes['"+ nodeData.id + "']";//very important 1
			var defaultNodeData={						
						isLast:false,
						isSelected:false,
						isOpen:false,
						hasChilds:false,
						iconOpen:eTree.icon.folderOpen,
						iconClose:eTree.icon.folderClose,
						target:eTree.config.target,
						url:'#',						
						foldCallback:eTree.config.foldCallback,
						childCallback:eTree.config.childCallback
					 };
		  	Object.extend(defaultNodeData,nodeData);
			this.depth=depth;
			this.nodeData=defaultNodeData;
			if(this.nodeData.childs){this.nodeData.hasChilds=true;}
			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.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'>";
			this.drawImgs();
			this.drawA();
			this.result[this.result.length]="</div>";
			if(this.nodeData.childs){
				this.drawChilds();	
			}
			this.result[this.result.length]="</div>";
	},
	drawImgs:function(){			
			var openOrClose=this.nodeName+".openOrClose();";
			var firstImg="first-"+this.nodeData.id;
			var secondImg="second-"+this.nodeData.id;	
			if(this.depth>1){
				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]="<img src='" + this.eTree.icon.line + "'   ></img>";
			}
			var imgSrc=null;
			//+(plus) -(minus) and the join	
			if(this.depth!=0){
				if(this.nodeData.hasChilds){
					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{	
					imgSrc=(this.nodeData.isLast==true)?this.eTree.icon.joinBottom:this.eTree.icon.join;
					this.result[this.result.length]="<img src='" + imgSrc + "' ></img>";					
				}			
			}										
			//the second folder img	
			if(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.nodeData.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>";
			}
	},
	drawA:function(){
				var selectNode=this.nodeName+".selectNode();";
				var foldCallback=this.nodeData.foldCallback +"("+ this.nodeName  +","+this.eTree.treeName +");";
				var childCallback=this.nodeData.childCallback +"("+ this.nodeName  +","+this.eTree.treeName +");";				
				if(this.nodeData.childs){
					this.result[this.result.length]="<a  herf='"+this.nodeData.url+"' target='"+this.nodeData.target+"' onclick=\""+ selectNode + foldCallback  + "\"  >" + this.nodeData.name + "</a>";	
				}else{
					this.result[this.result.length]="<a  herf='"+this.nodeData.url+"' target='"+this.nodeData.target+"' onclick=\""+ selectNode + childCallback + "\"  >" + 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.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(){		
		this.nodeData.isOpen=(this.nodeData.isOpen==true)?false:true;	
		var ulId=this.nodeData.id;				
		var ul=$(ulId);			
	  	if(ul){ul.className=(this.nodeData.isOpen==true)?"open":"close";}
	  	if(this.depth==0){return true;}			
		var firstImg=$("first-"+ulId);
		var src=null;
		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;
		}
		firstImg.innerHTML="<img src='"+ src +"'>";			
		var secondImg=$("second-"+ulId);		
		src=(this.nodeData.isOpen==true)?this.nodeData.iconOpen:this.nodeData.iconClose;				
		secondImg.innerHTML= "<img src='"+ src +"'>";	
	},
	selectNode:function(){		
		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: true,
   	 showRoot:false,	
	 folderLinks: true,
	 useSelection: true,
	 useCookies: true,
	 useLines: true,
	 useIcons: true,
	 useStatusText: false,
	 closeSameLevel: false,
	 inOrder: 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();	
  },
  getHTML:function(){
	return this.result.join("\n");
  },
  toString:function(){
	return this.result.join("\n");
  }
    
}