实现原理：通过索引id的值编写delete删除语句。jsp界面效果：layer.confirm弹出提示框，并通过ajax中post请求实现异步提交、页面不刷新，提高效率
一、效果实现
二、数据准备
user表
三、代码实现
1、bean层—UserInfo.java
@AllArgsConstructor
@NoArgsConstructor
@Data
public class UserInfo implements Serializable{
/**
*
*/
private static final long serialVersionUID = -6943242013517012358L;
private Integer id;
private String userId;
private String userName;
private String password;
@JsonFormat(timezone = "GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
private Date registerTime;
private Boolean state;
}
2、mapper层—UserInfoMapper.java UserInfoMapper.xml
2.1 UserInfoMapper.java
public interface UserInfoMapper {
public void deleteUserInfoById(Integer id);
}
2.2 UserInfoMapper.xml
<delete id="deleteUserInfoById" parameterType="UserInfo">
delete from user where id=#{id}
</delete>
3、service层—UserInfoService.java UserInfoServiceImpl.java
3.1 UserInfoService.java
public interface UserInfoService {
public void deleteUserInfoById(Integer id);
}
3.2 UserInfoServiceImpl.java
@Transactional
@Service
public class UserInfoServiceImpl implements UserInfoService{
@Autowired
private UserInfoMapper userInfoMapper;
@Override
public void deleteUserInfoById(Integer id) {
userInfoMapper.deleteUserInfoById(id);
}
}
4、controller层—UserInfoController.java
@Controller
public class UserInfoController {
@Autowired
private UserInfoService userInfoService;
@RequestMapping("/deleteUserInfoById")
public void deleteUserInfoById(Integer id) {
userInfoService.deleteUserInfoById(id);
}
}
5、jsp界面—list_user.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<title>用户列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="switchTpl">
<!-- 这里的 checked 的状态只是演示 -->
<input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="管理员|用户" lay-filter="stateDemo" {{ d.state == true ? 'checked' : '' }} >
</script>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData"><i class="layui-icon"></i> 搜索用户</button>
<button class="layui-btn layui-btn-sm" lay-event="register"><i class="layui-icon"></i> 新增用户</button>
<button class="layui-btn layui-btn-sm" lay-event="deleteSelectedUsers"><i class="layui-icon"></i>批量删除</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="js/jquery-3.4.1.js" charset="utf-8"></script>
<script src="layui/layui.all.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use(['table','form'], function() {
var table = layui.table,
form = layui.form;
table.render({
elem : '#test',
url : 'findAllUsers',
toolbar : '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,
defaultToolbar : [ 'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title : '提示',
layEvent : 'LAYTABLE_TIPS',
icon : 'layui-icon-tips'
} ],
title : '用户数据表',
cols : [ [{
type : 'checkbox',
fixed : 'left'
},{
field : 'id',
title : 'ID',
name : 'ids',
width : 80,
fixed : 'left',
unresize : true,
sort : true
}, {
field : 'userId',
title : '用户ID',
width : 150
},{
field : 'userName',
title : '用户名',
width : 150
}, {
field : 'registerTime',
title : '创建日期',
width : 200
}, {
field : 'state',
title : '状态',
width : 120,
templet : '#switchTpl',
unresize : true
}, {
fixed : 'right',
title : '操作',
toolbar : '#barDemo',
width : 150
} ] ],
page : true
});
//头工具栏事件
table.on('toolbar(test)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'register':
/* window.location.href = 'register.jsp'; */
layer.open({
type:2,
title:'新增用户',
area:['500px','400px'],
shade:0.3,
maxmin:true,
offset:'auto',
anim:2,
content:'register.jsp'
});
break;
case 'deleteSelectedUsers':
var data = checkStatus.data;
if (data.length>0) {
layer.confirm('您确定要删除选中的用户吗？',function(index){
var ids = [];
data.forEach(function(row,i){
ids.push(row.id);
});
$.post('deleteByIds',{ids:ids+''},function(msg,status){
if(status='success'){
window.location.reload();
}else{
layer.msg(msg);
}
});
layer.close(index);
});
}else{
layer.msg('至少要选择一个用户');
}
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
}
;
});
//监听行工具事件
table.on('tool(test)', function(obj) {
var data = obj.data;
console.log(obj)
if (obj.event === 'del') {
layer.confirm('真的删除行么', function(index) {
$.post('deleteUserInfoById', {
id : data.id
});//异步提交，页面不刷新，效率提高
obj.del();
layer.close(index);
});
} else if (obj.event === 'edit') {
layer.open({
type: 2,
title:'编辑用户',
area:['500px','400px'],
shade:0.3,
maxmin:true,
offset:'auto',
anim:2,
content: 'edit_user.jsp?id='+data.id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
}
});
//监听状态操作
form.on('switch(stateDemo)', function(obj) {
var jsonData = {id:this.value,state:obj.elem.checked};
$.ajax({
type:'post',
url:'updateById',
data:JSON.stringify(jsonData),
contentType:'application/json',
dataType:'json',
success:function(data,status){
console.log('success:'+data);
if (data=='1') {
layer.msg('状态已修改');
}
},
error:function(data){
console.log('data:'+data);
}
});
});
});
</script>
</body>
</html>
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
