filelist.js

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

//o:filist的container
//bMs:filist中的item是否能够被多选
/*
fileinfo = {
  title:"",
  ext:"",
  size:"",
  bigIcon:"",
  smallIcon:"",
  detail:"",//split by \n
  internalCode:"",
  createTime:"",
  userData:""
  
}

reg = /\\\/<>\?\*\|\"\:/g
*/
function RayeFileList(o, bMs){
	this.element = o;
	this.element.instance = this;
	this.element.onmousedown = RayeFileList.eventHandlers.onmousedown;
	this.element.ondblclick = RayeFileList.eventHandlers.ondblclick;
	this.multiSelect = bMs || false;
	this.item = new RayeItemCollection();
	this.type = "filelist";
	this.viewType = "";
	this.lastClickedIndex = -1;
	this.element.onselectstart = this.element.onselect = function(){
		return false;
	}
	this.imageQueue = new RayeImageQueue();
	this.eventListener ={
		onselectchange:function(){
		}
		,
		ondblclick:null,
		onedit:null
	};
	var oThis = this;
	this.extentSort = function(){
	};
	this.specialConfig = Array();
	this.specialConfig["Detail"] ={
		userData: new Object,
		init:function(){
			this.userData.orgElement = oThis.element;
			var e = oThis.element;
			var table = document.createElement("TABLE");
			table.className = "fileItemDetail";
			table.cellPadding = table.cellSpacing = "0px";
			var hd = document.createElement("THEAD");
			var cnt = document.createElement("TBODY");
			var t ={
				internalCode:"", size:"", createTime:""
			};
			hd.className = "fileItemDetailHead";
			cnt.className = "fileItemDetailContent";
			var tr = document.createElement("TR");
			var th = document.createElement("TH");
			th.className = "s1";
			th.onclick=new Function("this.parentNode.parentNode.instance.extentSort('internalCode');");
			th.innerHTML = "文件名" + t.internalCode;
			tr.appendChild(th);
			th = document.createElement("TH");
			th.className = "s2";
			th.onclick=new Function("this.parentNode.parentNode.instance.extentSort('size');");
			th.innerHTML = "大小" + t.size;
			tr.appendChild(th);
			th = document.createElement("TH");
			th.className = "s3";
			th.innerHTML = "属主";
			tr.appendChild(th);
			th = document.createElement("TH");
			th.className = "s4";
			th.onclick=new Function("this.parentNode.parentNode.instance.extentSort('createTime');");
			th.innerHTML = "创建日期" + t.createTime;
			tr.appendChild(th);
			hd.appendChild(tr);
			table.appendChild(hd);
			table.appendChild(cnt);
			e.appendChild(table);
			hd.instance = oThis;
			oThis.element = cnt;
			oThis.element.instance = oThis;
		},
		restore:function(){
			var e = this.userData.orgElement;
			e.style.paddingTop = "0px";
			oThis.element = this.userData.orgElement;
			e.removeChild(e.firstChild);
		}
	}
}
RayeFileList.prototype.scrollToView = function(item){
	if(null == item) return;
	var viewArea ={
		top:this.element.scrollTop,
		bottom:this.element.scrollTop + this.element.offsetHeight
	};
	var itemArea ={
		top:item.element.offsetTop,
		bottom:item.element.offsetTop + item.element.offsetHeight
	};
	if(itemArea.top >= viewArea.top && itemArea.bottom <= viewArea.bottom){
	}
	else if(itemArea.top < viewArea.top){
		this.element.scrollTop = item.element.offsetTop;
	}
	else{
		this.element.scrollTop = itemArea.bottom - this.element.offsetHeight;
	}
}
RayeFileList.prototype.sort = function(a, b){
	var s = "var n1 = a." + this.sortBy + ";var n2 = b." + this.sortBy + ";";
	eval(s);
	if("size" == this.sortBy){
		n1 = Number(n1);
		n2 = Number(n2);
	}
	if(n1 > n2) return 1;
	if(n1 < n2) return -1;
	return 0;
}
RayeFileList.prototype.removeItem = function(idx){
	this.item.remove(idx);
}
RayeFileList.prototype.load = function(e, viewType, sortBy){
	this.sortBy = sortBy || "internalCode";
	if(viewType != this.viewType){
		if(this.specialConfig[this.viewType]){
			this.specialConfig[this.viewType].restore();
		}
		if(this.specialConfig[viewType]){
			this.specialConfig[viewType].init();
		}
	}
	this.viewType = viewType;
	var oThis = this;
	e.sort(function(a,b){
		return oThis.sort(a,b);
	});
	var el = e.length;
	for(var i = 0;i < el;i ++){
		eval("var o = new RayeFileListItem" + viewType + "( e[i], this);");
		this.item.add(o);
		this.element.appendChild(o.element);
		if(viewType == "Thumb" && "" != e[i].thumbUrl){
			this.imageQueue.addQueue(e[i].thumbUrl, RayeFileList.loadThumb, o);
		}
		o = null;
	}
	this.lastClickedIndex = -1;
	this.eventListener.onselectchange();
}
RayeFileList.loadThumb = function(item, x, y){
	var func = function(){
		if(null == item.element){
			setTimeout(func, 100);
			return;
		}
		else{
			item.showThumb(x, y);
		}
	}
	if(item){
		func();
	}
}
RayeFileList.prototype.clear = function(){
	this.element.style.visibility = "hidden";
	var l = this.item.length;
	this.imageQueue.clear();
	for(var i = 0;i < l; i ++){
		var item = this.item.item(i);
		var e = item.element;
		if(e){
			if(e.parentNode){
				var lab = item.label;
				var inp = item.input;
				if(lab) e.parentNode.removeChild(lab);
				if(inp) e.parentNode.removeChild(inp);
				e.parentNode.removeChild(e);
				inp = lab = null;
			}
			item.element = item.userData = e = null;
		}
	}
	this.item.clear();
	this.element.style.visibility = "visible";
}
RayeFileList.prototype.addEventListener = function(s,cb){
	var retval = false;
	switch(s){
		case "onselectchange":
		this.eventListener.onselectchange = cb;
		break;
		case "ondblclick":
		this.eventListener.ondblclick = cb;
		break;
		case "onedit":
		this.eventListener.onedit = cb;
		break;
		default:break;
	}
	return true;
}
RayeFileList.prototype.onresize = function(){
	var l = this.item.selectedIndex.length;
	for(var i = 0;i < l;i ++){
		var o = this.item.item(this.item.selectedIndex[i]);
		o.onblur();
		o.onselect();
	}
	o = null;
}
function RayeFileListItem(o, filelist){
	this.type = "fileItem";
	this.index = -1;
	this.element = null;
	this.viewType = "";
	this.className = "fileItem";
	if(o){
		this.filelist = filelist;
		this.title = o.title;
		this.internalCode = "";//o.internalCode;
		this.bigIcon = o.bigIcon;
		this.smallIcon = o.smallIcon;
		this.ext = "";//o.ext;
		this.size = 0;//o.size;
		this.fileSize = formatSize(this.size);;
		this.detail = o.detail;
		this.createTime = o.createTime;
		this.thumbUrl = o.thumbUrl;
		this.userData = o.userData;
		this.descript = o.descript || "";
		this.status = o.status || 0;
	}
}
RayeFileListItem.prototype.onselect = function(){
	if(null != this.element){
		this.element.className += " " + this.className + "Selected";
	}
}
RayeFileListItem.prototype.onblur = function(){
	if(null != this.element){
		this.element.className = this.className;
	}
}
RayeFileListItem.prototype.onindexchange = function(n){
	this.index = n;
}
RayeFileListItem.prototype.destroy = function(){
	var e = this.element;
	if(e){
		if(e.parentNode){
			var l = this.label;
			var i = this.input;
			if(l) e.parentNode.removeChild(l);
			if(i) e.parentNode.removeChild(i);
			e.parentNode.removeChild(e);
			i = l = null;
		}
		this.element = this.userData = e = null;
	}
}
function RayeFileListItemIcon(o, filelist){
	if(o){
		this.RayeFileListItem = RayeFileListItem;
		this.RayeFileListItem(o, filelist);
		this.viewType = "Icon";
		this.className += "Icon";
		this.label = null;
		this.input = null;
		this.element = RayeFileListItemIcon.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);
		if("" != this.descript){
			this.element.title = this.descript;
		}
	}
}
RayeFileListItemIcon.createElement = function(title, ic, ext, icon, status){
	var retval = document.createElement("A");
	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, 21));
	span.appendChild(t);
	img.src = icon;
	retval.appendChild(img);
	retval.appendChild(span);
	return retval;
}
RayeFileListItemIcon.prototype = new RayeFileListItem;
RayeFileListItemIcon.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";
		if(this.input.scrollWidth > this.element.offsetWidth){
			this.input.style.width = this.element.offsetWidth + "px";
		}
		else{
			this.input.style.marginLeft = ((this.element.offsetWidth - this.label.scrollWidth) / 2 ) + "px";
		}
		this.input.style.height = this.element.label.offsetHeight;
	}
	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)+ "px";
	this.input.style.left = (this.element.offsetLeft + o.offsetLeft) + "px";
	this.input.style.overflow = "hidden";
	this.input.style.border = "1px solid black";
	this.input.style.textAlign = "center";
	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);
		}
	}
}
RayeFileListItemIcon.prototype._onselect = RayeFileListItemIcon.prototype.onselect;
RayeFileListItemIcon.prototype.onselect = function(){
	this._onselect();