如何在全选，反选后进行批量删除数据

（1）首先将编写的sel.js文件复制到js文件夹

sel.js文件的代码如下：

//全选

function selectAll(oval) {
 var chs = document.getElementsByName("ch");
 for ( var i = 0; i < chs.length; i++) {
  chs[i].checked = oval;
 }
 var cha = document.getElementById("cbxReSel");
 cha.checked = false;
}

//反选
function reSelect() {
 var chs = document.getElementsByName("ch");
 for ( var i = 0; i < chs.length; i++) {
  chs[i].checked = chs[i].checked ? false : true;
 }
 var cha = document.getElementById("cbxSelAll");
 cha.checked = false;
}
/**
 * 批量删除数据

* @return
 */
function deleteAll() {
 var idStr="";
 if ($("input[name='ch']:checked").size() <= 0) {
  alert("你没有选择删除对象，请先选择");
  return;
 }
 if (confirm('是否确认删除！')) {
  $("input[name='ch']:checked").each(function() {
   if (idStr != "") {
    idStr += ',';
   }
   idStr += $(this).val();
  });
   window.location='SysArti_deleteAll?idString='+idStr;
  
 } else {
  return;
 }
}

 

（2）在你需要删除的页面导入这个sel.js文件

1.  <!-- 导入全选，反选批量删除的js文件 -->
<script type="text/javascript" language="javascript" src="js/sel.js" ></script>

2. 设置全选，反选的复选框

 <input type="checkbox" id="cbxSelAll" οnclick="selectAll(this.checked);" />全选 &nbsp;&nbsp; 
 <input type="checkbox" id="cbxReSel" οnclick="reSelect();" />反选     

3. 设置遍历时的前面的复选框属性

  <c:forEach var="emps" items="${list}">
     <tr>
   
        <td height="20" bgcolor="#FFFFFF"><div align="center">
           <input type="checkbox" name="ch" value="${emps.e_id }" />  //需要注意之处
        </div></td>

        <td height="20" bgcolor="#FFFFFF" class="STYLE6"><div align="center"><span class="STYLE19">${emps.e_id }</span></div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">${emps.e_name }</div></td>
         <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">${emps.e_pwd }</div></td>
         <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">${emps.e_year }</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">${emps.role.r_name }</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">${emps.dep.d_name}</div></td>
         <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">${emps.e_gender }</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">${emps.e_age}</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center" class="STYLE21">${emps.e_pay }</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">${emps.e_time }</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">${emps.e_email }</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">${emps.e_contact }</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center" class="STYLE21"><a href="SysEmp_delete?empId=${emps.e_id }" οnclick="return confirm('是否要删除员工数据?')"> 删除</a> |
        <a href="#" οnclick="ShowDIV('DialogDiv2',${emps.e_id },'${emps.e_time }','${emps.e_name }','${emps.e_pwd }',${emps.e_year },${emps.role.r_id },${emps.dep.d_id },'${emps.e_gender}',${emps.e_age},${emps.e_pay },'${emps.e_email }','${emps.e_contact }')"> 修改</a></div></td>

      </tr>
        </c:forEach>

 

4.设置批量删除按钮

<tr>
   <td align="left">
     <input type="submit" name="Empdel" id="Empdel"  οnclick="deleteAll()" value="批量删除" style="background-color:#B6DFFA;border:solid 1px #D3EAEF" />
   </td>
  </tr>

 

（3）在struts的action的相应类中取一个属性idString,来接收从js中传过来的要进行删除的id字符串

//从页面传过来要进行批量删除的id字符串
 private String idString;

//此处省略set和get方法

/**
  * 批量删除方法
  * @return
  */
 public String deleteAll()
 {
  String[] ids=idString.split(",");  //对传过来的id字符串进行分割
  for(int i=0;i<ids.length;i++)
  {
   int id=Integer.parseInt(ids[i]);
   biz.delete(id);
  }
  
  return "ok";
  
 }

 

附加提示：如果有在表单里面的话，这个批量删除要放在表单之外，否则会报错