181
DataGrid模板列的CheckBox事件定義方法
DataGrid的模板列中使用CheckBox是很常見的現象，而每個CheckBox怎麼觸發事件，又如何得到發生事件的當前行數據，是本文描述的中心。它並沒有什麼技術含量，但不了解的話，會讓你在這裏浪費一些時間。舉個簡單的例子：你需要在點擊DataGrid上的CheckBox後，在將當前行數據複製到另一個表格中。
ok，言歸正傳。
假設當前有這樣一個DataGird：
<asp:datagrid 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 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" CustomerID")%>', '<%# DataBinder.Eval(Container.DataItem,"NameCn")%>', '<%# DataBinder.Eval(Container.DataItem,"CustCateGoryType")%>', '<%# DataBinder.Eval(Container.DataItem,"PcAppDate")%>')" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
<table >
<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 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"/>)可以解決問題，但畢竟刪除隱藏域的記錄不方便。
最後更新：2017-04-02 00:06:46