GridView控件中添加CheckBox控件,并且实现选择、全选和反选

来源:互联网 发布:生产型进销存软件 编辑:程序博客网 时间:2024/05/22 01:41

一、如何在GridView中添加CheckBox控件?

     1、添加一个GridView控件后,单击向右箭头,选择【编辑列】;

     2、在弹出的【字段】窗口中,选择TemplateField项,点击【添加】>>【确定】;

     3、在弹出的窗口选择【编辑模板】,选择刚才添加的列项,将工具箱中的CheckBox控件拖入到模板中ItemTemplate中。

     4、当需要在头列中添加checkBox,以便实现全选时,则在该模板中拖入CheckBox控件到HeadTemplate中即可。

     5、最后点击【结束模板编辑】

     【备注】当然您也可以在后台源码中手写,这里就不阐述了:

                  <HeaderTemplate>
                    <asp:CheckBox ID="CheckBox2" runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>

     效果如图所示:

     

 

二、那么我们如何在选择数据表格中的数据记录呢?

    我们首先需要对GridView进行遍历,获取CheckBox控件选择的引用。如下面的代码所示:

    for (int i = 0; i < this.GridContent1.Rows.Count; i++)           

    {               
        CheckBox cBoxItem = (CheckBox)GridContent1.Rows[i].FindControl("CheckItem");               
        if (cBoxItem.Checked == true)               
        {

             //*************具体操作
        }

    }

或者这样也可以:

         foreach (GridViewRow gvr in GridView1.Rows)
            {
                CheckBox cbx = (CheckBox)gvr.Cells[1].FindControl("cbx");
                if (cbx.Checked == true)
                {

                     decimal id = decimal.Parse(gvr.Cells[0].Text.Trim());

                    //************具体操作

                }

三、我们如何实现对Gridview中的记录进行全选呢?方法有一下几种:

     【方法一】 采用内部表头的CheckBox进行全选或反选

      (1)双击表头部的CheckBox控件,激活CheckedChanged()事件:

       (2)设置CheckBox的AutoPostBack属性为"True"【很关键】

     此时前台的源代码如下了:

 <HeaderTemplate>
                    <asp:CheckBox ID="CheckBox2" runat="server" Text="全选" AutoPostBack="True"
                        oncheckedchanged="CheckBox2_CheckedChanged
"/>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>

    后台代码写为:

    protected void CheckBox2_CheckedChanged(object sender, EventArgs e)
        {
            CheckBox cbAll = (CheckBox)sender;
            if (cbAll.Text == "全选")
            {
                foreach (GridViewRow gvr in GridView1.Rows)
                {
                    CheckBox cbSel = (CheckBox)gvr.Cells[0].FindControl("CheckBox1");
                    cbSel.Checked = cbAll.Checked;
                }
            }
        } 

效果如图所示:

   【方法二】使用外在的CheckBox控件实现全选或反选(效果如图所示)

                                        

     (1)首先,在表格外面添加一个复选框。如上图所示;

     (2)然后,设置AutoPostBack属性为"True",双击该CheckbBox控件。前台源代码如下显示:

 <asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="True" oncheckedchanged="CheckBox3_CheckedChanged" Text="全选" />

     (3)最后,在后台代码书写以下内容

      protected void CheckBox3_CheckedChanged(object sender, EventArgs e)
        {
            for (int i = 0; i <= GridView1.Rows.Count - 1; i++)
            {
                CheckBox cbox = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");
                if (CheckBox3.Checked == true)
                {
                    cbox.Checked = true;
                }
                else
                {
                    cbox.Checked = false;
                }
            }

        }

 

 【方法三】实现全选和反选的效果如图所示:

   

和【方法二】一样,添加了CheckBox控件,设置AutoPostBack属性为true。

    前台源代码为:

    <asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="True"
        oncheckedchanged="CheckBox3_CheckedChanged" Text="全选" />
&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="True"
        oncheckedchanged="CheckBox4_CheckedChanged" Text="反选" />

    后台书写全选代码和反选代码为:

       //全选
        protected void CheckBox3_CheckedChanged(object sender, EventArgs e)
        {
            for (int i = 0; i <= GridView1.Rows.Count - 1; i++)
            {
                CheckBox cbox = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");
                if (CheckBox3.Checked == true)
                {
                    cbox.Checked = true;
                }
                else
                {
                    cbox.Checked = false;
                }
                CheckBox4.Checked = false; //反选复选框不勾选
            }

        }
        //反选
        protected void CheckBox4_CheckedChanged(object sender, EventArgs e)
        {
            for (int i = 0; i <= GridView1.Rows.Count - 1; i++)
            {
                CheckBox CheckBox = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");
                if (CheckBox.Checked == false) //如果复选框没有被勾选则,勾选上;反之不勾选
                {
                    CheckBox.Checked = true;
                }
               else
                {
                    CheckBox.Checked = false;
                }
            }
            CheckBox3.Checked = false; //全选框不勾选
        } 
   

 【方法四】添加【取消】按钮,取消所有的选择操作。如图所示

 双击【取消】按钮,在按钮事件中添加取消选中操作

 protected void BtnReset_Click(object sender, EventArgs e)
        {
            CheckBox3.Checked = false; //全选的CheckBox框
            CheckBox4.Checked = false; //反选的CheckBox框
            for (int i = 0; i <= GridView1.Rows.Count - 1; i++)
            {
                CheckBox CheckBox = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1"); //表格里面的CheckBox框
                CheckBox.Checked = false; //不再勾选中
            }
        }

 

 

 

 

 

原创粉丝点击