GridView中实现类邮件的CheckBox全选功能

假设GridView名称为gvMain, 操作选中项的处理按钮是ibSuoDing

首先在你的GridView列中增加一模板列,模板列的相关信息如下：

< asp:TemplateField  HeaderText ="选择" >
       < HeaderTemplate >
        < input  id ="cbHeaderChecked"  name ="cbHeaderChecked"  onclick ="return SelectChecked()"  type ="checkbox"   /> <!-- 在头部增加CheckBox全选/全消选择框 -->
       </ HeaderTemplate >
       < ItemStyle  HorizontalAlign ="Center"  VerticalAlign ="Middle"  Width ="5%"   />
       < HeaderStyle  HorizontalAlign ="Center"   />
       < ItemTemplate >
        < input  id ="cbChecked"  runat ="server"  name ="cbChecked"  type ="checkbox"   /> <!-- 为绑定的每一行增加选择框 -->

< input  id ="HiddenSysCode"  runat ="server"  style ="width: 193px"  type ="hidden"  value ='<%#  string.Format("{0}",DataBinder.Eval(Container.DataItem, "iSysCode"))% > ' /> <!-- 这行很重要，它在一个隐藏控件里放置了一个字段的值，该字段的值将会在按钮事件处理CheckBox选中项的操作中用到 -->
       </ ItemTemplate >
</ asp:TemplateField >  

全选和全消的JavaScript事件,由GridView顶部的CheckBox激发

< script language = " javascript " >
   function  SelectChecked()
   ... {
   var t = document.getElementsByTagName("input");
      
   for(var i=0; i<t.length; i++)
   ...{
    if (t[i].type == "checkbox" && t[i].name.indexOf("cbChecked") != -1)
    ...{
        t[i].checked = document.all.item("cbHeaderChecked").checked;
    }
   }
  }
   </ script >

选中和取消选中的操作已经结束，后面我们来处理一下提交按钮对选择结果的判断处理

< asp:ImageButton  ID ="ibSuoding"  runat ="server"  ImageUrl ="~/Images/Button/suoding.gif"  OnClick ="ibSuoding_Click"  onClientClick ="return CheckForm()"   /> <!-- onClientClick事件绑定检查操作 -->

脚本检查行前的CheckBox是不是处于选中状态

< script language = " javascript " >
   function  CheckForm()
   ... {
   var m=0;
   var t=document.getElementsByTagName("input");    //获取页面中类型为input的元素个数
      
   for(var i=0;i<t.length;i++)
   ...{

//判断是不是CheckBox控件，并通过名称indexOf("cbChecked") != -1方法来判断是不是GridView中的CheckBox,还判断了是不处理选中状态
    if (t[i].type == "checkbox" && t[i].name.indexOf("cbChecked") != -1 && t[i].checked == true)
     ...{
         m++;
     }
   }
 
   if (m == 0)
   ...{
    alert("请选择想要处理的项！");
    return false ;
   }
   else
   ...{
     return confirm('您确定要处理选中的项吗？');  
   }
  }
   </ script >

当返回fasle的时候就停止操作，并且不进行回送。如果true则进行操作，就执行回送的Click事件

protected   void  ibSuoDing_Click( object  sender, ImageClickEventArgs e)
  ... {

string checkValue = RetrieveCheckValue(gvMain, "cbChecked", "HiddenSysCode")

//对取得的checkValue进行处理，如delete ..... where id in(" + checkValue + ")等等的数据库操作了

}

// 取选中值的函数
public   static   string  RetrieveCheckValue(GridView GridViewMain,  string  RowCheckBoxName,  string  RowHiddenInputName)
   ... {
   string a = "";

   foreach (GridViewRow GridViewMainItem in GridViewMain.Rows)
   ...{
    HtmlInputCheckBox chk = (HtmlInputCheckBox)(GridViewMainItem.FindControl(RowCheckBoxName));
    HtmlInputHidden hiInput = (HtmlInputHidden)(GridViewMainItem.FindControl(RowHiddenInputName));
    if (chk.Checked == true)
    ...{
     a += "," + hiInput.Value;
    }
   }

   if (a != "")
   ...{
    a = a.Substring(1, a.Length - 1);
   }
   return a;
  }

至此一个类邮件的全选、全消，和对选中的结果进行处理的页面就做了，你可以把这些再精简一下，或者放到类库中统一调用。将会节省不少的代码和时间。