(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);" />全选
<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";
}
附加提示:如果有在表单里面的话,这个批量删除要放在表单之外,否则会报错