aspGridView中增加记录的⽅法
⼤多数⼈建议⽤ 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);
gridview不显示for (var i=0; i&ws.length; i++)
{
row = ateElement("TR");
for (var j=0; j&ws(i).cells.length; j++)
{
cell = ateElement("TD");
row.appendChild(cell);
//复制对象
for(k=0;k&ws(i).cells(j).all.length;k++)
cell.ws(i).cells(j).all.item(k));
}
destTb.tBodies(0).appendChild(row);
}
for (var ws.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,最下⾯⼀⾏其实来⾃于另⼀个表格,在客户端强制合并后,显⽰效果就是这样,看起来象是⼀个表格。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论