您现在的位置: 365建站网 > 365学习 > 全选按钮的实现及事件的处理

全选按钮的实现及事件的处理

文章来源:365jz.com     点击数:392    更新时间:2011-03-04 10:34   参与评论

这种全选的效果在后台是很需要的,因为有时候数据很多,如果想删除全部的数据,没有全选按钮岂不是很麻烦,所以很有必要实现这种全选的效果,并执行相关的事件,下面就来看看如何实现

先来看看第一种方法:

首先先布局好全选和控件中复选框按钮,全选按钮我们使用HTML

控件中复选框

<input id="Checkbox1" type="checkbox" onclick="changeState(this.checked)" />全选

数据项就采用web控件中的复选框:

<asp:CheckBox ID="chk" runat="server"/>

代码如下

<asp:TemplateField HeaderText="全选">

                   <ItemTemplate>

                       <asp:CheckBox ID="chk" runat="server"/>

                   </ItemTemplate>

                   <HeaderTemplate>

                       <input id="Checkbox1" type="checkbox" onclick="changeState(this.checked)" />全选

                   </HeaderTemplate>

               </asp:TemplateField>

Js事件

<script type="text/JavaScript">

              function changeState(isChecked)

              {

                 var chk_list=document.getElementsByTagName_r("input");

                 for(var i=0;i<chk_list.length;i++)

                 {

                    if(chk_list[i].type=="checkbox")

                    {

                      chk_list[i].checked=isChecked;

                    }

                 }

              }

            </script>

这样就基本实现了点击全选按钮的时候,数据项的复选框也被全部选中了,但是,现在还有一个问题,就是如果全部选中,在取消数据项中的一个选项,那么此时全选的复选框就不应该选中,这个就需要我们来触发控件的DataBound事件,用来自动绑定onclick事件,一般在控件中需要触发事件的,因为不能直接触发服务器事件,所以只能触发js事件,这就需要我们使用html控件,调用js,或者是直接触发绑定控件的DataBound事件,通过Attributes.add为控件添加客户端的onclick等js事件!下面我们就来触发DataBound事件完成上面的需求

  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

    {

        if(e.Row.RowType==DataControlRowType.DataRow)

        {

            CheckBox chk = e.Row.FindControl("chk") as CheckBox;

            if(chk!=null){

                chk.Attributes.Add("onclick", "javascript:if(this.checked==false){document.getElementByIdx_x_x_x('Checkbox1').checked=false}");

            }

        }

}

 

下面就基本完成了全选事件

现在话说回来,全选的实现是为了某一个事件而为之,比如删除,如果我们要删除所有的项,那就只能通过全选了,现在我们就来触发删除事件

    protected void delButtom_Click(object sender, EventArgs e)

    {

        bool fig = false;

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

        {

            CheckBox chk = this.GridView1.Rows[i].FindControl("chk") as CheckBox;

            if(chk!=null)

            {

               if(chk.Checked==true)

               {

                   fig = true;

                   int id =Convert.ToInt32(this.GridView1.DataKeys[i].Value);

                   NewsManager.Del(id);

                  

               }

            }

        }

        if(fig==false)

        {

            this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('请选择要删除的新闻')</script>"); ;

        }

        DateBindNews();

    }

下面就来看看第二种方法:

全选部分复选框都是采用的html标签即input标签,和第一种方法大体相同,个别处理方式不一样,最主要的是处理删除事件的时候,它首先是通过js将所有选中复选框的值放到一个控件中,然后再后台获得这个控件的所有值放到数据组中,然后循环这个数组,调用删除方法删除即可!

这个实现类似上面的DataBound事件就简单的多了,直接在html控件中写onclick事件就可以了

  <input  id="CheckBox1" type="checkbox" onclick="NoChecked(this.checked)" value='<%#eval_r("MessageNo") %>' />

基本程序是这样的:

全选按钮:

<input id="CheckBoxAll" type="checkbox" onclick="checkAll()" />全选

绑定项复选框

<ItemTemplate>

                <tr onmouSEOver="OnTr(this,'#e5f4fd');" onmouseout="OutTr(this,'#FFFFFF');" bgcolor="#FFFFFF">

                    <td height="20">

                        <input  id="CheckBox1" type="checkbox"  value='<%#eval_r("MessageNo") %>' />

                    </td>

      <td height="20">

   <asp:HiddenField ID="txtClassId" runat="server" Value='<%#eval_r("MessageNo") %>' />

</td>

Js:

//先获取所有的Checkbox

var chkList = document.getElementsByName("CheckBox1");

window.onload = function()

{

    //为所有checkbox添加onclick事件处理,以自动更新“已选择的项”

    for(var i=0; i<chkList.length; i++)

    {

        chkList[i].onclick= chkClick;

    }

        

//checkbox的onclick事件,用于更新“已选择的项”

function chkClick(){

    var checkedList = "";

    //获取所有被选中的项

    for(var i=0; i<chkList.length; i++){

        if(chkList[i].checked)

        {

            checkedList += chkList[i].value + ",";

        }else

        {

          document.getElementByIdx_x_x("CheckBoxAll").checked=false;

        }

           

    }

   

    //把选中项的列表显示到“已选择的项”中,substring在这里是为了去除最后一个逗号

    document.getElementByIdx_x_x("<%=HiddenField1.ClientID %>").value = checkedList.substring(0,checkedList.length-1);

}

function checkAll()

{

    var chkall=document.getElementByIdx_x_x("CheckBoxAll");

    if(chkall.checked)

    {

        var checkedList = "";

        for(var i=0;i<chkList.length;i++)

        {

              chkList[i].checked=true;

              checkedList += chkList[i].value + ",";

        }

        document.getElementByIdx_x_x("<%=HiddenField1.ClientID %>").value = checkedList.substring(0,checkedList.length-1);

    }

    else

    {

        for(var i=0;i<chkList.length;i++)

              chkList[i].checked=false;

        document.getElementByIdx_x_x("<%=HiddenField1.ClientID %>").value="";

    }

}

后台执行删除事件

    protected void linkDeleteAll_Click(object sender, EventArgs e)

    {

 

        string type = this.HiddenField1.Value;

        if (type != "")

        {

            string[] keyValue = type.Split(',');

            foreach (string keyName in keyValue)

            {

              

                BLL.Message.Delete(Convert.ToInt32(keyName));

            }

 

            this.HiddenField1.Value = "";

            this.M_RepeatertBind((string)ViewState[vsKey]);

        }

        else

        {

            Page.ClientScript.RegisterStartupScript(typeof(string), "msg", "<script>alert('请选择需要删除的记录!')</script>");

        }

}

或者使用SQL语句的in,如

delete from student where id in(1,2,3)

这样也可以

基本流程就是这样,相比第一种方法感觉有些麻烦,不过都能解决问题,适合自己的就可以!

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (392人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------