tree.js

javascript tree树型控件。代码很少.提供示例

/**
 * @author jinqiang679 [e-mail]
 */
var exTree={
	nodeprototype:{
		config:{nodetag:'div',line_space:'nodeblank.gif',line_none:'nodeline.gif',
		line_enditem:'nodelast.gif',line_item:'node.gif',line_endexpanded:'nodemlast.gif',
		line_expanded:'nodem.gif',line_endcollapse:'nodeplast.gif',line_collapse:'nodep.gif',
		icon_folderclosed:'folderclosed.gif',icon_folderopend:'folderopen.gif',icon_file:'doc.gif'},
		nodes:[],
		newElement: function(tagname, attrs,content){
			var tret = document.createElement(tagname);
			if (attrs){
				for (var i in attrs) {
					tret.setAttribute(i, attrs[i]);
		 		}/*for IE compatible ....*/}
			if(content){
				tret.appendChild(document.createTextNode(content));}
			return tret;
	 	},
		newtreeimg:function(esrc,eid){
			if(!eid){
				return this.newElement("img",{src:this.config[esrc],"class":"icon"});
			}
			return this.newElement("img",{src:this.config[esrc],"class":"icon",id:this.id+eid,onclick:"exTree.nodeprototype.onnodeclick('"+this.id+"')"});
		},
	 	newtreetag:function(eid){
			return this.newElement(this.config.nodetag,{id:eid});
		},
		renderhead:function(){
			var headele=document.getElementById(this.id + 'h');
			if (headele){
				headele.innerHTML='';//clear
				this.isexpanded&=this.childs.length>0;
				this.renderspace(headele);this.renderline(headele);this.rendericon(headele);this.renderdata(headele);
			}
	  	},
		renderdata:function(headele){
			headele.innerHTML+=this.data;
		},
		rendericon:function(dest){
			dest.appendChild(this.newtreeimg(!this.isfolder?"icon_file":this.isexpanded?"icon_folderopend":"icon_folderclosed"));
		},
		renderspace:function(dest,nocur){
			var parentnode=this.nodes[this.parentid];
			if (parentnode) {
				parentnode.renderspace(dest, true);
	  		}
			if (nocur) {
				dest.appendChild(this.newtreeimg(this.isend?"line_space":"line_none"));
			}
		},
		renderline:function(dest){
			this.isfolder=this.isfolder||this.childs.length>0;var parentnode=this.nodes[this.parentid];
			dest.appendChild(this.newtreeimg(this.isfolder?this.isexpanded?this.isend?"line_endexpanded":"line_expanded":this.isend?"line_endcollapse":"line_collapse":this.isend?"line_enditem":"line_item",true));
		},
		createnode:function(){
			var pele=document.getElementById(this.parentid+'i');
			if(!pele){//
				var p=document.getElementById(this.parentid);
				if (p) {
					pele=this.newtreetag(this.parentid + 'i');
					p.appendChild(pele);
				}
			}
			if (pele) {
				var thisele=this.newtreetag(this.id);
				thisele.appendChild(this.newtreetag(this.id+'h'));
				pele.appendChild(thisele);
			}
		},
		setexpanded:function(exp){
			this.isexpanded=!!exp?exp:!this.isexpanded;
			var i=document.getElementById(this.id+'i');
			if(i){
				i.style.display=this.isexpanded?'':'none';
			}
			this.renderhead();
		},
		onnodeclick:function(nodeid){
			var n=this.nodes[nodeid];
			if(n){
				if(n.childs.length>0){
					n.setexpanded();
				}else{
					this.onloadnode(n);
				}
			}
		},
		rerender:function(){
			this.renderhead();
			for(var i in this.childs){
				this.nodes[this.childs[i]].rerender();
			}
		},
		onloadnode:function(n){}
	},
	getnode:function(nodeid){
		return this.nodeprototype.nodes[nodeid];
	},
	foreachnode:function(fun){
		for(var i in this.nodes){
			fun(this.nodes[i]);
		}
	}
}
exTree.treenode=function(parentid,id,data,depth,isfolder){
	this.isend=true;this.id=id;this.isfolder=!!isfolder;this.isexpanded=true;this.data=data;this.childs=[];this.parentid=parentid;this.nodes[this.id]=this;this.createnode();
	this.add=function(childdata,isfolder){
		var childid=this.id+'_'+this.childs.length;
		this.childs.push(childid);
		var c= new exTree.treenode(this.id,childid,childdata,this.depth+1,isfolder);
		if (this.childs.length > 1) {
			this.nodes[this.childs[this.childs.length - 2]].isend = false;
			this.nodes[this.childs[this.childs.length - 2]].renderhead();
		}
		this.isexpanded=true;
		this.renderhead();
		return c;
	};
};
exTree.treenode.prototype=exTree.nodeprototype;
// add style .icon{vertical-align:middle}
(function(){
	//direct
	document.write("<style>.icon{vertical-align:middle</style>");
})();