实现思路:
1. checkbox全选获取批量删除的id数组
2. ajax以字符串的形式将id数组传给控制器
3. 控制器将字符串分割成List数组作为参数传给mapper
具体代码:
1. 前端代码
<table>
<thead>
<tr>
<th>#</th>
<th>id</th>
<th>文件名</th>
<th>文件类型</th>
<th>上传时间</th>
<th>上传用户</th>
<th>文件大小</th>
</tr>
</thead>
<tbody>
<tr th:each="resource:${resources}">
<td>
<input type="checkbox" name="checkId" id="checkId" th:value="${resource.id}"/>
</td>
<td th:text="${resource.id}">Row 1 Data 1</td>
<td th:text="${resource.fileName}">Row 1 Data 2</td>
<td th:text="${resource.fileType}">Row 1 Data 1</td>
<td th:text="${resource.fileTime}">Row 1 Data 2</td>
<td th:text="${resource.fileUploader}">Row 1 Data 1</td>
<td th:text="${resource.fileSize}">Row 1 Data 2</td>
</tr>
</tbody>
</table><br>
<input type="checkbox" name="selectAll" id="selectAll" onclick="selectAll(this);">全选 
<button type="button" onclick="deleteLogic();">批量删除</button>
2. js代码
/**
* checkbox全选/全不全
* @param checkbox
*/
function selectAll(checkbox) {
$('input[name="checkId"]').prop('checked', $(checkbox).prop('checked'));
}
/**
* 批量删除
*/
function deleteLogic() {
var checkNum = $("input[name='checkId']:checked").length;
if(checkNum==0){
alert("至少选择一项");
return;
}
if(confirm("确定要删除吗?")){
var checkList = new Array();
$("input[name='checkId']:checked").each(function () {
checkList.push($(this).val())
});
}
$.ajax({
url:"/deleteAll",
type:"post",
data:{
checkList:checkList.toString()
},
datatype:"json",
success:function (data) {
location.reload();
alert("删除成功!")
},
error:function (msg) {
alert("删除失败!")
}
})
}
3. Controller代码
@PostMapping("/deleteAll")
@ResponseBody
public String deleteAll(String checkList){
System.out.println("==>"+checkList);
String[] strs = checkList.split(",");
List<Integer> ids = new ArrayList<>();
for(String str:strs){
ids.add(Integer.parseInt(str));
}
resourcesService.deleteAll(ids);
return "success";
}
4. mapper.xml代码
<delete id="deleteAll" parameterType="list">
delete from resources where id in
<foreach collection="list" item="id" open="(" close=")" separator=",">
#{id}
</foreach>
</delete>
