欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

asp.net GridView 中增加记录的方法

程序员文章站 2024-03-09 17:05:23
大多数人建议用 formview 来完成增加记录的功能,但是 formview 和 gridview 不是同一个表格,所以无法在同一个页面的同一个表格中显示。如果故意将 f...
大多数人建议用 formview 来完成增加记录的功能,但是 formview 和 gridview 不是同一个表格,所以无法在同一个页面的同一个表格中显示。如果故意将 formview 或自己的一堆于用新增功能的控件使用普通的表格组装起来,那么会碰到一个很麻烦的问题,即两个表格的列宽如何协调一致,大多数情况下,大家在做表格的时候,表格中各列的宽度都是自动调整的,所以强行指定宽度在很多情况下并不适用。
通过实践,想出了一种办法,主要步骤如下所示:
1) 在 gridview 的 emptydataview 中,放置一个普通的html table,以便在gridview绑定的数据源中无数据时依旧显示表头(如果数据源为返回的数据行数为0,gridview默认是不显示表头的),假设 id 为 tbheader,它的作用是下面用于新增功能的 tbform 的各列控件提供说明(充当表头);
2)在 gridview 下面,放置一个普通的 html 表格,其列数和 gridview 中定义的列数保持一致,但行数只有一行,然后在此表格的各列中放入用于新增功能的各个控件(如 textbox等),假设此表格的 id 为 tbform
3)在页面中加入一段客户端脚本,以便使页面展示到客户端时,利用 javascript 将两个表格强行合并到一起,这样就可以将只有一行的 tbform 合并到 gridview中,因此 gridview 的最下面多出一行,其中有 tbform 表格中定义的输入控件和“添加”链接(按钮),主要代码(javascript)如下:
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)
}
}
function changetablelayout()
{
if(document.all('tbheader') == null)
mergetable('tbform','');
else
mergetable('tbform','tbheader');
}
changetablelayout();
如果 gridview 绑定时没有数据,将不显示其中定义的各列,而只显示 emptydataview 中的 tbheader,这时要合并 tbheader 和 tbform。如果 gridview 绑定时包含数据,则不会显示 emptydataview(当然也不会显示其中的 tbheader),但这时会显示 gridview 中定义的各个列,因此只需将 gridview 本身和 tbform 合并即可。 gridview 的客户端id可以用gridview.clientid来获取。
在服务器端很容易知道 gridview 绑定后是否包含数据,但对于客户端来说,不容易检查,一个简单的作法就是检查页面中有没有 tbheader 对象(如果有,则说明表格没有数据,如果无此对象,表示 gridview 中包含数据... 好啰嗦)
4)如果是 ajax 环境,上述脚本有可能不被执行,可以调用 sys.application.load.add ( javascriptfunction) 来强制执行脚本,来合并表格,主要代码如下(c#):
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 上尚末测试。
另:为了更能说明上文代码的效果,我抓了一个截图,图中包括表头在内的前三行就是 gridview,最下面一行其实来自于另一个表格,在客户端强制合并后,显示效果就是这样,看起来象是一个表格。