前言
1.使用layui与后端进行交互
2.列表展示数据
3.使用layer弹出层进行添加和修改
4.批量删除数据
这篇文章的重点不是在后端，所以在这里，后端的话，我就不详细的讲解了。我只提供一下返回的数据格式类型。
1.后端
1.1后端调用的接口
@Controller
@RequestMapping("studentApi")
public class StudentController {
@Resource
private StudentService studentService;
//根据ID删除学生信息
@GetMapping("/deleteByStudentId}")
@ResponseBody
public DataResult deleteByStudentId(@RequestBody List studentId){
DataResult result = new DataResult<>();
result.setBody(studentService.deleteById(studentId));
return result;
}
//添加学生信息
@PostMapping("/insertStudent")
@ResponseBody
public DataResult insertStudent(@RequestBody Student student){
DataResult result = new DataResult<>();
result.setBody(studentService.insertSelective(student));
return result;
}
//修改学生信息
@PostMapping("/updateStudent")
@ResponseBody
public DataResult updateStudent(@RequestBody Student student){
DataResult result = new DataResult<>();
result.setBody(studentService.updateByPrimaryKeySelective(student));
return result;
}
//查询学生信息-分页显示
@GetMapping("/selectStudentByPage")
@ResponseBody
public Map selectStudentByPage(@RequestParam("page") Integer page , @RequestParam("limit") int limit){
return studentService.getStudentList(page,limit);
}
}
1.2后端返回的数据格式类型
{
"msg": "",
"code": 0,
"data": [
{
"studentId": 1,
"studentName": "王xxx",
"studentSno": "131303031",
"studentAge": "20",
"studentQq": "756316064",
"studentEmail": "[email protected]",
"studentPic": "/images/user.jpg",
"studentSex": "男",
"professionId": 1,
"createTime": "2019-08-23",
"professionName": "信息管理与信息系统",
"apartment": "数学与计算机性科学学院",
"school": "泉州师范学院"
},
{
"studentId": 2,
"studentName": "花花",
"studentSno": "121303001",
"studentAge": "20",
"studentQq": "56546732",
"studentEmail": "[email protected]",
"studentPic": "/images/default.png",
"studentSex": "男",
"professionId": 4,
"createTime": "2019-09-02",
"professionName": "大数据科学与技术",
"apartment": "数学与计算机性科学学院",
"school": "泉州师范学院"
}
],
"count": 7
}
2.前端
2.1前端界面（JSP）
需要引入layui框架哦
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
学生管理
学生管理
<%-- 表格--%>
2.2 前端界面(JavaScript)
2.2.1 将数据以表格的方式展现在页面上
layui.use('table', function() {
var table = layui.table;
table.render({
id: 'studentTable',
elem: '#demo'
,method:'get'
, defaultToolbar: []
, url: ctx + '/studentApi/selectStudentByPage' //数据接口
, page: true //开启分页
, cols: [[ //表头
{field: 'checkbox', type: 'checkbox'}
, {field: 'number', title: '序号', type: 'numbers'}
, {field: 'studentSno', title: '学号', width: 120}
, {field: 'studentName', title: '学生姓名', width: 100}
, {field: 'studentSex', title: '性别', width: 80}
, {field: 'studentAge', title: '年龄', width: 80}
, {field: 'studentEmail', title: '邮箱', width: 200}
, {field: 'studentQq', title: 'QQ', width: 200}
, {field: 'createTime', title: '创建时间', width: 120}
]]
, skin: 'line,row' //表格风格
, even: true
, limits: [10, 20, 30]
, limit: 10 //每页默认显示的数量
});
}
页面如下：
表格数据.png
注意：这里的返回格式需要按照layui官方给定的格式
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{}, {}]
}
当然，你也是可以自定义格式的
table.render({
elem: '#demp'
,url: ''
,response: {
statusName: 'status' //规定数据状态的字段名称，默认：code
,statusCode: 200 //规定成功的状态码，默认：0
,msgName: 'hint' //规定状态信息的字段名称，默认：msg
,countName: 'total' //规定数据总数的字段名称，默认：count
,dataName: 'rows' //规定数据列表的字段名称，默认：data
}
//,…… //其他参数
});
然后返回的数据格式:
{
"status": 200,
"hint": "",
"total": 1000,
"rows": []
}
具体参考：layui数据表格返回数据格式
2.2.2 表格数据的增删改
这里的话，我使用的是layui提供的一个toolbar - 绑定工具条模板,个人觉得还挺好用的。我们只需要在table.render{(toolbar: '#toolbars')}
下面的代码加到JSP中
下面的代码加到JS中
table.on('toolbar(studentfilter)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id);
var data = checkStatus.data; //获取选中的数据
switch (obj.event) {
case 'add':...
case 'delete':...
case 'update':...
})
新增
case 'add':
layer.open({
id: 'addStudent',
type: 1,
title: ['添加学生'],
skin: 'layui-layer-molv',
area: '500px',
offset: 'auto',
content: '' +
' ' +
' \n' +
' \n' +
'\n',
btn: ['提交', '取消']
, success: function(layero) {
layero.find('.layui-layer-btn').css('text-align', 'center');
},
btn1: function(index) {
//数据校验
var studentName = $.trim($('#studentName').val());
if(studentName==null&&studentName==''){
layer.msg('姓名不能为空',{icon:5,time:1500});
return;
}
var studentPassword = $.trim($('#studentPassword').val());
if(studentPassword==null&&studentPassword==''){
layer.msg('密码不能为空',{icon:5,time:1500});
return;
}
.....太多了，省点地方,照葫芦画瓢，copy一下就行了
// 提交
var student = {
studentName: studentName,
studentPassword: studentPassword
.....太多了，省点地方
};
// 向后台提交数据
insertStudent(student);
},
// 取消
btn2: function(index, layero) {
layer.close(index);
}
});
break;
添加界面：
添加.png
修改
修改的话，会稍微有点麻烦。我们先获取到表格里面的数据。
case 'update':
if (data.length == 0) {
layer.msg('请选择一行');
} else if (data.length > 1) {
layer.msg('只能选择一行');
} else {
layer.open({
id: 2,
type: 1,
title: ['课程修改'],
skin: 'layui-layer-molv',
area: '500px',
offset: 'auto',
content: '' +
' ' +
' \n' +
' \n' +
'\n',
btn: ['提交', '取消']
, success: function(layero) {
layero.find('.layui-layer-btn').css('text-align', 'center');
// 展示在弹出层里面
$('#studentName').val(data[0].studentName);
$('#studentAge').val(data[0].studentAge);
$('#studentSno').val(data[0].studentSno);
$('#studentSex').val(data[0].studentSex);
$('#studentQq').val(data[0].studentQq);
$('#studentEmail').val(data[0].studentEmail);
$('#studentPassword').val();
},
btn1: function(index) {
//数据校验
var studentName = $.trim($('#studentName').val());
if(studentName==null&&studentName==''){
layer.msg('姓名不能为空',{icon:5,time:1500});
return;
}
var studentPassword = $.trim($('#studentPassword').val());
if(studentPassword==null&&studentPassword==''){
layer.msg('密码不能为空',{icon:5,time:1500});
return;
}
// .......省略一部分没写
// 提交
var student = {
studentId: data[0].studentId,
studentPassword: studentPassword
.....省略没写哈
};
updateStudent(student);
},
btn2: function(index, layero) {
layer.close(index);
}
});
}
}
修改界面：
修改界面.png
删除
这里传输的对象是一个数组，可以参考：Ajax传递不同类型的参数
case 'delete':
if (data.length == 0) {
layer.msg('请选择一行');
} else {
//获取到需要删除的id数组
var length = data.length;
var studentId = [];
for (var i = 0; i < length; i++) {
studentId.push(data[i].studentId);
}
layer.confirm('是否删除？', {title: '提示'}, function(index) {
deleteStudent(studentId)
});
}
break;
删除界面
删除界面.png
大家觉得写得不错，可以点小心心哦，给个赞赏那就更好啦