本文介绍使用layui框架实现表格复选框批量删除功能的方法，包括前端代码设置、JavaScript交互逻辑及后端处理流程。
前端代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/layui.css">
<style>
.layui-table-cell{
text-align:center;
/*height: auto;*/
white-space: normal;
height:90px;
line-height: 90px;
}
.layui-upload{margin-left: 100px}
</style>
</head>
<body>
<div class="demoTable layui-form">
搜索：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<div class="layui-input-inline" style="width:150px;">
<select name="roleList" id="sList" lay-verify="required" lay-filter="xmFilter">
<option value="0">请选择</option>
</select>
</div>
<button class="layui-btn" data-type="reload">查询</button>
<button type="button" class="layui-btn" id="addUser">添加</button>
<button type="button" class="layui-btn" id="delUser">删除</button>
</div>
<table class="layui-table"
lay-data="{width: 1250, height:510, url:'userList', page:true, id:'idTest'}"
lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox', fixed: 'left'}"></th>
<th lay-data="{field:'id', width:100, sort: true, fixed: true}">ID</th>
<th lay-data="{field:'photo', width:130,templet:imgtmp}">头像</th>
<th lay-data="{field:'usercode', width:148}">用户编号</th>
<th lay-data="{field:'username', width:148, sort: true}">用户名称</th>
<th lay-data="{field:'gender', width:80, sort: true,templet:changeGender}">性别</th>
<th lay-data="{field:'birthday', width:178, sort: true}">生日</th>
<th lay-data="{field:'creationdate', width:178, sort: true, fixed: 'right'}">创建时间</th>
<th lay-data="{fixed: 'right', width:220, align:'center', toolbar: '#barDemo'}"></th>
</tr>
</thead>
</table>
<!--功能区域-->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">下载</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
</script>
<script type="text/html" id="imgtmp">
<img src="{{d.photo}}" style="width: 108px;height: 100px">
</script>
<!--修改页面隐藏区域-->
<div id="updateTest" style="display: none">
<form class="layui-form" action="" lay-filter="updateData">
<div class="layui-form-item">
<label class="layui-form-label">用户名称</label>
<!--隐藏id-->
<input type="hidden" name="id">
<input type="hidden" name="photo">
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入名称" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">生日</label>
<div class="layui-input-inline">
<input type="text" name="birthday" id="date" lay-verify="date"
placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地址</label>
<div class="layui-input-inline">
<input type="text" name="address" lay-verify="title" autocomplete="off" placeholder="请输入地址" class="layui-input">
</div>
</div>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传头像</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" name="photoDemo" height="50px" width="80px">
<input type="hidden" name="photo">
<p id="demoText"></p>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="addSubmit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body>
<script src="layui.js"></script>
<script src="js/main.js"></script>
</html>
js代码
$("#delUser").bind("click",function () {
//获得表格CheckBox已经选中的行的信息
var checkStatus = table.checkStatus('idTest');
//定义数组存放批量删除的行的id
var listId = [];
//获得所有选中行的数据
var datas = checkStatus.data;
//进行遍历所有选中行数据，拿出每一行的id存储到数组中
$.each(datas, function (i, data) {
listId.push(data.id);
});
if (listId.length <= 0) {
layer.msg("请选择要删除的行", {icon: 2})
} else {
layer.confirm('真的删除行么', function (index) {
$.ajax({
url: "delAll",
type: "post",
contentType: "application/json;charset=UTF-8",
dataType: 'json',
data: JSON.stringify({"listId": listId}),
success: function (res) {
console.log(res);
if (res.count == 1) {
table.reload('idTest', {
page: {
curr: $(".layui-laypage-em").next().html() //重新从当前页开始
}
});
}
}
});
layer.close(index);
//向服务端发送删除指令
});
}
});
后端
@RequestMapping("/delAll")
@ResponseBody
public Object delAll(@RequestBody JSONObject obj){
Map<String,Object> maps = new HashMap<>();
//将json对象序列化为json字符串
//String data = obj.toJSONString();
//将json字符串反序列化为json字符串
//JSONObject json = JSON.parseObject(data);
//解析json数据
String ids = obj.getString("listId");
JSONArray idsArray=JSONArray.parseArray(ids);
for(int i=0;i<idsArray.size();i++){
userService.delUser(Long.valueOf(idsArray.get(i).toString()));
System.out.println("========="+ idsArray.get(i));
maps.put("count",1);
}
return maps;
}
实现
##分享***** 关于layui实现复选框的删除，可以一起交流学习~
扫一扫
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
