• asp.net中dategrid添加复选框checkbox并实现单选,同时点击复选框触发事件。


    概述:在asp.net中的使用dategrid,在dategrid中添加复选框并实现复选框checkbox的单选功能,在选择的过程中,通过点击复选框能够触发事件,比如,点击复选框checkbox时,在textbox中显示选中的值等等。

    功能一:复选框checkbox单选:

    借助js实现。

    步骤一:添加复选框checkbox列;

    1 <asp:TemplateColumn>
    2 <ItemTemplate>
    3 <asp:CheckBox ID="chkSelect"  runat="server">
    4 </asp:CheckBox>
    5 </ItemTemplate> 
    6 </asp:TemplateColumn>
    View Code

    步骤二:将如下js代码放到前台界面;

     1 <script language="javascript" type="text/javascript">
     2         function SetCheckBoxState() {//复选框单选
     3             var dom = document.all;
     4             var el = event.srcElement;
     5             if (el.tagName == "INPUT" && el.type.toLowerCase() == "checkbox") {
     6                 for (i = 0; i < dom.length; i++) {
     7                     if (dom[i].tagName == "INPUT" && dom[i].type.toLowerCase() == "checkbox") {
     8                         dom[i].checked = false;
     9                     }
    10                 }
    11             }
    12             el.checked = !el.checked;
    13         }
    14     </script>
    View Code

    步骤三:
    在ItemDataBound事件中将js方法添加到复选框checkbox上;

    1  protected void gridPlan_ItemDataBound(object sender, DataGridItemEventArgs e)
    2 {
    3             CheckBox chkSelect;
    4             chkSelect = (CheckBox)e.Item.FindControl("chkSelect");
    5             chkSelect.Attributes.Add("OnClick", "SetCheckBoxState()");
    6 }
    View Code

    通过上述三步,即可实现复选框checkbox的单选功能。

    功能二:单选框checkbox事件:

    步骤一:在前台checkbox中添加如下代码:

    就是添加AutoPostBack="True" OnCheckedChanged="TranChecked"两个属性。

    1 <asp:CheckBox ID="chkSelect" AutoPostBack="True" OnCheckedChanged="TranChecked" runat="server"></asp:CheckBox></ItemTemplate>
    View Code

    在后台添加如下代码:

    1 protected void TranChecked(object sender, EventArgs e)
    2         {
    3                         。。。想要实现的功能
    4 
    5          }
    View Code

    通过上述两步即可实现复选框checkbox事件。

    以上功能,是本人在工作中需要实现的功能,通过不断的尝试最终成功实现,如果你有更好的方法或者我的实现存在问题,欢迎指教!

  • 相关阅读:
    BZOJ3236:[AHOI2013]作业(莫队,分块)
    BZOJ5334:[TJOI2018]数学计算(线段树)
    BZOJ3173:[TJOI2013]最长上升子序列(Splay)
    BZOJ3211:花神游历各国(线段树)
    BZOJ3155:Preprefix sum(线段树)
    HDU5002:Tree(LCT)
    【BZOJ 1911】 [Apio2010]特别行动队
    【BZOJ 2875】 [Noi2012]随机数生成器
    【BZOJ 1054】 [HAOI2008]移动玩具
    【BZOJ 1497】 [NOI2006]最大获利
  • 原文地址:https://www.cnblogs.com/jianrenmo/p/3435793.html
Copyright © 2020-2023  润新知