可编辑的 HTML JavaScript 表格控件 DataGrid
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
/*
*====================================================================================================================
*/
//定义全局的表格行列值
var col = 5;
var row = 2;
//currRowIndex 选定行
var currRowIndex = 0;
//表单域数组(这部分作废)-----------------
var elementNames = new Array(col);
var k = 0;
for(k=0;k
elementNames[k] = k;
//---------------------------------------
//标题头数组
var headers = new Array(col);
for(k=0;k
{
headers[k] = "第" + k + "列";
}
//columnPropertys : 装载要创建的列读写属性
var colPropertys = new Array(col)
for(k=0;k<10;k++)
colPropertys[k] = 1;
colPropertys[0] = 0;
//colDefaultValues : 代表每次增加行的时候需要装入的默认值
var colDefaultValues = new Array(col);
for(k=0;k
{
if(k%2==0)
colDefaultValues[k] = "o";
else
colDefaultValues[k] = "j"; //代表这个不是默认值
}
//dataArray : 需要修改的数据集,修改之前预先装入,供用户参考
var dataArray = new Array(row*col);
var m=0,n=0;
for(m=0;m { for(n=0;n { dataArray[m*col + n] ="array(" + m + "," + n + ")"; //注意这里代表2维数组 } } /* *==================================================================================================================== */ var oPopup = window.createPopup(); //创建一个公共的可编辑的表格 //参数: // formName : 表单名 // action : 代表当前要执行的提交动作 : 1:add 2:del 3:modefy 4:query // formAction : 表格对应Form的Action // tableId :表格ID // colNum:表单列数目 // rowNum:初始表格的行数目 function CreateTable(formName,action,formAction,tableId,colNum,rowNum) { var startStr = new String(""); var endStr = new String(""); var colStr = new String(""); startStr = "
startStr += "
//创建用来获取最后表格输出数据的隐藏域
var hiddens = CreateHiddens(colNum,action);
endStr += hiddens;
endStr += "";
//输出表格
//document.forms(0).elements("t").value = (startStr + colStr + endStr);
document.write(startStr + colStr + endStr);
}
function CreateHiddens(cols,action)
{
var str = new String("");
var i=0;
for(i=0;i { str +=""; } str+=""; return str; } function createTrs(colNum,rowNum) { var colStr = new String(""); var i = 0; var j = 0; colStr += " //创建表头行 colStr += " colStr += "序号"; colStr += " for(i=1;i<=colNum;i++) { colStr += " colStr += headers[i-1]; colStr += " } //创建表体行 for(i=0;i { colStr += " colStr += "onDblClick=\"ChangeInput(this);\" "; //表格行中的事件支持部分 colStr += "onBlur=\"ResetTR(this);\" >"; //创建每行的所有单元格 colStr += " colStr += i+1; colStr +=" for(j=1;j<=colNum;j++) { colStr += " colStr += dataArray[i*colNum+j-1]; colStr +=" } colStr +=" } return colStr; } //把某行转变为输入状态 function ChangeInput(objTR) { var str = new String(""); var i = 0; for(i=1;i { str = "
//装入默认值 if(colDefaultValues[i-1]=="j") //j代表该列不能装入默认值 str += "value=\"" + objTR.cells[i].innerText + "\""; else//否则装入默认值 str += "value=\"" + colDefaultValues[i-1] + "\""; //控制控件的读写属性 if(colPropertys[i-1] == 0) { str += " disabled "; } str += "/>"; objTR.cells[i].innerHTML = str; } objTR.ondblclick=doNothing; //使行保持原始状态 } //把行恢复为非输入状态 function ResetTR(objTR) { var str = new String(""); var i = 0; for(i=0;i { var objChild; var tmpStr = ""; tmpStr = objTR.cells[i].innerHTML; //里面包含控件 if(objTR.cells[i].firstChild!=undefined && objTR.cells[i].firstChild.value!=undefined) { tmpStr = objTR.cells[i].firstChild.value; if(tmpStr=="") tmpStr = " " objTR.cells[i].innerHTML = tmpStr + " "; continue; } //里面不包含控件 if(tmpStr==" " || tmpStr=="") { if(objTR.cells[i].innerHTML!="") tmpStr += objTR.cells[i].innerHTML; else tmpStr += " "; } objTR.cells[i].innerHTML = tmpStr; if(objTR.cells[i].innerHTML=="") objTR.cells[i].innerHTML=" "; } } //对表格指定列进行排序 function orderTB(objTB,index,type){ for(var i=1;i<(objTB.rows.length-1);i++){ for(var j=i+1;j var tmp1,tmp2; if(objTB.rows[j].cells[index].firstChild.value==undefined) tmp1 = objTB.rows[j].cells[index].innerText; else tmp1 = objTB.rows[j].cells[index].firstChild.value; if(objTB.rows[i].cells[index].firstChild.value==undefined) tmp2 = objTB.rows[i].cells[index].innerText; else tmp2 = objTB.rows[i].cells[index].firstChild.value; if(tmp1>tmp2) { objTB.moveRow(j,i); } } } } function orderTb1(objTD,type) { var objTR =objTD.parentElement; var objTable = objTR.parentElement; var colIndex = objTD.cellIndex; orderTB(objTable,colIndex); } //在表格末尾增加一行 function InsertRow(tableId) { var objTable = document.getElementById(tableId); var col = objTable.cells.length/objTable.rows.length; var row = objTable.rows.length; var objRow = objTable.insertRow(); //增加行 var i = 0; //取得最大序号 var max1 = 1; for(i=1;i { var tmpMax = 1; if(parseFloat(objTable.rows[i].cells[0].innerText) > parseFloat(objTable.rows[i+1].cells[0].innerText)) { tmpMax = parseFloat(objTable.rows[i].cells[0].innerText); } else { tmpMax = parseFloat(objTable.rows[i+1].cells[0].innerText); } if(tmpMax>=max1) max1= tmpMax; } for(i=1;i<=col;i++) { var objCell = objRow.insertCell(); objRow.cells[0].innerText = parseFloat(max1)+1; objCell.innerHTML = " "; objCell.onmouseover = Td_MouseOver_Handle; objCell.onmouseout = Td_MouseOut_Handle objRow.cells[0].onclick = TD_Click_Handle; objRow.cells[0].onmouseover = doNothing; objRow.cells[0].onmouseout = doNothing; } //为新增的行提供事件绑定支持 //objRow.attachEvent('ondblclick', dblClick_Handle); objRow.ondblclick = dblClick_Handle; objRow.onblur = click_Handle; } //删除最后1行 function DeleteRow(tableId) { var objTable = document.getElementById(tableId); if(objTable.rows.length==1) { alert("对不起,你不能删除表格头!!!"); return; } if(confirm("确定删除?")) { objTable.deleteRow(); } } //选定指定行 function SelectRow(objTD) { var objTR =objTD.parentElement; var objTable = objTR.parentElement; for(var i=1;i objTable.rows[i].cells[0].bgColor = "#ffffff"; objTD.bgColor="#ff0000"; currRowIndex = objTR.rowIndex; } //删除指定的行 function DeleteOneRow(tableId,rowIndex) { var objTable = document.getElementById(tableId); var objTable = document.getElementById(tableId); if(objTable.rows.length==1 || rowIndex==0) { alert("对不起,你首先必须选择要删除的行!!!"); return; } if(confirm("确定删除?")) { objTable.deleteRow(rowIndex); currRowIndex = 0; } else { for(var i=1;i { objTable.rows[i].cells[0].bgColor = "#ffffff"; currRowIndex = 0; } } } //鼠标选择指定列 function TD_Click_Handle() { SelectRow(this) } //鼠标移入事件支持 function Td_MouseOver_Handle() { this.bgColor = "#00ccff"; } //鼠标移出事件支持 function Td_MouseOut_Handle() { this.bgColor = "#ffffff"; } //鼠标双击事件支持 function dblClick_Handle() { ChangeInput(this);// 切换到输入状态 this.ondblclick=doNothing; } //鼠标单击事件支持 function click_Handle() { ResetTR(this); } //保持行的原始状态 function doNothing() { return; } function showTip(msg) { with (oPopup.document.body) { style.backgroundColor="lightyellow"; style.border="solid black 1px"; style.fontSize = 12; innerHTML=msg; } oPopup.show(event.x, event.y, 95, 16, document.body); } function hideTip() { if(oPopup!=undefined) oPopup.hide(); } //==============================格式化字符串函数(删除前后空格)======================================================== function trim(str) { var tmpStr = new String(str); var startIndex = 0,endIndex = 0; for(var i=0;i { if(tmpStr.charAt(i)==" ") { continue; } else { startIndex = i; break; } } for(var i=tmpStr.length;i>=0;i--) //注意开始最大下标必须减1 { if(tmpStr.charAt(i-1)==" ") { continue; } else { endIndex = i; break; } } tmpStr = tmpStr.substring(startIndex,endIndex); return tmpStr; } //==================================================================================================================== //submit 方法 function getData(tableId,form) { var objTable = document.getElementById(tableId); var cols = objTable.cells.length/objTable.rows.length-1; var rows = objTable.rows.length-1; //为每个隐藏域设置值 var i=0,j=0; for(i=1;i<=cols;i++) { for(j=1;j<=rows;j++) { if(objTable.rows[j].cells[i].firstChild.value==undefined) { document.forms(form).elements("col" + i).value += trim(objTable.rows[j].cells[i].innerText); } else document.forms(form).elements("col" + i).value += trim(objTable.rows[j].cells[i].firstChild.value); document.forms(form).elements("col" + i).value += "#"; } } document.forms(form).submit(); } //==================================================================================================================== CreateTable('specForm','1','sub.jsp','tableId',col,row);"
";
";
";
";";
";
";
";

