在GridView中增加记录的方法

在 ASP.NET 2.0 中，GridView 支持修改/删除记录（个人感觉是 GridVew 的一大缺憾，估计在下一版本中会加入此功能），但却不支持新增记录的功能，大多数人建议用 FormView 来完成增加记录的功能，但是 FormView 和 GridView 不是同一个表格，所以无法在同一个页面的同一个表格中显示。如果故意将 FormView 或自己的一堆于用新增功能的控件使用普通的表格组装起来，那么会碰到一个很麻烦的问题，即两个表格的列宽如何协调一致，大多数情况下，大家在做表格的时候，表格中各列的宽度都是自动调整的，所以强行指定宽度在很多情况下并不适用。

通过实践，想出了一种办法，主要步骤如下所示：

1) 在 GridView 的 EmptyDataView 中，放置一个普通的Html Table，以便在无数据时依旧显示表头，假设 ID 为 tbHeader，为下面用于新增功能的 Form 的各个控件提供说明；

2) 在 GridView 下面，放置一个普通的 HTML 表格，列数和 GridView保持一致，只有一行，内部放入用于新增功能的各个控件，假设 ID 为 tbForm

3) 在客户端中加入脚本，在页面显示到客户端时，利用 Javascript 将两个表格强行合并到一起，这样就会在 GridView 的最下面多出一行，其中有输入控件和“添加”链接（按钮），主要代码如下：

 

function MergeTable(source,dest)
{
    var row;
    var cell;

    var sourceTb = document.all(source);
    var destTb = document.all(dest);
    for (var i=0; i<sourceTb.rows.length; i++)
    {
         row = document.createElement("TR");
         for (var j=0; j<sourceTb.rows(i).cells.length; j++)
         {
             cell = document.createElement("TD");
             row.appendChild(cell);
            //复制对象
            for(k=0;k<sourceTb.rows(i).cells(j).all.length;k++)
                cell.appendChild(sourceTb.rows(i).cells(j).all.item(k));
        }
        destTb.tBodies(0).appendChild(row);
    }
    for (var i=sourceTb.rows.length-1; i>=0; i--)
    {
        sourceTb.deleteRow(i)
    }

}

    注意：要根据表格中是否具有数据来合并不同的表格，如果没有数据，要合并 EmptyDataView 中的 Html Table （即 tbHeader）与用于新增的表格（tbForm），如果有数据，则要合并 GridView 本身（可以用 GridView.ClientID来获取其客户端 ID）和用于新增加的表格（tbForm）。简单的做法是检查页面中有没有 tbHeader 以确定表格中是否包含数据，代码如下所示：

function ChangeTableLayout()
{
     if(document.all('tbHeader') == null)
        MergeTable('tbForm','<%=myGridView.ClientID %>');
    else
        MergeTable('tbForm','tbHeader');
}

    4) 如果是 AJAX 环境，上述脚本有可能不被执行，可以调用 Sys.Application.load.add ( JavaScriptFunction) 来强制执行脚本，来合并表格，主要代码如下：

scriptmanager myScriptManager = ScriptManager.GetCurrent(Page);
if (myScriptManager.IsInPartialRenderingMode)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowFullTable1", "ChangeTableLayout();\n", true);
}
else
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowFullTable2", "Sys.Application.load.add (ChangeTableLayout);\n", true);
}

    注：上述代码中的 ChangeTableLayout 为客户端脚本函数的名称，其中调用第3步骤中的代码，上述代码在 Atlas 中通过，在 ASP.NET AJAX Beta 上尚末测试。

查看本文来源