xtree.js

来自「JS-异步加载树」· JavaScript 代码 · 共 1,427 行 · 第 1/3 页

			else{
				img.src=treeConfig.iIcon;
			}
			//divText.appendChild(img);			
			divText.insertAdjacentElement("afterBegin",img);
			foo=foo.parent;
		}
		var plusIcon=document.createElement("img"); 
		plusIcon.id=this.id +"-plus"
		if(this.Nodes.length ==0){			//如果已经是叶子			
			if(this.parent.Nodes[this.parent.Nodes.length-1] == this){
				plusIcon.src=treeConfig.lIcon;
			}
			else{
				plusIcon.src=treeConfig.tIcon;
			}
		}
		else{ //如果不是叶子
			
			plusIcon.src=treeConfig.lPlusIcon;
		}
		plusIcon.onclick="treeHandler.toggle(this)";
		plusIcon.align="absmiddle";
		
		divText.appendChild(plusIcon);
		
		var folderIcon=document.createElement("img");
		folderIcon.align="absMiddle";
		folderIcon.id=this.id +"-node-image";
		if(this.Image){ //判断是否启动自定义图标
			folderIcon.src=this.Image;
		}
		else{
			if(this.Nodes.length ==0){
				folderIcon.src=treeConfig.fileIcon;
			}
			else{
				folderIcon.src=treeConfig.folderIcon;
			}
		}
		divText.appendChild(folderIcon);
	}
	
	var text=document.createElement("span");
	text.id=this.id+"-text-anchor";
	text.onmouseover="treeHandler.hover(this)";
	text.onmouseout="treeHandler.restore(this)";	
	text.onfocus="treeHandler.focus(this)";
	text.onkeydown="return treeHandler.keycode(this,event)";
	//text.onclick="treeHandler.select(this)";
	
	text.onmousedown="treeHandler.select(this);treeHandler.mousedown(this,event)";
	text.onmousemove="treeHandler.mousemove(this,event)";
	text.onmouseup="treeHandler.mouseup(this,event)";
	text.oncontextmenu="treeHandler.contextmenu(this,event)";
	text.onblur="treeHandler.blur(this)";
	text.tabIndex=1;
	text.innerText=this.Text;
	
	text.className=treeConfig.css_ItemText;
	divText.appendChild(text);


	return divText.outerHTML+ divContainer.outerHTML;
}

TreeItem.prototype.add=function(oItem){
	var c=this.Nodes.length;	
	this.Nodes[c]=oItem;
	oItem.parent=this;
	if(this.Nodes.length>=2){
		this.Nodes[this.Nodes.length -2]._last=false;
	}	
	
	oItem._last=true;
	oItem._set_level(this.level +1);
	
	if(this._root().rendered){
		this._showParent();
	}
	//update ui
	
	
	if(this.rendered){		
		this.rendered=false;
		this.expand();
	}	
	if(this.parent && this.parent.rendered){ //界面上已经显示
		if(this.open){
			document.getElementById(this.id +"-plus").src=treeConfig.lMinusIcon;
		}
		else{
			document.getElementById(this.id +"-plus").src=treeConfig.lPlusIcon;
		}
		//如果使用了自定义icon,则不改变
		if(!this.Image){
			document.getElementById(this.id +"-node-image").src=treeConfig.folderIcon;
		}		
		this.expand();
	}
	
}
TreeItem.prototype.remove=function(){

	this._remove();
	if(this.parent && this.parent.Nodes.length==0){ //没有子节点
		var tmp=document.getElementById(this.parent.id +"-node-image");
		if (tmp) tmp.src=treeConfig.fileIcon;
		var tmp=document.getElementById(this.parent.id +"-container");
		if(tmp) tmp.style.display="none";
	}
	var p=this.parent;
	
	if(p.Nodes.length >0 ){
		var pre=p.Nodes[p.Nodes.length-1];		
		pre._last=true;
		
		if(pre.rendered) pre.rerender();
		if(pre.open){	
			pre.expand();
			
		}
	}
}

TreeItem.prototype.setCaption=function(vCaption){
	if(vCaption){
		this.Text=vCaption;		
		var tmp=document.getElementById(this.id+"-text-anchor");
		if(tmp){
			tmp.innerHTML=vCaption;
		}
	}
}
TreeItem.prototype.rerender=function(){
	this.rendered=false;
	for(var i=0;i<this.Nodes.length;i++){
		this.Nodes[i].rerender();
	}
}
TreeItem.prototype._remove=function(){
	if(this==treeHandler.selected) treeHandler.selected=null;
	for(var i=this.Nodes.length-1;i>=0;i--){
		this.Nodes[i]._remove();
	}
	for(var i=0;i<this.parent.Nodes.length;i++){
		if(this==this.parent.Nodes[i]){
			for(j=i;j<this.parent.Nodes.length;j++){
				this.parent.Nodes[j]=this.parent.Nodes[j+1];
			}
			this.parent.Nodes.length-=1;
			break;
		}
	}
	treeHandler.all[this.id]=null;
	var tmp = document.getElementById(this.id);
	if (tmp) { tmp.parentNode.removeChild(tmp); }
	tmp = document.getElementById(this.id + '-container');
	if (tmp) { tmp.parentNode.removeChild(tmp); }
}
TreeItem.prototype._set_level=function(iLevel){
	this.level=iLevel;
	if(this.Nodes.length>0){
		for(var i=0;i<this.Nodes.length;i++){
			this.Nodes[i]._set_level(iLevel + 1);
		}
	}
}

TreeItem.prototype.unselect=function(){
	var oSelected=treeHandler.selected;
	if(oSelected !=null) {
		var oDiv=document.getElementById(treeHandler.selected.id +"-text-anchor");
		if(oDiv!=null){
			oDiv.className=treeConfig.css_ItemText;
		}
		else{
			return;
		}
	}
	else{
		return;
	}
	var root=this._root();
	if(root.onUnSelected){ //定义了处理函数
		if(typeof root.onUnSelected=="function"){
			root.onUnSelected(treeHandler.selected);
		}
		else{
			eval(root.onUnSelected);
		}
	}
}
TreeItem.prototype.select=function(){
	if(treeHandler.selected==this) {
		var div=document.getElementById(this.id +"-text-anchor");
		div.className=treeConfig.css_ItemTextSelected;
		return;
	};
	if(treeHandler.selected){
		treeHandler.selected.unselect();
	}	
	var div=document.getElementById(this.id +"-text-anchor");	
	treeHandler.selected=this;	
	if(div!=null){
		div.className=treeConfig.css_ItemTextSelected;
		div.focus();
	}
	window.status =this.Text;
	var root=this._root();
	if(root.onSelected){
		if(typeof root.onSelected=="function"){
			root.onSelected(this);
		}
		else{
			eval(root.onSelected);
		}
	}
	
	
}

TreeItem.prototype.blur=function(){
	if(treeHandler.selected==this){
		var txt=document.getElementById(this.id +"-text-anchor");
		if(txt){
			txt.className=treeConfig.css_ItemTextSelectedNofocus;
		}
	}
}
///////////////////////////////////////
//开始拖动
///////////////////////////////////////
TreeItem.prototype.startDrag=function(e){
	if(!treeConfig.allowDrag) return;
	//var label=document.getElementById(this.id+"-text-anchor");
	var label=e.srcElement;
	label.setCapture();
	
	var tip=document.createElement("span");	
	tip.className=treeConfig.css_ItemDragTooltip;
	tip.innerText=this.Text;
	tip.style.left=e.clientX +document.body.scrollLeft +label.offsetWidth -e.offsetX;
	tip.style.top=e.clientY +document.body.scrollTop +label.offsetHeight -e.offsetY;
	document.body.appendChild(tip);
	
	this._startX=e.clientX;
	this._startY=e.clientY;	
	this._dragTooltip=tip;
	
}


//处理拖动
TreeItem.prototype.Draging=function(e){
	if(!treeConfig.allowDrag) return;
	if(this._dragTooltip){	
		var tip=this._dragTooltip;
		var vX= parseInt(e.clientX) - parseInt(this._startX);
		var vY= parseInt(e.clientY) - parseInt(this._startY);
		tip.style.left=parseInt(tip.style.left) + vX;
		tip.style.top=parseInt(tip.style.top) +vY;
		
		this._startX=e.clientX;
		this._startY=e.clientY;
		
		var el=document.elementFromPoint(e.clientX,e.clientY);
		
		if(el ==document.getElementById(this.id +"-text-anchor")) return;
		if(this._OverObject && this._OverObject !=el){
			this._OverObject.className=treeConfig.css_ItemText;
		}		
		
		if(el.tagName=="SPAN"){
			this._OverObject=el;
			el.className=treeConfig.css_ItemDragingOver;
		}
		else{
			this._OverObject=null;
		}
		
	}
}
//完成拖动
TreeItem.prototype.endDrag=function(e){	
	if(!treeConfig.allowDrag) return;
	//if(!this._OverObject) return;
	var label=document.getElementById(this.id +"-text-anchor");
	if(label){
		label.releaseCapture();
		document.body.removeChild(this._dragTooltip);
	}
	this._dragTooltip=null;
	if(this._OverObject){
		var root=this._root();
		if(root.onDrag){			
			var eSrc=treeHandler.all[this.id];
			var eTo=treeHandler.all[this._OverObject.id.replace("-text-anchor","")];
			root.onDrag(eSrc,eTo);//触发事件
		}
	}	

	
}

TreeItem.prototype._root=function(){
	if(!this.parent){
		return this;
	}
	else{
		return this.parent._root();
	}
}
TreeItem.prototype.toggle=function(){
	if(this.open){
		this.collapse();
	}
	else{	
		this.expand();
	}
}

TreeItem.prototype.expand=function(){
	
	if(this.Nodes.length==0) return;
	
	var subCon=document.getElementById(this.id +"-container")
	
	
	if(!this.rendered){	//判断是否生成了html
		var sHTML="";
		for(var i=0;i<this.Nodes.length;i++){
			sHTML+=this.Nodes[i].toString();
		}		
		subCon.innerHTML=sHTML;		
		this.rendered=true;
	}	
	
	//var ft=subCon.style.filters[0];
	/*
	if(ft){
		ft.apply();
		subCon.style.display="block";
		ft.play();
	}
	else{
		subCon.style.display="block";
	}
	*/
	
	subCon.style.display="block";
	if(this.level>0){
		document.getElementById(this.id +"-plus").src=(this._last?treeConfig.lMinusIcon:treeConfig.tMinusIcon);
	}
	this.open=true;
	var tmp=document.getElementById(this.id +"-node-image")
	if(tmp) {	
		if(this.Image){  //启动自定义图标
			if(this.OpenImage){
				tmp.src=this.OpenImage;
			}
		}
		else{
			tmp.src=treeConfig.openFolderIcon;
		}
	}
	//调用自定义事件
	var root=this._root();
	if(root.onExpand){
		if(typeof root.onExpand=="function"){
			root.onExpand(this);
		}
		else{
			eval(root.onExpand);
		}
	}
	
}

TreeItem.prototype.collapse=function(){
	if (this.Nodes.length==0) return;
	if(this.level>0){		
		document.getElementById(this.id +"-plus").src=(this._last?treeConfig.lPlusIcon:treeConfig.tPlusIcon);
	}
	document.getElementById(this.id +"-container").style.display ="none";	
	this.open=false;
	var tmp=document.getElementById(this.id +"-node-image")
	if(tmp) {	
		if(this.Image){
			tmp.src=this.Image;
		}
		else{
			tmp.src=treeConfig.folderIcon;
		}
	}
	var root=this._root();
	if(root.onCollapse){
		if(typeof root.onCollapse=="function"){
			root.onCollapse(this);
		}
		else{
			eval(root.onCollapse);
		}
	}
}

TreeItem.prototype.collapseAll=function(){
	this.collapse();
	this.collapseChildren();
}

TreeItem.prototype.collapseChildren=function(){
	for(var i=0;i<this.Nodes.length;i++){
		this.Nodes[i].collapseAll();
	}
}
TreeItem.prototype.expandAll=function(){	
	this.expand();	
	this.expandChildren();
}
TreeItem.prototype.expandChildren=function(){
	for(var i=0;i<this.Nodes.length;i++){
		this.Nodes[i].expandAll();
	}
}

TreeItem.prototype.getFirst=function(){
	return this.Nodes[0];
}
TreeItem.prototype.getLast=function(){
	
	if(this.Nodes.length >0 && this.open){		
		return this.Nodes[this.Nodes.length-1].getLast();		
	}
	else{
		return this;
	}
}
TreeItem.prototype.getPreviousSibling=function(b){
	if(this.parent){
		for(var i=0;i<this.parent.Nodes.length;i++){
			if(this==this.parent.Nodes[i]) {
				break;
			}
		}
		
		if(i==0){
			return this.parent;
		}
		else{
			
			if(this.parent.Nodes[i-1].Nodes.length >0){		
				
				return this.parent.Nodes[i-1].getLast();
			}
			else{
				
				return this.parent.Nodes[i-1];
			}
		}
	}
	else{
		return this;
	}
}
TreeItem.prototype.getNextSibling=function(b){		
	if (!b){		
		if(this.Nodes.length >0 && this.open){
			return this.getFirst();
		}
	}
	if(this.parent){
		for(var i=0;i<this.parent.Nodes.length;i++){
			if(this==this.parent.Nodes[i]) {
				break;
			}