treeview.js

javascript+xml树带ur功能 很好用的

/**  
**    ==================================================================================================  
**    ClassName  ：treeview
**    ==================================================================================================  
**/ 
	function treeview(id,path,check,drag){
		var me			= this;
		var target		= null;
		this.nodes		= new node("root","roottag").nodes;
		this.id			= id?id:"";
		this.icon		= true;
		this.selected	= null;
		this.path		= path?path:"";
		this.selected	= null;
		this.dragTo		= null;
		this.dragFrom	= null;
		this.drag		= drag?true:false;
		this.check		= check?true:false;

		var icons = {
			root	:'root.gif',
			open	:'open.gif',
			close	:'close.gif',
			file	:'file.gif',
			rplus	:'rplus.gif',
			rminus	:'rminus.gif',
			join	:'t.gif',
			joinbottom:'l.gif',
			jointop	:'r.gif',
			plus	:'tplus.gif',
			plusbottom:'lplus.gif',
			minus	:'tminus.gif',
			minusbottom:'lminus.gif',
			blank	:'blank.gif',
			line	:'I.gif'
		};

		this.Ficons = {};

		for(i in icons){
			this.Ficons[i]= new Image()
			this.Ficons[i].src= path + "/" + icons[i];
		}

		this.create		= function(oTarget){	
			if(oTarget){
				for(var i=0;i<this.nodes.length;i++){	
					oTarget.appendChild(this.nodes.items[i].toString(me));
				}
				target = oTarget;
			}
		}
		this.add = function(oo){
			this.insert(this.nodes.length,oo);
		}
		this.insert = function(index,oo){
			if(index>=0&&index<=this.nodes.length){
				var pre = null;
				if(index<this.nodes.length){
					pre = this.nodes.items[index].baseNode;
				}

				this.nodes.insert(index,oo);			
				if(target){
					if(index==this.nodes.length){
						target.appendChild(oo.toString());
					}else{
						if(pre){
							target.insertBefore(oo.toString(),pre);
						}
					}
				}
			}
		}
	}

	//event
	treeview.prototype.onnodeclick		= function(sender){return false;}
	treeview.prototype.onnodeexpand		= function(sender){}
	treeview.prototype.onnodecollapse	= function(sender){}
	treeview.prototype.onnodedblclick	= function(sender){sender.toggle();return false;}
	treeview.prototype.onnodeafteredit	= function(sender,oldstr){}
	treeview.prototype.onnodebeforeedit = function(sender,oldstr,newstr){}
	treeview.prototype.onnodedrag		= function(from,to){}
	treeview.prototype.onnodekeydown	= function(sender,e){		
		var e=e||event;
		switch(e.keyCode){
			case 61:	//fx +
			case 187:	//=
			case 107:	//number +
				sender.expand();
				break;
			case 109:	//number -
			case 189:	//-
				sender.collapse();
				break;
			case 38:	//up				
				if(sender.previous()){
					sender.previous().select();
				}else{
					if(sender.parent&&sender.parent.level>=0){
						sender.parent.select();
					}
				}
				break;
			case 40:	//down				
				if(sender.next()){
					sender.next().select();
				}
				break;
			case 37:	//left				
				if(sender.parent&&sender.parent.level>=0){
					sender.parent.select();
				}
				break;
			case 39:	//right				
				if(sender.firstChild()){
					sender.firstChild().select();
				}else{
					if(sender.next()){
						sender.next().select();
					}					
				}
				break;
		}
	}
	treeview.prototype.onnodemousedown	= function(sender,e){}
	treeview.prototype.onnodemouseup	= function(sender,e){}
	treeview.prototype.oncontextmenu	= function(sender){}
	treeview.prototype.onnodecheck		= function(sender){}
	treeview.prototype.onselectchange	= function(before,after){}
	treeview.prototype.onnodeclick = function(sender){
			//alert("caption:" + sender.caption + ",id:" + sender.id + ",deepth:" + sender.level + ",tag:" + sender.tag);
			//alert("islast:" + sender.isLast +",indent:" + sender.indent);		
//			alert(sender.baseNode.outerHTML);
			return false;
		}
		
	treeview.prototype.onnodecheck = function(sender){alert(sender.caption + " selected:" + sender.checked);}
	treeview.prototype.onselectchange = function(before,after){
		//	if(before)
		//		alert(before.caption + "," + after.caption);
		//	else
		//		alert(after.caption);
		}

//		treeview.prototype.onnodekeydown = function(sender,e){var e = event||e;alert(e.keyCode);}
   treeview.prototype.onnodedrag		= function(from,to){
			to.moveToChild(from);
		}


/**  
**    ==================================================================================================  
**    ClassName  ：node
**    ==================================================================================================  
**/
	function node(caption,title,url,target,tag,callback,check){
		var me		= this;
		this.nodes	= new nodes();
//		this.id		= getid();
		this.caption= caption;
		this.title	= title?title:caption;
		this.parent = null;
		this.tag	= tag?tag:"";
		this.loaded = false;		
		this.level  = -1;
		this.isLast = false;
		this.opened = false;
		this.showed = false;
		this.checked= check?true:false;
		this.indent	= [];
		this.action =url?url:"";

		
		var contol		= null;	
		this.container	= document.createElement("div");

		this.baseNode	= null;
		this.handleNode	= null;
		this.folderNode = null;
		this.textNode	= null;
		this.checkNode	= null;

		//get the id by rand
		function getid(){
			var a = Math.random() + "";
			var b = Math.random() + "";
			var c = Math.random() + "";
			var d = Math.random() + "";

			return a.substr(2,8) + "-" + b.substr(2,8) + "-" + c.substr(2,8) + "-" + d.substr(2,8);			
		}
		//node collection
		function nodes(){
			var n = [];
			//get the lenght of the collection
			this.length = {valueOf:function(){return n.length;},toString:function(){return n.length;}}

			this.toString = function(){
				  return n.toString();
			}	
			//insert a node at index
			this.insert = function(index,oo){
				if(index>=0&&index<=n.length){
					var ol = n.length;
			
					oo.parent = me;
					oo.level  = me.level+1;
					
					if(index>=n.length){
						oo.isLast = true;
						if(n.length>0){
							n[n.length-1].isLast = false;
							n[n.length-1].setIndent(n[n.length-1].level,n[n.length-1].isLast);
							n[n.length-1].refresh(0);
						}
					}else{
						oo.isLast = false;
					}
					oo.indent	= me.indent.concat();
					oo.indent[oo.indent.length]=oo.isLast;

					if(oo.nodes.length>0){
						refreshchildindent(oo);
					}

					function refreshchildindent(node){
						for(var i=0;i<node.nodes.length;i++){
							node.nodes.items[i].indent = node.indent.concat();
							node.nodes.items[i].indent[node.nodes.items[i].indent.length] = node.nodes.items[i].isLast;
							if(node.nodes.items[i].nodes.length>0){
								arguments.callee(node.nodes.items[i]);
							}
						}
					}

					if(me.loaded){			
						if(index==n.length){
							me.container.appendChild(oo.toString());
						}else{
							var pre = n[index].baseNode;
							if(pre){
								me.container.insertBefore(oo.toString(),pre);
							}
						}
					}
					n.splice(index,0,oo);
					if(ol==0){						
						me.refresh(0);
					}
				}
				return me;
			}
			//add a node after the last node
			this.add = function(oo){		
				return this.insert(n.length,oo);
			}
			//remove a node by node
			this.remove = function(node){
				if(node){
					for(var i=0;i<n.length;i++){
						if(n[i] ==node){
							this.removeAt(i);
						}
					}
				}
			}
			//remove a node at index
			this.removeAt = function(index){
				if(index>=0&&index<n.length){					
					if(index>0&&index==n.length-1){
						n[index-1].isLast = true;
						n[index-1].setIndent(n[index-1].level,n[index-1].isLast);
					}
					n[index].nodes.removeChildren();

					var c = n[index];
					if(c.showed){
						if(control){
							if(c==control.selected){
								if(index>0){
									control.selected = c.previous();
								}else{
									control.selected = c.next();
								}
								if(!control.selected){
									if(c.parent.level>=0){
										control.selected = c.parent;
									}									
								}
								if(control.selected)control.selected.select();
							}
						}
						var oNode = c.baseNode;
						if (oNode) {oNode.parentNode.removeChild(oNode); }
					}
					n.splice(index,1);			
					
					if(n.length>0){
						var o = n[n.length-1];
							o.isLast = true;
							o.setIndent(o.level,o.isLast);

						if(o.showed){o.refresh(0);}
					}else{
						me.loaded = false;
						me.opened = false;
						me.container.style.display = "none";
						me.refresh(0);
					}					
				}
			}				
			this.removeChildren = function (){
				for(var i=n.length-1;i>=0;i--){
					var o = me.nodes.items[i];
						o.nodes.removeChildren();
					if(o.showed){
						if(control){
							if(o==control.selected){
								control.selected = this;
							}
						}
						var oNode = me.baseNode;
						if (oNode) {oNode.parentNode.removeChild(oNode); }
					}
				}