zoukankan      html  css  js  c++  java
  • GridView控件的选择功能,代码实现CheckBox控件的全选、反选以及取消

    提及GridView控件的选择功能,那肯定是和CheckBox控件有着亲密的联系,这是毋庸置疑的。选择功能,最重要的就是方便用户的操作,比如批量删除。

    GridView绑定后台数据库,第一列绑定CheckBox选择控件,标识ID为“DeleteThis”,便于选择。绑定的代码在gridview<Columns></Columns>之间,前台示例代码如下:

    <asp:TemplateField ControlStyle-Width="30" HeaderText="选择" runat="server">
                                    <ItemTemplate>
                                        <asp:CheckBox ID="DeleteThis" runat="server" />
                                    </ItemTemplate>
                                    <ControlStyle Width="30px"></ControlStyle>
                                </asp:TemplateField>

    为了便于更好的理解,直观的看待解说,上传前台的整体设计界面如下:

     界面左下方就是今天所说的内容,用全选框、反选框以及取消按钮来控制gridview的第一列选择框。前台设计代码示例如下:

    <table border="0" cellspacing="0" cellpadding="1" style="100%;">
        <tr>
        <td style="1px"></td>
         <td align="left">
        <b>选择:</b>
         <asp:CheckBox ID="chkbAll" runat="server" Text="全选" Width="47px" 
                AutoPostBack="True" oncheckedchanged="chkbAll_CheckedChanged"/>
         <asp:CheckBox ID="chkbUnCheck" runat="server" Text="反选" Width="47px" 
                AutoPostBack="True" oncheckedchanged="chkbUnCheck_CheckedChanged"/>
         <asp:Button ID="btnCancel" runat="server" Text="取消" Width="47px" onclick="btnCancel_Click" 
                />
        </td>
        <td align="right">
       
            <asp:Button ID="btnDelete" runat="server" Text="删除" 
                Width="47px" onclick="btnDelete_Click" />
        </td>
       
        <td style="1px"></td>
        </tr>
        </table><br />
    全选、反选前台设计

     其实,今天所说的选择功能有各种各样的实现方法,有js的,有jquery的等等,你有会的也有不会的,我们要做的就是根据自己的语言的能力实现页面所需的功能,业余时间可以去琢磨其他的方式。。。

    要想学好一门语言,那就得不断的接触,不断的学习,不断的坚持,不断的思悟方可。

    废话不多说,言归正传,cs后台代码实现选择功能的代码如下:

        /// <summary>
        /// 全选
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void chkbAll_CheckedChanged(object sender, EventArgs e)
        {
            for (int i = 0; i < gridView.Rows.Count; i++)
            {
                CheckBox chb = (CheckBox)gridView.Rows[i].FindControl("DeleteThis");
                if (chkbAll.Checked)
                {
                    chb.Checked = true;
                }
                else
                {
                    chb.Checked = false;
                }
            }
            chkbUnCheck.Checked = false;
        }
        /// <summary>
        /// 反选
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void chkbUnCheck_CheckedChanged(object sender, EventArgs e)
        {
            for (int i = 0; i < gridView.Rows.Count; i++)
            {
                CheckBox chb = (CheckBox)gridView.Rows[i].FindControl("DeleteThis");
                if (chb.Checked == true)
                {
                    chb.Checked = false;
                }
                else
                {
                    chb.Checked = true;
                }
            }
            chkbAll.Checked = false;
        }
        /// <summary>
        /// 取消
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void btnCancel_Click(object sender, EventArgs e)
        {
            chkbAll.Checked = false;
            chkbUnCheck.Checked = false;
            for (int i = 0; i < gridView.Rows.Count; i++)
            {
                CheckBox chb = (CheckBox)gridView.Rows[i].FindControl("DeleteThis");
                chb.Checked = false;
            }
        }

    代码给你了,如有需要,好好理解理解,如有不足之处,请多提意见。。。

    一家之言,仅供参考!!!

  • 相关阅读:
    php文件
    phpredis 中文手册和redis 教程
    安装PHP扩展-----phpredis
    jquery获得option的值和对option进行操作
    js获取当前日期时间
    设计模式:观察者模式
    jquery将具有相同名称的元素的值提取出来放到一个数组内
    php事件钩子
    Javascript : 数组
    查看Python安装路径
  • 原文地址:https://www.cnblogs.com/litao4047/p/3123968.html
Copyright © 2011-2022 走看看