1.上篇文章讲了easyui的分页和模糊搜索功能，这篇文章基于上篇文章，在上篇文章基础上使用easyui
来完成批量删除功能
2.因为easyui和其他前台框架不一样，所以使用传统的js操作达不到效果，页面及js代码如下所示：本篇重点是批量删除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.3/themes/icon.css">
</head>
<body>
<div style="padding:3px" class="easyui-panel">
<span>班级或辅导员名称模糊查询:</span>
<input id="mohu" style="line-height:26px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-add">新增</a>
<a href="#" class="easyui-linkbutton" plain="true" onclick="del()" icon="icon-remove">删除</a>
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-save">编辑</a>
</div>
<table id="dgs" title="文章管理" class="easyui-datagrid" fitColumns="true" pagination="true"
toolbar="#tb" rownumbers="true">
<thead>
<tr>
<th field="idx" checkbox="true" class="chj" align="center"></th>
<!--<th field="tid" width="20" align="center" hidden="true"></th>-->
<th field="loanSumNum" width="200" >贷款人数</th>
<th field="className" width="100" align="center">班级名称</th>
<th field="classSumNum" width="100" align="center">班级人数</th>
<th field="teacherName" width="100" align="center">老师名称</th>
<th field="fdyName" width="100" align="center">辅导员名称</th>
<th field="fdyNum" width="100" align="center">辅导员编号</th>
</tr>
</thead>
</table>
<script src="js/jquery.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script>
$(function(){
queryData();
})
function queryData(){
//注意：本来我的url是写在table标签中的，但是那样的话参数不好传递需要拼接，所以把url动态写
$("#dgs").datagrid({
collapsible: true,
url: "../../fysq",
method: 'POST',
queryParams: {"mohu":$("#mohu").val() },
sortName: 'title',
loadMsg: "数据加载中...",
//数据展示我写的静态的在table中，也可以用下面的动态的进行展示
// columns:[[
// {title: '学号', field: 'id', width: 200, align: 'center'},
// {title: '班级名称', field: 'className', width: 100, align: 'center'},
// {title: '班级人数', field: 'classSumNum', width: 100, align: 'center'},
// {title: '老师名称', field: 'teacherName', width: 100, align: 'center'},
// {title: '辅导员名称', field: 'fdyName', width: 100, align: 'center'},
// {title: '辅导员编号', field: 'fdyNum', width: 100, align: 'center'},
// ]]
});
//自定义分页条的样式，因为默认的可读性不是很好
var p = $('#dgs').datagrid().datagrid('getPager');
p.pagination({
pageSize: 10,
pageList: [10, 20, 30, 40, 50],
beforePageText: '第',
//下面这几个参数就用就这个名称不用改
afterPageText: '共{pages}页',
displayMsg: '当前显示 {from} 到 {to} ,共{total}记录',
// onSelectPage: function (pageNumber, pageSize) {
// }
})
}
function doSearch(){
queryData();
}
//点击删除按钮触发该函数
function del(){
//获取选中行的数据,返回的是数组
//获取选中行的数据
var selectRows = $("#dgs").datagrid("getSelections");
//如果没有选中行的话，提示信息
if (selectRows.length < 1) {
$.messager.alert("提示消息", "请选择要删除的记录！", 'info');
return;
}
$.messager.confirm("确认消息", "确定要删除所选记录吗？", function (isDelete) {
//如果为真的话
if (isDelete) {
//定义变量值
var strIds = "";
//拼接字符串，这里也可以使用数组，作用一样
for (var i = 0; i < selectRows.length; i++) {
strIds += selectRows[i].idx + ",";
}
//循环切割
strIds = strIds.substr(0, strIds.length - 1);
$.ajax({
type:'post',
dataType:'json',
data:{'strIds':strIds},
url:'../../banchDelete',
success:function(data){
if(data.success=='ok'){
$.messager.alert('提示', '删除成功！');
$("#dg").datagrid("reloads"); //删除成功后 刷新页面
}else{
$.messager.alert('提示信息', '删除失败，请联系管理员！', 'warning');
}
}
})
}
});
}
</script>
</body>
</html>3.controller
@ResponseBody
@RequestMapping("/banchDelete")
public Map<String,Object> deleteBanch(String strIds){
//批量删除
Map<String,Object> map=new HashMap<String,Object>();
int k= dataShowService.banchDelete(strIds);
if(k>0){
map.put("success","ok");
map.put("msg","删除成功");
}else{
map.put("msg","删除失败");
}
return map;
}4.service
int banchDelete(String strIds);5.serviceImpl:使用List集合向后传递参数
@Override
public int banchDelete(String strIds) {
String arr[]=strIds.split(",");
List list=new ArrayList();
for(int i=0;i<arr.length;i++){
list.add(arr[i]);
}
return dataShowServiceMapper.banchDelete(list);
}6.dao
int banchDelete(List list);7.mapper
<delete id="banchDelete" parameterType="java.util.List">
delete from classtable where idx in
<foreach collection="list" item="has" open="(" separator="," close=")">
#{has}
</foreach>
</delete>参数说明：
classtable: 表名， idx: 字段名，
collection:表示类型,这里参数是数组,就写成array,如果是集合,就写成list ，
item : 是一个变量名,自己随便起名
注意：这个for循环语句一定要自己手写，不要复制，我复制的没有错但是运行就报错了，特别坑爹，我自己敲了一遍才行了，当时快崩溃了，这个坑一定要注意，我用的idea