repeater全选

Repeater控件是个轻量级的数据绑定控件，一般用它来输出要求相对简单的数据  。本文介绍了在Repeater控件中实现checkbox的全选，一起来看  。

• 　　Repeater 控件是模板化的数据绑定列表，Repeater 控件是“无外观的”，即：它不具有任何内置布局或样式，也就不会产生任何数据控制表格来控制数据的显示  。因此，我们必须在控件的模板中明确声明所有 HTML 布局标记、格式标记和样式标记  。下面主要介绍了一个例子，功能是在Repeater控件中实现checkbox的全选  。

  　　今天做项目，做到一个Repeater控件内部的复选框权限效果，感觉有点麻烦，现在整理一下，贡献给大家!

  　　一、HTML代码：

  　　

  [html] view plain copy print ?

  1. <input name="CheckAll" type="checkbox" value="" onclick="FormSelectAll('form1','CheckBox',this);" />    
  2. //用于选择是否全选的复选框，用javascript函数“FormSelectAll(form1,CheckBox,this); ”实现全选效果，具体参数下文在详细解释   
  3. <form id="form1" runat="server">  
  4. <asp:Repeater ID="RptList" runat="server" >  
  5. <ItemTemplate>  
  6. <input name="CheckBox" id="CheckBox" runat="server" type="checkbox" value=<%# DataBinder.eval_r(Container.DataItem, "F_JobID")%> />    
  7. //使用Repeater 控件绑定checkbox控件，用于选择单项内容   
  8. ItemTemplate>  
  9. asp:Repeater>    
  10. form>  

  <input name="CheckAll" type="checkbox" value="" onclick="FormSelectAll('form1','CheckBox',this);" />   
  //用于选择是否全选的复选框，用javascript函数“FormSelectAll(form1,CheckBox,this); ”实现全选效果，具体参数下文在详细解释  
  <form id="form1" runat="server"> 
  <asp:Repeater ID="RptList" runat="server" > 
  <ItemTemplate> 
  <input name="CheckBox" id="CheckBox" runat="server" type="checkbox" value=<%# DataBinder.eval_r(Container.DataItem, "F_JobID")%> />   
  //使用Repeater 控件绑定checkbox控件，用于选择单项内容  
  ItemTemplate> 
  asp:Repeater>   
  form> 
  

  
  

  　　

  　　二、Javascript实现全选效果：

  　　

  [html] view plain copy print ?

  1. function FormSelectAll(formID,EleName,e) //formID：目标复选框组所在的form表单的ID属性；Elename：目标复选框组共同的Name属性；e：用于标识是否全选的复选框自身，用户判断是“全选”还是“全不选”   
  2. {   
  3. var Elements = document.getElementById(formID).elements; //获取目标复选框组所在的Form表单   
  4. for (var i = 0; i < Elements.length;i++)   
  5. {   
  6. if (Elements[i].type == "checkbox" && Elements[i].name.indexOf(EleName) >= 0) //根据对象类型和对象的name属性判断是否为目标复选框   
  7. {   
  8. Elements[i].checked = e.checked; //根据用于控制的复选框的选中情况判断是否选中目标复选框   
  9. }   
  10. }   
  11. }  

  function FormSelectAll(formID,EleName,e) //formID：目标复选框组所在的form表单的ID属性；Elename：目标复选框组共同的Name属性；e：用于标识是否全选的复选框自身，用户判断是“全选”还是“全不选”  
  {  
  var Elements = document.getElementById(formID).elements; //获取目标复选框组所在的Form表单  
  for (var i = 0; i < Elements.length;i++)  
  {  
  if (Elements[i].type == "checkbox" && Elements[i].name.indexOf(EleName) >= 0) //根据对象类型和对象的name属性判断是否为目标复选框  
  {  
  Elements[i].checked = e.checked; //根据用于控制的复选框的选中情况判断是否选中目标复选框  
  }  
  }  
  } 
  

  
  

  　　

  　　三、服务器端执行代码：

  　

  [html] view plain copy print ?

  1. for (int i = 0; i < this.RptList.Items.Count; i++)　    
  2. //根据Repeater 控件的情况执行循环判断目标复选框是否被选中   
  3. {   
  4. HtmlInputCheckBox CB = (HtmlInputCheckBox)this.RptList.Items[i].FindControl("CheckBox");    
  5. //获取一个目标复选框情况   
  6. if (CB.Checked == true) //判断该复选框是否被选中   
  7. {   
  8.   。  。  。  。  。 //程序处理代码   
  9. }   
  10. }