dynatable.js

一个用JavaScript写的动态表格！可控制各列的读写权限

var DeleteMassage = "确定删除这一行吗？"; //.................................................................删除行之前的提示消息！
var deleteColTitle = "删除"; //............................................................................“删除图标”列的列名！（表格最右上角）

//设置 默认值
var BlankCellEnabled = false; //..........................................................................空的单元格始终可以编辑！
var ReadOnly = false; //..................................................................................表格是否为只读！
var allowSelect = true; //................................................................................表格内容是否允许选择！
var imgpath = ""; //......................................................................................图片
var splitString = "┋"; //.................................................................................分割符

var tabls=new Array();
var nams=new Array();
var sort=new Array(2);
sort[0]=new Array();
sort[1]=new Array();
var draggg=-1;
var dragggn=0;
var glbOptions=new Array();

var div = null;
function initialize(){
	div = document.getElementById(docDivName);
}

function displaydrag(e){
	if(draggg!=-1){
		if(document.getElementById("draggroww")==null){
			res="<table visible=\"false\" class=\"tableclass\" style=\"position:absolute\" id=\"draggroww\"><tr class=\"rowclass\" ><td class=\"cellclass\">"+draggg+"</td>";
			for(j=0;j<tabls[dragggn][draggg].length;j++){
				res+="<td class=\"cellclass\">"+tabls[dragggn][draggg][j]+"</td>";
			}
			res+="</tr></table>";
			document.getElementById(nams[dragggn]).innerHTML+=res;
		}
		document.getElementById("draggroww").style.left = (window.Event) ? (e.pageX+10) : (event.clientX+10);
		document.getElementById("draggroww").style.top = (window.Event) ? (e.pageY+10) : (event.clientY+10);
	}
}

function createTable(hc,df,it,idd){
	tabls[nams.length]=new Array();
	tabls[nams.length][0]=new Array();
	tabls[nams.length][1]=new Array();
	tabls[nams.length][2]=new Array();
	for(i=0;i<hc.length;i++){
		tabls[nams.length][0][i]=hc[i];
		tabls[nams.length][1][i]=df[i];
	}
	if(it.length!=0){
		for(i=0;i<hc.length;i++){
			tabls[nams.length][2][i]=it[i];
		}
	}
	sort[0][nams.length]=-1;

	var tempS = document.getElementById(tabls[nams.length][1][0]).value;
	var s=document.getElementById(tabls[nams.length][1][0]).value.split(splitString);
	if(tempS != ""){
		for(j=0;j<s.length;j++){
			tabls[nams.length][tabls[nams.length].length]=new Array();
			tabls[nams.length][tabls[nams.length].length-1][0]=s[j];
		}
		for(i=1;i<tabls[nams.length][1].length;i++){
			s=document.getElementById(tabls[nams.length][1][i]).value.split(splitString);
			for(j=0;j<s.length;j++){
				tabls[nams.length][j+3][i]=s[j];
			}
		}
	}
	nams[nams.length]=idd;
	redraw(nams.length-1);
}

function appendRecord(rec,idd){
	i=0;
	while(nams[i]!=idd){
		i++;
	}
	tabls[i][tabls[i].length]=new Array();
	for(j=0;j<rec.length;j++){
		tabls[i][tabls[i].length-1][j]=rec[j];
	}
	sort[0][i]=-1;
	redraw(i);
}

function removeRecord(ind,idd){
	i=0;
	while (nams[i]!=idd){
		i++;
	}
	if((ind+"").toUpperCase()=="ALL"){
		tabls[i].length=3;
	}else if((ind+"").toUpperCase()=="LAST"){
		if(tabls[i].length>3)
			tabls[i].length=tabls[i].length-1;
	}else{
		ind+=3;
		if (ind<tabls[i].length){
			for(j=ind+1;j<tabls[i].length;j++){
				tabls[i][j-1]=tabls[i][j];
			}
			tabls[i].length=tabls[i].length-1;
		}
	}
	redraw(i);
}

function sortTable(num,i){
	sort[0][i]=num;
	if(sort[1][i]!="down"){
		for(j=3;j<(tabls[i].length-1);j++){
			for(k=tabls[i].length-2;k>=j;k--){
				if (tabls[i][k][num]>tabls[i][k+1][num]){
					swap=tabls[i][k];
					tabls[i][k]=tabls[i][k+1];
					tabls[i][k+1]=swap;
				}
			}
		}
		sort[1][i]="down";
	}else{
		for(j=3;j<(tabls[i].length-1);j++){
			for(k=tabls[i].length-2;k>=j;k--){
				if (tabls[i][k][num]<tabls[i][k+1][num]){
					swap=tabls[i][k];
					tabls[i][k]=tabls[i][k+1];
					tabls[i][k+1]=swap;
				}
			}
		}
		sort[1][i]="up";
	}
	redraw(i);
}

function dragg(i,num){
	draggg=i;
	dragggn=num;
	document.onmousemove=displaydrag;
}

function dropp(num,i){
	if((num!=draggg)&&(draggg!=-1)){
		swap=tabls[i][draggg];
		tabls[i][draggg]=tabls[i][num];
		tabls[i][num]=swap;
		sort[0][i]=-1;
		redraw(i);
	}
	document.onmousemove=null;
	draggg=-1;
}

function changeRecord(k,l,val,i){
	tabls[i][k][l]=val;
	if((sort[0][i]!=-1)&&(sort[1][i]==l)){
		if(sort[1][i]=="up"){
			sort[1][i]="down";
		}else{
			sort[1][i]="up";
		}
		sortTable(l,i);
	}else{
		redraw(i);
	}
}

function redraw(num){
	if(allowSelect == true){
		res="<table class=\"tableclass\"><tr class=\"headerrowclass\" ><td class=\"headercellclass\" width=\"1%\">&nbsp;</td>";
	}else{
		res="<table class=\"tableclass\" style=\"-moz-user-select: none\" OnSelectStart=\"javascript: event.returnValue=false;\"><tr class=\"headerrowclass\" ><td class=\"headercellclass\" width=\"1%\">&nbsp;</td>";
	}
	for(i=0;i<tabls[num][0].length;i++){
		if(!(tabls[num][2][i] == "hide" || (ReadOnly == true && readOnlyHide[i] == true))){
			if(sort[0][num]!=i)
				res+="<td class=\"headercellclass\" align=\"center\" width=\""+ColWidths[i]+"\" onclick=\"sortTable("+i+","+num+")\" >"+tabls[num][0][i]+"</td>";
			else
				res+="<td class=\"headercellclass\" align=\"center\" width=\""+ColWidths[i]+"\" onclick=\"sortTable("+i+","+num+")\" >"+tabls[num][0][i]+" <img class=\"sortimage\" src=\"" + imgpath + "sort."+sort[1][num]+".gif\" /></td>";
		}
	}
	if(ReadOnly == false){
		res+="<td class=\"headercellclass\" align=\"center\" style=\"word-break:keep-all\">"+deleteColTitle+"</td>";
	}
	res+="</tr>";
	for(i=3;i<tabls[num].length;i++){
		res+="<tr class=\"rowclass\" height=\"23\"><td class=\"cellclass\" align=\"center\">"+(i-2)+"</td>";
		for(j=0;j<tabls[num][i].length;j++)
			if(!(tabls[num][2][j] == "hide" || (ReadOnly == true && readOnlyHide[j] == true))){
				if(ReadOnly == false && (ColEnabled[j]==true || (tabls[num][i][j]=="" && BlankCellEnabled==true)))
					res+="<td class=\"cellclass\" onclick=\"redrawed("+i+","+j+","+num+")\">"+tabls[num][i][j].replace(/\n/gi,"<br>")+"&nbsp;</td>";
				else
					res+="<td class=\"cellclass_lock\">"+tabls[num][i][j].replace(/\n/gi,"<br>")+"&nbsp;</td>";
			}
		if(ReadOnly == false)
			res+="<td class=\"cellclass_edit\" align=\"center\" onclick=\"rmrow("+(i-3)+",'" + nams[num] + "')\" ><img src=\"" + imgpath + "rm.gif\"></td>";
		res+="</tr>";
	}
	res+="</table>";
	document.getElementById(nams[num]).innerHTML=res;
	for(j=0;j<tabls[num][0].length;j++){
		res="";
		for(i=3;i<tabls[num].length;i++){
			if(i!=(tabls[num].length-1))
				res+=tabls[num][i][j]+splitString;
			else
				res+=tabls[num][i][j];
		}
	document.getElementById(tabls[num][1][j]).value=res;
	}
}

function redrawed(k,l,num){
	if(tabls[num][2].length!=0){
		if(allowSelect == true){
			res="<table class=\"tableclass\"><tr class=\"headerrowclass\"><td class=\"headercellclass\" width=\"1%\">&nbsp;</td>";
		}else{
			res="<table class=\"tableclass\" style=\"-moz-user-select: none\"><tr class=\"headerrowclass\"><td class=\"headercellclass\" width=\"1%\">&nbsp;</td>";
		}
		for(i=0;i<tabls[num][0].length;i++){
			if (!(tabls[num][2][i] == "hide" || (ReadOnly == true && readOnlyHide[i] == true))){
				if (sort[0][num]!=i){
					res+="<td class=\"headercellclass\" align=\"center\" width=\""+ColWidths[i]+"\" onclick=\"sortTable("+i+","+num+")\">"+tabls[num][0][i]+"</td>";
				}else{
					res+="<td class=\"headercellclass\" align=\"center\" width=\""+ColWidths[i]+"\" onclick=\"sortTable("+i+","+num+")\">"+tabls[num][0][i]+" <img class=\"sortimage\" src=\"" + imgpath + "sort."+sort[1][num]+".gif\"></td>";
				}
			}
		}
		if(ReadOnly == false){
			res+="<td class=\"headercellclass\" align=\"center\" style=\"word-break:keep-all\">"+deleteColTitle+"</td>";
		}
		res+="</tr>";
		for(i=3;i<tabls[num].length;i++){
			res+="<tr class=\"rowclass\" height=\"23\"><td class=\"cellclass\" align=\"center\">"+(i-2)+"</td>";
			for(j=0;j<tabls[num][i].length;j++){
				if((i==k)&&(j==l)){
					if (tabls[num][2][j]=="text"){
						res+="<td class=\"cellclass_edit\"><input class=\"inputtextclass\" id=\""+nams[num]+"eddd\" type=\"text\" value=\""+tabls[num][i][j]+"\" onkeypress=\"if(event.keyCode==13)event.returnValue=false;\" onblur=\"changeRecord("+i+","+j+",this.value,"+num+")\"></td>";
					}else if(tabls[num][2][j]=="number"){
						res+="<td class=\"cellclass_edit\"><input class=\"inputnumberclass\" id=\""+nams[num]+"eddd\" type=\"text\" value=\""+tabls[num][i][j]+"\" onkeypress=\"if((event.keyCode<48||event.keyCode>57)&&event.keyCode!=46)event.returnValue=false;\" onblur=\"changeRecord("+i+","+j+",this.value,"+num+")\"></td>";
					}else if(tabls[num][2][j]=="select"){
						val=glbOptions[tabls[num][1][j]];
						res+="<td class=\"cellclass_edit\"><select class=\"selectclass\" id=\""+nams[num]+"eddd\" onblur=\"changeRecord("+i+","+j+",this.value,"+num+")\">";
						for(t=0;t<val.length;t++){
							if(val[t]==tabls[num][i][j]){
								res+="<option value=\""+val[t]+"\" selected>"+val[t]+"</option>";
							}else{
								res+="<option value=\""+val[t]+"\">"+val[t]+"</option>";
							}
						}
						res+="</select></td>";
					}else if(tabls[num][2][j]=="select_only"){
						val=glbOptions[tabls[num][1][j]];
						res+="<td class=\"cellclass_edit\"><select class=\"selectclass\" id=\""+nams[num]+"eddd\" onblur=\"changeRecord("+i+","+j+",this.value,"+num+")\">";
						s=false;
						for(t=0;t<val.length;t++){
							r=false;
							for(k=3;k<tabls[num].length;k++){
								if (val[t]==tabls[num][k][j]&&i!=k){
									r=true;
								}
							}
							if(val[t]==tabls[num][i][j]&&r==false){
								res+="<option value=\""+val[t]+"\" selected>"+val[t]+"</option>";
								s=true;
							}else if(r==false){
								res+="<option value=\""+val[t]+"\">"+val[t]+"</option>";
							}
						}
						if(s==true){
							res+="<option value=\"\"></option>";
						}else{
							res+="<option value=\"\" selected></option>";
						}
						res+="</select></td>";
					}else if(tabls[num][2][j]=="textarea"){
						var tempTextareaRow = 1;
						try{
							tempTextareaRow=tabls[num][i][j].match(/\n/ig).length+1;
						}catch(e){ }
						res+="<td class=\"cellclass_edit\"><textarea class=\"textareaclass\" rows=\""+tempTextareaRow+"\" id=\""+nams[num]+"eddd\" onblur=\"changeRecord("+i+","+j+",this.value,"+num+")\">"+tabls[num][i][j]+"</textarea></td>";
					}
				}else{
					if(!(tabls[num][2][j] == "hide" || (ReadOnly == true && readOnlyHide[j] == true))){
						if(ReadOnly == false && (ColEnabled[j]==true || (tabls[num][i][j]=="" && BlankCellEnabled==true))){
							res+="<td class=\"cellclass\">"+tabls[num][i][j].replace(/\n/gi,"<br>")+"&nbsp;</td>";
						}else{
							res+="<td class=\"cellclass_lock\">"+tabls[num][i][j].replace(/\n/gi,"<br>")+"&nbsp;</td>";
						}
					}
				}
			}
			if(ReadOnly == false){
				res+="<td class=\"cellclass_edit\" align=\"center\"><img src=\"" + imgpath + "rm.gif\"></td>";
			}
			res+="</tr>";
		}
		res+="</table>";
		document.getElementById(nams[num]).innerHTML=res;
		document.getElementById(nams[num]+"eddd").focus();
		if(tabls[num][2][l] == "text" || tabls[num][2][l] == "number" || tabls[num][2][l] == "textarea"){
			document.getElementById(nams[num]+"eddd").select();
		}
	}
}

function rmrow(i,tblId){
	if (confirm(DeleteMassage)){
		removeRecord(i,tblId);
	}
}