自定义模板:DataGrid模板列中CheckBox事件的定义方法



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 _disibledevent=>
<asp:TemplateColumn HeaderText="Is Tran">

<ItemTemplate>

<asp:CheckBox ID="aspTran" Runat="server" AutoPostBack="True" _disibledevent=>
</ItemTemplate>

</asp:TemplateColumn>

</Columns>

</asp:datagrid>

这里做法是:在页面定义OnCheckedChange事件让.net托管机制自动注册事件和回调思路方法关系有不少帖子是在DataGrid ItemDataBind事件中通过FindControl找到CheckBox后动态注册我做过测试没有效果 接下来你需要在后台页面定义个protected或publicTranChecked思路方法注意这里设定为private权限是无法访问: protected void TranChecked(object sender, .EventArgs e)

{

// sender为事件源我们可以通过下面方式获得DataGrid当前行

CheckBox cb = (CheckBox)sender; DataGridItem item = cb.Parent.Parent;

// 第个Parent得到是itemcell;第 2个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 _disibledevent=>
<asp:TemplateColumn HeaderText="Is Tran">

<ItemTemplate>

<input type="checkbox" name="Tran" id="Tran" _disibledevent=>
</ItemTemplate>

</asp:TemplateColumn>

</Columns>

</asp:datagrid>

<table id="listtable">

<tr>

<td>Customer ID</td>

<td>Customer Name</td>

<td>Customer CateGory</td>

<td>Create _disibledevent=>
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 _disibledevent=>


// 再新添空行

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"/>)可以解决问题但毕竟删除隐藏域记录不方便
Tags:  css自定义模板 qq自定义模板 自定义模板

延伸阅读

最新评论

发表评论