filelist.js

网页上经常会用到的树状结构源代码,模拟文件夹方式,采用ajax方式动态加载数据,避免一次性加载带来的数据量过大的效率问题.

	if(null == this.label){
		var o = document.createElement("SPAN");
		var t = document.createTextNode(this.title + this.ext);
		o.appendChild(t);
		o.className = this.className + "Label";
		if(1 == this.status){
			o.className += " RED";
		}
		else if(2 == this.status){
			o.className += " GRAY";
		}
		this.label = o;
		o = t = null;
		this.label.instance = this;
		this.filelist.element.appendChild(this.label);
		this.label.style.visibility = "hidden";
		if(this.label.scrollWidth > this.element.offsetWidth){
			this.label.style.width = this.element.offsetWidth + "px";
		}
		else{
			this.label.style.marginLeft = ((this.element.offsetWidth - this.label.scrollWidth) / 2 ) + "px";
		}
	}
	var o = this.element.label;
	this.label.style.position = "absolute";
	this.label.style.top = (this.element.offsetTop + o.offsetTop )+ "px";
	this.label.style.left = (this.element.offsetLeft + o.offsetLeft) + "px";
	if(_moz_){
		this.label.style.top = (this.element.offsetTop + o.offsetTop - this.filelist.element.scrollTop)+ "px";
		this.label.style.left = (this.element.offsetLeft + o.offsetLeft - this.filelist.element.scrollLeft) + "px";
	}
	this.label.style.visibility = "visible";
}
RayeFileListItemIcon.prototype._onblur = RayeFileListItemIcon.prototype.onblur;
RayeFileListItemIcon.prototype.onblur = function(){
	this._onblur();
	if(this.label){
		this.label.style.visibility = "hidden";
	}
}
function RayeFileListItemThumb(o, filelist){
	this.RayeFileListItem = RayeFileListItem;
	this.RayeFileListItem(o, filelist);
	this.viewType = "Thumb";
	this.className += "Thumb";
	this.label = null;
	this.element = RayeFileListItemThumb.createElement(this.title,
	this.internalCode, this.ext, this.bigIcon, this.status);
	this.element.instance = this;
	this.element.className = this.className;
	this.element.label = this.element.getElementsByTagName("SPAN").item(0);
}
RayeFileListItemThumb.createElement = function(title, ic, ext, icon, status){
	var retval = document.createElement("A");
	var div = document.createElement("DIV");
	var img = document.createElement("IMG");
	var span = document.createElement("SPAN");
	if(1 == status){
		span.className = "RED";
	}
	else if(2 == status){
		span.className = "GRAY";
	}
	var t = document.createTextNode(_ellipsis(title, ext, ic, 31));
	span.appendChild(t);
	img.src = icon;
	div.appendChild(img);
	retval.appendChild(div);
	retval.appendChild(span);
	return retval;
}
RayeFileListItemThumb.prototype = new RayeFileListItemIcon;
RayeFileListItemThumb.prototype.showThumb = function(x, y){
	if(-1 != x){
		var ratio = x / y;
		if(x > y){
			var iw = 100;
			var ih = 100 / ratio;
			var it = Math.ceil((100 - ih) / 2);
		}
		else{
			var ih= 100;
			var iw = 100 * ratio;
			var it = 0;
		}
		var img = this.element.getElementsByTagName("IMG").item(0);
		img.style.display = "none";
		img.src = this.thumbUrl;
		img.style.margin = "0px";
		img.style.top = it + "px";
		img.style.width = iw + "px";
		img.style.height = ih + "px";
		img.style.display = "";
	}
}
function RayeFileListItemDetail(o, filelist){
	if(o){
		this.RayeFileListItem = RayeFileListItem;
		this.RayeFileListItem(o, filelist);
		this.viewType = "Detail";
		this.className += "Detail";
		this.label = null;
		this.element = RayeFileListItemDetail.createElement(this.title,
		this.internalCode, this.ext, o.smallIcon, this.status, o, filelist.sortBy);
		this.element.instance = this;
		this.element.label = this.element.getElementsByTagName("TD").item(0);
	}
}
RayeFileListItemDetail.createElement = function(title, ic, ext, icon, status, o, sb){
	var retval = document.createElement("TR");
	var img = document.createElement("IMG");
	var nobr = document.createElement("NOBR");
	var td = document.createElement("TD");
	td.className = "s1"
	if(1 == status){
		td.className += " RED";
	}
	else if(2 == status){
		td.className += " GRAY";
	}
	var t = document.createTextNode(_ellipsis(title, ext, ic, 31));
	td.appendChild(nobr)
	nobr.appendChild(img);
	img.src = icon;
	nobr.appendChild(t);
	retval.appendChild(td);
	td.title = o.descript;
	td = null;
	td = document.createElement("TD");
	td.className = "s2";
	td.cacelCatch = 1;
	if(o.size){
		var span=document.createElement("SPAN");
		span.innerHTML = formatSize(o.size);
		td.appendChild(span);
	}
	else{
		if(o.userData && o.userData.fs){
			var span=document.createElement("SPAN");
			span.innerHTML = "(" + o.userData.rs + ")";
			td.appendChild(span);
		}
	}
	retval.appendChild(td);
	td = null;
	td = document.createElement("TD");
	td.className = "s3";
	td.cacelCatch = 1;
	if(o.userData && o.userData.cn){
		var span=document.createElement("SPAN");
		span.innerHTML = o.userData.cn;
		td.appendChild(span);
	}
	retval.appendChild(td);
	td = null;
	td = document.createElement("TD");
	td.cacelCatch = 1;
	td.className = "s4";
	if(o.userData && o.userData.ct){
		var span=document.createElement("SPAN");
		span.innerHTML = formatDate(o.userData.ct);
		td.appendChild(span);
	}
	retval.appendChild(td);
	return retval;
}
RayeFileListItemDetail.prototype = new RayeFileListItem;
RayeFileListItemDetail.prototype.showEdit = function(){
	if(null == this.input){
		var o = document.createElement("TEXTAREA");
		var t = document.createTextNode(this.title);
		o.appendChild(t);
		o.className = this.className + "Input";
		this.input = o;
		o = t = null;
		this.input.instance = this;
		this.filelist.element.appendChild(this.input);
		this.input.style.visibility = "hidden";
		this.input.style.width = (this.element.label.offsetWidth - 22) + "px";
		this.input.style.height = this.element.label.offsetHeight - 4;
	}
	else{
		var o = this.input;
		while(this.input.firstChild){
			this.input.removeChild(this.input.firstChild);
		}
		var t = document.createTextNode(this.title);
		o.appendChild(t);
	}
	this.onblur();
	var o = this.element.label;
	this.input.style.position = "absolute";
	this.input.style.top = (this.element.offsetTop + o.offsetTop + 2)+ "px";
	this.input.style.left = (this.element.offsetLeft + o.offsetLeft + 22 ) + "px";
	this.input.style.overflow = "hidden";
	this.input.style.border = "1px solid black";
	this.input.style.textAlign = "left";
	this.input.style.visibility = "visible";
	this.input.onselectstart = this.input.onselect = function(e){
		if(!e){
			e = event;
		}
		e.cancelBubble = true;
		return true;
	};
	var oThis = this;
	this.input.focus();
	this.input.select();
	var submited = false;
	var editFinish = function(submit){
		if(submited == false){
			submited = true;
		}
		else{
			return;
		}
		var t = oThis.title;
		if(submit){
			var reg = /\\|\/|<|>|\?|\*|\||\"|\:/g
			if(reg.test(oThis.input.value)){
				alert("文件名中不能包含以下特殊字符:\n\\/<>?*|\":");
				t = "";
			}
			else{
				t = oThis.input.value;
			}
		}
		if(oThis.filelist.eventListener.onedit){
			oThis.filelist.eventListener.onedit(oThis, t);
		}
		oThis.input.style.visibility = "hidden";
	}
	this.input.onkeydown = function(e){
		if(!e){
			e = event;
		}
		switch(e.keyCode){
			case 13://ENTER
			editFinish(true);
			return false;
			break;
			case 27://ESC
			editFinish(false);
			return false;
			break;
		}
		return true;
	}
	this.input.onblur = function(){
		if(!submited){
			editFinish(true);
		}
	}
}
RayeFileList.getReal = function(o){
	var e = o;
	while(null != e && "undefined" == typeof e.cacelCatch
	&&"undefined" == typeof e.instance){
		e = e.parentNode;
	}
	return e;
}
RayeFileList.eventHandlers ={
	getEvent:	function (e, el){
		if (!e){
			if (el){
				e = el.document.parentWindow.event;
			}
			else{
				e = window.event;
			}
		}
		if (!e.srcElement){
			var el = e.target;
			while (el != null && el.nodeType != 1)
			el = el.parentNode;
			e.srcElement = el;
		}
		if (typeof e.offsetX == "undefined"){
			e.offsetX = e.layerX;
			e.offsetY = e.layerY;
		}
		return e;
	},
	lastClicked:0,
	getDocument:	function (e){
		if (e.target)
		return e.target.ownerDocument;
		return e.srcElement.document;
	},
	onmousedown: function(e){
		e = RayeFileList.eventHandlers.getEvent(e,this);
		var el = RayeFileList.getReal(e.srcElement);
		var srcInstance = el.instance;
		var listInstance = this.instance;
		var b = e.button;
		if(_moz_ && 0 == e.button){
			b = 1;
		}
		var m = listInstance.multiSelect;
		if(srcInstance && "fileItem" == srcInstance.type){
			if(1 == b){
				if(!(e.shiftKey || e.ctrlKey)){
					listInstance.item.select(srcInstance.index);
					listInstance.lastClickedIndex = srcInstance.index;
				}
				else if(e.ctrlKey){
					listInstance.item.toggle(srcInstance.index, m);
					listInstance.lastClickedIndex = srcInstance.index;
				}
				else if(e.shiftKey){
					listInstance.item.selectRange(listInstance.lastClickedIndex, srcInstance.index);
				}
			}
			else if(2 == b){
				if(!e.ctrlKey){
					if(!listInstance.item.isSelected(srcInstance.index)){
						listInstance.item.select(srcInstance.index);
					}
					listInstance.lastClickedIndex = srcInstance.index;
				}
			}
		}
		else{
			if(16 >= e.offsetX || e.srcElement.offsetWidth - 16 <= e.offsetX){
				return;
			}
			if(!(e.ctrlKey || e.shiftKey)){
				listInstance.item.select(-1);
			}
		}
		listInstance.eventListener.onselectchange();
	},
	ondblclick:function(e){
		e = RayeFileList.eventHandlers.getEvent(e,this);
		var el = RayeFileList.getReal(e.srcElement);
		if(el.instance && "fileItem" == el.instance.type){
			var fl = this.instance;
			if("function" == typeof fl.eventListener.ondblclick
			&& el.instance.index == fl.item.selectedIndex[0]){
				fl.eventListener.ondblclick(el.instance);
			}
		}
	}
}
function formatSize(n){
	var l2 = Math.ceil((n.toString().length - 3) / 3);
	var p = ["字节","K","M","G"];
	var s2 = (n / Math.pow(1024,l2)).toString().substr(0,4);
	if("." == s2.substr(3)) s2 = s2.substr(0,3);
	return s2 + p[l2];
}
function _n_int(num, n){
	var s = String(num);
	var l = s.length;
	if(n > l){
		var o = n - l;
		for(var i = 0;i < o;i ++) s = "0" + s;
	}
	return s;
}
function formatDate(n){
	var d = new Date(Number(n) * 1000);
	return d.getYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日 " +
	_n_int(d.getHours(), 2) + ":" + _n_int(d.getMinutes(), 2) + ":" +
	_n_int(d.getSeconds(), 2);
}
function _ellipsis(str, ext, ic,l){
	ext = String(ext);
	str = str + ext;
	var s = String(ic);
	if(s.length + ext.length * 2 <= l * 2) return str;
	var retval = "";
	var c = 0;
	var sl = s.length;
	for (var i = 0;i < l - 3;i ++){
		if(i * 2 + 2 > sl){
			var t = "00";
		}
		else{
			var t = s.substr(i * 2,2).toUpperCase();
		}
		if(t > "7F"){
			if(i == l - 4){
				break;
			}
			i ++;
			retval += str.substr(c,1);
		}
		else{
			retval += str.substr(c,1);
		}
		c ++;
	}
	retval += "...";
	return retval;
}