客户端实现类似于DataGrid的输入表格控件

在aspx中，当使用DataGrid提交数据时，客户每输入一条记录，就会向服务端提交一次数据，所以当提交数据较多时，效率就会很低，如果在客户端将这些数据"打包"，再上传到服务端，这样就可以一次上传多条数据。所以基本思路就是在客户端获取所有的输入数据，将数据转换成以逗号分隔的字符串，将字符串传到服务器，在服务端将字符串拆成数组(用split函数)，再写入数据库中。所有，提交到服务器只有一次。

这个控件还有一些缺陷:

删掉一行数据时，可能使IE死掉。只能在写在网页中，不能写成js文件后再引用，可能是代码中包含了window.alert方法，我想这个问题是可以解决的，如果有哪位高手解决了，麻烦通知一下，谢了。还有一个解决方法，将代码写成inc文件,代码用<script>.....</script>,再引用:<!-- #include virtual="../script/ClientDataGrid.inc">,这样运行时，代码就会自动加到网页上。这个控件的功能都写再备注里，大家也可以扩展一些功能。如果有哪位高手作了改进请一定通知一下，谢了。

代码如下:

/// 客户端DataGrid

/// Author : Curllion Zhang

/// 2005-7-29

//-----------------------------------表格对象-------------------------------------------

//注意:

// 1、创建该对象时，一定要设定对象的ID值为此象的ID

// 2、如果指定了单元格的CSS，则被选中的行的CSS不起作用

function ClientDataGrid(ColCount,TitleRow,TitleRowHeigh,RowHeight,ColWidths,PostCols,InputCols,TextBoxs,Parent)

{

this.ColCount = ColCount; //列数量

this.TitleRow = new Array(ColCount); //表格标题

this.TitleRowHeigh = TitleRowHeigh; //表格标题的行高

this.RowHeight = RowHeight; //行高

this.ColWidths = new Array(ColCount); //表示列宽的数组，单位px

this.Cellspacing; //单元格间格

this.Cellpadding; //单元格空白

this.Border; //边框

this.Width; //控件宽度

this.Height; //控件高度

this.BorderColor; //表格边框颜色，文本

this.CSS; //指定CSS，文本

this.TitleCSS; //指定标题CSS

this.TitleItemCSS; //指定标题单元格的CSS

this.RowCSS; //指定行的CSS

this.ItemCSS; //指定单元格CSS，如果指定了单元格的CSS，则被选中的行的CSS不起作用

this.SelectedCSS; //被选定行的CSS

this.PostCols = new Array(ColCount); //数组，表示当前要上传的列，如果是1，则表示要上传

this.InputCols = new Array(ColCount); //数组，表示当前要上传的列，如果是1，则表示要输入

if(TextBoxs == null)

this.TextBoxs = null;

else

{

//与此类关联的input控件，数据将会从此控件中提交

this.TextBoxs = new Array(TextBoxs.length);

for(var i = 0; i< TextBoxs.length ;i++)

{

this.TextBoxs[i] = TextBoxs[i];

}

this.SelectedIndex = -1; //选择索引，-1表示没有行被选中

this.DeleteEnable = true; //是否显示删除按钮

this.RowCount = 0; //行数

this.Rows = new Array(); //行集合

this.Parent = Parent; //此控件的父控件

this.ID="dg"; //本控件的ID

for(var i = 0; i< ColCount;i++)

{

if(ColWidths == null)

this.ColWidths[i] = 60; //指定默认行高为60,也可以用字符串指定为百分数

else

this.ColWidths[i] = ColWidths[i];

this.TitleRow[i] = TitleRow[i];

if(PostCols == null)

this.PostCols[i] = 0; //默认是没有列要上传

else

this.PostCols[i] = PostCols[i];

if(InputCols == null)

this.InputCols[i] = 0; //默认是没有列要上传

else

this.InputCols[i] = InputCols[i];

}

//画出表格

ClientDataGrid.prototype.Draw = function(ID)

{

this.ID=ID;

var str = "<table rules='all' id = '" + ID + "_datagrid' " +

(this.Border !=null?("border=" + this.Border):"") + " " +

(this.Cellspace !=null?("cellspace=" + this.Cellspace):"") + " " +

(this.Cellpadding !=null?("cellpadding=" +this.Cellpadding):"") + " " +

(this.Width !=null?("width=" + this.Width):"") + " " +

(this.Height !=null?("height=" + this.Height):"") + " " +

(this.BorderColor !=null?("bordercolor=" + this.BorderColor):"") + " " +

(this.CSS !=null?("style='" + this.CSS + "'"):"") + ">";

//画标题

str = str + "<tr " + (this.TitleCSS!=null?("style='" + this.TitleCSS + "'"):"") + ">";

for(var i = 0;i<this.ColCount;i++)

{

str = str + "<td " + (this.ColWidths[i]!=null?("width=" + this.ColWidths[i]):"") + " " +

(this.TitleItemCSS!=null?("style='" + this.TitleItemCSS + "' "):"") + ">" + this.TitleRow[i] + "</td>";

}

str = str + "<td " + (this.TitleItemCSS!=null?("style='" + this.TitleItemCSS + "' "):"") + ">选中</td>";

str = str + "<td " + (this.TitleItemCSS!=null?("style='" + this.TitleItemCSS + "' "):"") + ">删除</td>";

str = str + "</tr>" ;

//画单元格

for(var i = 0 ; i < this.RowCount; i++)

{

str = str + "<tr id = 'row"+ i + "' " + (this.RowHeight!=null?("height=" + this.RowHeight):"") + " " +

(this.RowCSS!=null?("style='" + this.RowCSS + "'"):"") + ">";

for(var j=0;j<this.ColCount;j++)

{

if(this.InputCols[j] == 1)

str = str + "<td " + (this.ItemCSS!=null?("style='" + this.ItemCSS + "' "):"") + "><input language='javascript' type=text value='" + this.Rows[i].Data[j] + "' onblur='"+this.ID+".CellChange("+j+","+i+",this.value)'></td>";

if(this.InputCols[j] == 0)

str = str + "<td " + (this.ItemCSS!=null?("style='" + this.ItemCSS + "' "):"") + ">" + this.Rows[i].Data[j] + "</td>";

}

str = str + "<td " + (this.ItemCSS!=null?("style='" + this.ItemCSS + "' "):"") + "><input language='javascript' type=button value='选中' onclick='" + this.ID + ".SelectRow(" + i + ")'></td>";

str = str + "<td " + (this.ItemCSS!=null?("style='" + this.ItemCSS + "' "):"") + "><input language='javascript' type=button value='删除' onclick='" + this.ID + ".DeleteRowAt("+ i + ")'></td>";

str = str + "</tr>";

}

str = str + "</table>";

this.Parent.innerHTML = str;

//写到TextBoxs中

var k = 0;

for(var j=0;j<this.ColCount;j++)

{

if(this.PostCols[j] == 0)

continue;

tmp = "";

for(var i=0;i<this.RowCount;i++)

{

tmp = tmp + this.Rows[i].Data[j] + ",";

}

this.TextBoxs[k].value = tmp.substr(0,tmp.length-1);

k++;

}

//在指定位置插入一行

ClientDataGrid.prototype.InsertRowAt = function(index,dataRow)

{

tmpRows = this.Rows.slice(0,index).concat(new Array(dataRow)).concat(this.Rows.slice(index,this.RowCount+1));

this.Rows = tmpRows;

this.RowCount++;

this.SelectedIndex = -1;

}

//在指定位置插入多行

ClientDataGrid.prototype.InsertRowsAt = function(index,dataRows)

{

tmpRows = this.Rows.slice(0,index).concat(dataRows).concat(this.Rows.slice(index,this.RowCount+1));

this.Rows = tmpRows;

this.RowCount = this.RowCount + dataRows.length;

this.SelectedIndex = -1;

}

//在最后面插入一行

ClientDataGrid.prototype.InsertRow = function(dataRow)

{

this.Rows = this.Rows.concat(new Array(dataRow))

this.RowCount++;

}

//再最后面插入多行

ClientDataGrid.prototype.InsertRows = function(dataRows)

{

this.Rows = this.Rows.concat(dataRows);

this.RowCount = this.RowCount + dataRows.length;

this.SelectedIndex = -1;

}

//选中一行

ClientDataGrid.prototype.SelectRow = function(index)

{

this.SelectedIndex = index;

//因为标题行不算，所以从1开始

for(var i = 1 ;i<=this.RowCount ;i++)

{

var tmpCSS = "";

if(i==this.SelectedIndex + 1)

{

if(this.SelectedCSS != null)

tmpCSS = "window.document.all(\"" + this.ID + "_datagrid\").rows(" + i + ").style.cssText='"+ this.SelectedCSS +"'";

else

tmpCSS = "window.document.all(\"" + this.ID + "_datagrid\").rows(" + i + ").style.cssText=''";

}

else

{

if(this.RowCSS != null)

tmpCSS = "window.document.all(\"" + this.ID + "_datagrid\").rows(" + i + ").style.cssText='"+ this.RowCSS +"'";

else

tmpCSS = "window.document.all(\"" + this.ID + "_datagrid\").rows(" + i + ").style.cssText=''";

}

eval(tmpCSS);

}

//更改表格的值

ClientDataGrid.prototype.CellChange = function(x,y,value)

{

//先改变对象的值

this.Rows[y].Data[x] = value;

//写到TextBoxs中

var k = 0;

for(var j=0;j<this.ColCount;j++)

{

if(this.PostCols[j] == 0)

continue;

tmp = "";

for(var i=0;i<this.RowCount;i++)

{

tmp = tmp + this.Rows[i].Data[j] + ",";

}

this.TextBoxs[k].value = tmp.substr(0,tmp.length-1);

k++;

}

//删除指定位置的行,如果删除过快，就IE就会死掉，所以放用户确认一下，并且再重绘时，先清掉，防止宕掉

ClientDataGrid.prototype.DeleteRowAt = function(index)

{

if(confirm("确认要删除吧?"))

{

this.Parent.innerHTML = "";

this.SelectedIndex = -1;

if(index < 0 || index >= this.RowCount)

{

window.alert("指定的位置没有行");

return;

}

tmpRows = this.Rows.slice(0,index).concat(this.Rows.slice(index+1,this.RowCount));

this.Rows = tmpRows;

this.RowCount--;

//eval("window.document.all(\"" + this.ID + "_datagrid\").deleteRow(" + index + ");")

this.Draw(this.ID);

}

//-----------------------------------行对象------------------------------

function DataRow(Data)

{

this.ItemCount = Data.length; //一行的元素个数

this.Data = new Array(); //记录数据

for(var i = 0 ;i<this.ItemCount ;i++)

{

this.Data[i] = Data[i];

}

</script>

如何使用，例如

var textBoxs = new Array(document.Form1.pfy ,document.Form1.presult);

var colWidths = new Array("80px","180px",null);

var dg = new ClientDataGrid(3,new Array("代码","费用类型","金额"),25,25,colWidths,new Array(1,0,1),new Array(0,0,1),textBoxs,document.all("fylist"));

dg.Width = 455;

dg.CSS = "background-color:White;border-color:#CC9966;border-width:1px;border-style:None;border-collapse:collapse;";

dg.TitleCSS = "color:#FFFFCC;background-color:#990000;font-weight:bold;";

dg.BorderColor = "#CC9966";

dg.SelectedCSS = "color:#663399;background-color:#FFCC66;";

dg.Draw("dg");

//这是插入代码，大家可以改成其它的，看看是不是和DataGrid的第一种样式一样呀

function B_insert_onclick()

{

var tmpRows = new Array();

for (i = 0 ;i < Form1.LBExpenss.length ;i ++)

{

if(Form1.LBExpenss.options[i].selected)

{

tmpRows = tmpRows.concat(new Array(new DataRow(new Array(Form1.LBExpenss.options[i].value,Form1.LBExpenss.options[i].text,""))));

}

if(dg.SelectedIndex != -1)

dg.InsertRowsAt(dg.SelectedIndex,tmpRows);

else

dg.InsertRows(tmpRows);

dg.Draw("dg");

}

</script>