前端代码
<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实现复选框的删除，可以一起交流学习~
