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

[入库:2005年8月18日] [更新:2007年3月25日]

本文简介:选择自 curllion 的 blog

在aspx中,当使用datagrid提交数据时,客户每输入一条记录,就会向服务端提交一次数据,所以当提交数据较多时,效率就会很低,如果在客户端将这些数据"打包",再上传到服务端,这样就可以一次上传多条数据。

       所以基本思路就是在客户端获取所有的输入数据,将数据转换成以逗号分隔的字符串,将字符串传到服务器,在服务端将字符串拆成数组(用split函数),再写入数据库中。所有,提交到服务器只有一次。
 
       这个控件还有一些缺陷:
  1. 删掉一行数据时,可能使ie死掉。
  2. 只能在写在网页中,不能写成js文件后再引用,可能是代码中包含了window.alert方法,我想这个问题是可以解决的,如果有哪位高手解决了,麻烦通知一下,谢了。还有一个解决方法,将代码写成inc文件,代码用<script>.....</script>,再引用:<!-- #include virtual="../script/clientdatagrid.inc">,这样运行时,代码就会自动加到网页上。

       这个控件的功能都写再备注里,大家也可以扩展一些功能。如果有哪位高手作了改进请一定通知一下,谢了。

 代码如下:

 <script language="javascript">
/// 客户端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控件,数据将会从此控

本文关键:客户端实现类似于DataGrid的输入表格控件
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top