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 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>&nbsp;</td>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

        <td>&nbsp;</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"/>)可以解决问题,但毕竟删除隐藏域的记录不方便。

 

目录
相关文章
|
缓存 运维 NoSQL
分布式ID生成方法的超详细分析(全)
目录前言1. UUID2. 数据库自增3. 数据库集群4. 数据库号段5. redis模式6. 雪花算法7. 其他总结 前言 关于什么是分布式ID 数据量不是很多的时候,单一个数据库表可以支撑其业务,即使数据在大也可以主从复制 到一定量的数据时,实现分库分表的时候,就需要一个全局唯一的ID,订单的编号就是分布式ID 关于上面牵扯到的主从复制 可看我之前的文章进行查缺补漏 关于主从复制的超详细解析(全) 关于数据库的分布式ID可看我之前在Mycat种提及到 具体都有如下: 在实现分库分表的情况下,数据库自增主
468 0
分布式ID生成方法的超详细分析(全)
|
XML 存储 缓存
RecyclerView 性能优化 | 把加载表项耗时减半 (三)(下)
RecyclerView 性能优化 | 把加载表项耗时减半 (三)
228 0
|
JavaScript 前端开发
JavaScript系列--事件
JavaScript系列--事件
132 0
|
弹性计算 Cloud Native Linux
ECS的初体验
阿里云,阿里巴巴集团旗下云计算品牌,作为全球卓越的云计算技术和服务提供商,不仅为许多企业提供了便利,还专门为学生高校准备了飞天加速计划,让更多学生能解除云、了解云、运用云。推出的学生机适合广大在校大学生、高中生甚至初中生进行学习,只需几步,就能在家轻松搭建一个属于自己的网站,简直是广大TI热爱者的福利
|
存储 弹性计算 缓存
|
SQL 关系型数据库 数据库
python之数据库
python之数据库 1.MYSQL数据库的管理 准备工作: su - root yum install mariadb-server  -y systemctl start mariadb # 设定密码 mysql_secure_installation yum install...
1490 0
|
安全 网络协议
为什么DNS监测能够让你的网络更加安全
本文讲的是为什么DNS监测能够让你的网络更加安全,众所周知,当今的恶意攻击大多受利益驱动,劫持合法网络资源发动攻击。其中一个重要途径,就是利用域名服务(DNS)将网络用户导引到恶意网站并将他们纳入攻击行动的节点。
1583 0