DataGrid的模板列中使用CheckBox是很常见的现象,而每个CheckBox怎么触发事件,又如何得到发生事件的当前行数据,是本文描述的中心。它并没有什么技术含量,但不了解的话,会让你在这里浪费一些时间。举个简单的例子:你需要在点击DataGrid上的CheckBox后,在将当前行数据复制到另一个表格中。
ok,言归正传。
假设当前有这样一个DataGird:
<asp:datagrid id="preCustList" Runat="server" width="100%" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="CustomerID" HeaderText="Customer ID"></asp:BoundColumn>
<asp:BoundColumn DataField="NameCn" HeaderText="Customer Name"></asp:BoundColumn>
<asp:BoundColumn DataField="CustCateGoryType" HeaderText="Customer Category"></asp:BoundColumn>
<asp:BoundColumn DataField="PcAppDate" HeaderText="Create On" DataFormatString="{0:yyyy-MM-dd}"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Is Tran">
<ItemTemplate>
<asp:CheckBox ID="aspTran" Runat="server" AutoPostBack="True" OnCheckedChanged="TranChecked"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
这里的做法是:在页面定义OnCheckedChange事件,让.net的托管机制自动注册事件与回调方法的关系。有不少帖子是在DataGrid的 ItemDataBind事件中,通过FindControl()找到CheckBox后,动态注册。我做过测试,没有效果。 接下来,你需要在后台页面定义一个protected或public的TranChecked方法,注意这里设定为private权限,是无法访问的: protected void TranChecked(object sender, System.EventArgs e)
{
// sender为事件源,我们可以通过下面的方式获得DataGrid当前行
CheckBox cb = (CheckBox)sender; DataGridItem item = cb.Parent.Parent;
// 第一个Parent得到的是item的cell;第二个Parent得到Item
// 下面就可以操作item的其他cells了
.......
}
----------------------------------------------------------------------------------
实际上,使用CheckBox的客户端事件,更为简单:
<asp:datagrid id="preCustList" Runat="server" width="100%" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="CustomerID" HeaderText="Customer ID"></asp:BoundColumn>
<asp:BoundColumn DataField="NameCn" HeaderText="Customer Name"></asp:BoundColumn>
<asp:BoundColumn DataField="CustCateGoryType" HeaderText="Customer Category"></asp:BoundColumn>
<asp:BoundColumn DataField="PcAppDate" HeaderText="Create On" DataFormatString="{0:yyyy-MM-dd}"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Is Tran">
<ItemTemplate>
<input type="checkbox" name="Tran" id="Tran" onclick="Checked('<%# DataBinder.Eval(Container.DataItem,"CustomerID")%>', '<%# DataBinder.Eval(Container.DataItem,"NameCn")%>', '<%# DataBinder.Eval(Container.DataItem,"CustCateGoryType")%>', '<%# DataBinder.Eval(Container.DataItem,"PcAppDate")%>')" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
<table id="listtable">
<tr>
<td>Customer ID</td>
<td>Customer Name</td>
<td>Customer CateGory</td>
<td>Create On</td>
<td>Is Tran</td>
</tr>
<tr>
td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
客户端方法Checked的定义如下:
function Checked(customerID, customerName, customerCategory, createOn)
{
// 第一行赋值
var temp = document.getElementById("listtable");
var strRow = temp.rows[temp.rows.length - 1];
strRow.cells[0].innerText = customerID;
strRow.cells[1].innerText = customerName;
strRow.cells[2].innerText = customerCategory;
strRow.cells[3].innerText = createOn;
strRow.cells[4].innerHTML = '<a onclick="javascript:deleteCurrentRow();" href="#">删除</a>';
// 再新添一空行
document.all('listtable').outerHTML = document.all('listtable').outerHTML.replace(/<//table>/i,
'<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' + "</table>")
}
deleteCurrentRow()的方法就不贴上来的。
----------------------------------------------------------------------------------
【总结】
客户端实现的响应速度显然快于在服务端实现的方法,而且不用页面跳转,没有烦人的刷新现象。但是客户端事件有一个致命的问题:由于下面Table的数据插入是在客户端进行的,只要页面刷新,数据就会丢失,录入:当你上面的DataGrid实现了翻页功能后,每翻一页,以前选定的数据就会丢失。
当然,你可能会说用隐藏域(<input type="hidden"/>)可以解决问题,但毕竟删除隐藏域的记录不方便。