result.put(“count”, page.getTotalElements());
result.put(“data”, page.getContent());
return result;
}
}
返回的JSON数据（只有返回的JSON数据格式一样数据就可以显示出来了）。
{
“msg”: “”,
“number”: 3,
“code”: 0,
“data”: [
{
“id”: 2,
“isUsed”: true,
“name”: “张三”,
“username”: “123456”,
“tbClass”: {
“id”: 1,
“name”: “软件工程1班”,
“teacher”: “张老师”
},
“grade”: 99.0
}, {
“id”: 3,
“isUsed”: null,
“name”: “刘备”,
“username”: “admin”,
“tbClass”: {
“id”: 1,
“name”: “软件工程1班”,
“teacher”: “张老师”
},
“grade”: null
}, {
“id”: 4,
“isUsed”: null,
“name”: “诸葛亮”,
“username”: “admin1”,
“tbClass”: {
“id”: 2,
“name”: “软件工程2班”,
“teacher”: “李老师”
},
“grade”: null
}
],
“count”: 3
}
数据返回后，就可以看到页面上显示的页面了。
上面是显示的单表数据，在实际开发中，常遇到关联表的数据显示。用以下方法可以显示关联表数据。
{field : ‘tbClass’, title : ‘班级’,
templet : function(d) { //d表格当前行的所有数据，如果班级对象不为空，就返回班级名称
return d.tbClass ? d.tbClass.name : ‘’;
}
},
数据显示完成后，下一步就是对数据的操作了（增删改查）。LayUI数据表格支持在表格上方自定义工具栏，也可以在每行后面定义操作按钮，先来看一下在表格上方定义工具栏。
定义增删改查工具栏代码。
注意：需要用script表格包裹起来，id用于绑定时使用，按钮上的lay-event属性用于监听按钮的操作。
之后在JS渲染代码中，通过toolbar属性绑定自定义的工具栏。
工具栏加载完成，页面显示。
工具栏添加后，可以通过以下方法，监听工具栏的点击事件，test为表格的id。
table.on(‘toolbar(test)’, function(obj){});
点击工具栏按钮，在控制台输出obj，可以发现，event的值，正是工具栏按钮中lay-event属性的值，可以通过他来判断点击的是哪个按钮，执行什么操作。
可以通过下面的代码获取到选中的数据，进行操作（删除修改）。
var checkStatus = table.checkStatus(‘student’);
var data = checkStatus.data;
点击新增按钮方法，打开一个layer弹框，显示新增表单，先请求后台拿到新增页面代码，之后弹框显示。弹框定义了两个按钮，确定取消，点击确定按钮会提交表单内容到后台进行保存操作。
$.post(“student/edit”, function(data){
layui.use(‘layer’, function(){
layer.open({
title: ‘学生管理’,
type: 1,
shade: 0.3,
maxmin: true,
content: data,
area: [‘500px’],
btn: [‘确定’, ‘取消’],
yes:function(){ //虚拟化表单参数类型不是json，所以这里用的是回调提交
},
//弹出层打开回调
success: function(layero, index){
var form=layui.form;
//找到确定按钮，添加属性，变成提交按钮
layero.addClass(‘layui-form’);
var submitBtn=layero.find(‘.layui-layer-btn0’);
submitBtn.attr(‘lay-filter’,‘formVerify’).attr(‘lay-submit’,‘’);
layero.keydown(function(e){
if(e.keyCode==13){
submitBtn.click();
}
});
form.on(‘submit(formVerify)’, function(data){
$.post(“student/save”, data.field, function(result){
if(result.success){
layer.close(index);
table.reload(‘student’,{where:that.where});
}
layer.msg(result.msg,{offset:‘rb’});
});
});
}
})
})
})
后台edit方法，请求新增修改页面代码，因为关联的有班级，所以把所有的班级查询出来传递到前台。新增和修改公用的一个方法和页面，用id作为区分的。
@Override
public void edit(StudentForm form, ModelMap map) throws InstantiationException, IllegalAccessException {
map.put(“tbClass”, tbClassService.findAll());
Student model = new Student();
Integer id = form.getId();
if(id!=null) {
model=studentService.findById(id);
}
map.put(“model”, model);
}
edit页面代码，model为传递过来的对象，如果是新增就为null，修改就显示修改的值。
后台保存方法。
@RequestMapping(value=“/save”)
@ResponseBody
public Object save(StudentForm form) throws InstantiationException, IllegalAccessException {
try {
Student model=new Student();
Integer id = form.getId();
if(id!=null) {
model=studentService.findById(id);
}
BeanUtils.copyProperties(form, model,“id”);
studentService.save(model);
return new AjaxResult(“数据保存成功”);
} catch (Exception e) {
return new AjaxResult(false,“数据保存失败”);
}
}
其中接收参数的StudentForm类中和实体类字段一样，通过id是否为null来判断是修改还是新增。AjaxResult是方法执行完成后，返回前台的一个类代码如下。
public class AjaxResult {
private Boolean success;
private String msg;
public Boolean getSuccess() {
return success;
}
public void setSuccess(Boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public AjaxResult(String msg) {
super();
this.success=true;
this.msg = msg;
}
public AjaxResult(Boolean success, String msg) {
super();
this.success = success;
this.msg = msg;
}
public AjaxResult(boolean success) {
this.success=success;
}
@SuppressWarnings(“rawtypes”)
public static HashMap<String, Object> bulidPageResult(Page page) {
HashMap<String, Object> result=new HashMap<>();
result.put(“total”, page.getTotalElements());
result.put(“rows”, page.getContent());
return result;
}
}
效果如下。
修改部分JS代码，修改需要先判断一下是否勾选了，勾选一行才能执行修改操作。
if(data.length != 1){
layer.msg(‘请选择一行进行编辑’, {offset: ‘rb’});
}else{
var id = data[0].id;
$.post(“student/edit”, {id: id}, function(data){
layui.use(‘layer’, function(){
layer.open({
title: ‘学生管理’,
type: 1,
shade: 0.3,
maxmin: true,
content: data,
area: [‘500px’],
btn: [‘确定’, ‘取消’],
yes:function(){
},
success: function(layero, index){
var form=layui.form;
layero.addClass(‘layui-form’);
var submitBtn=layero.find(‘.layui-layer-btn0’);
submitBtn.attr(‘lay-filter’,‘formVerify’).attr(‘lay-submit’,‘’);
layero.keydown(function(e){
if(e.keyCode==13){
submitBtn.click();
}
});
form.on(‘submit(formVerify)’, function(data){
$.post(“student/save”, data.field, function(result){
if(result.success){
layer.close(index);
table.reload(‘student’,{where:that.where});
}
layer.msg(result.msg,{offset:‘rb’});
});
});
}
})
})
});
}
因为修改和新增都是公用的一个方法，所以后台，页面都和新增的方法一样，下面看一下效果图。
删除方法，JS部分代码，删除相对来说就简单很多了，只需要把选中的行id拼接起来，传递到后台进行删除就可以了。
if(data.length < 1){
layer.msg(‘请选择需要删除的行’, {offset: ‘rb’});
}else{
layer.confirm(‘确定要删除选中的’+data.length+‘条数据吗？’, function(index) {
var str = “”;
for(i = 0; i < data.length; i++){
str += data[i].id+“,”;
}
str = str.substring(0, str.length-1);
$.post(“student/delete1”, {ids: str}, function(result){
table.reload(‘student’,{where:that.where});
layer.close(index);
layer.msg(result.msg,{offset:‘rb’});
});
});
}
后台删除方法。
@RequestMapping(value = “delete1”)
@ResponseBody
public Object delete(String ids) {
try {
String[] split = ids.split(“,”);
for(int i = 0; i < split.length; i++) {
studentService.deleteById(Integer.parseInt(split[i]));
}
return new AjaxResult(“数据删除成功”);
} catch (Exception e) {
return new AjaxResult(false,“数据删除失败”);
}
}
最后就是刷新方法了，刷新也是最简单的。只有执行table.reload(‘student’, {where:that.where});方法，刷新表格，重新加载一下数据就可以了。
增删改查，就差一个查询了查询方法你可以同上面新增和修改方法一样用一个弹框显示查询条件也可以，也可以在表格上方定义查询表单，这里案例是在表格上方定义的查询表单。
在表格上方加上下面的代码，查询表单。
查询
清空
先自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以扫码领取！
本次面试答案，以及收集到的大厂必问面试题分享：
type=“button” class=“layui-btn layui-btn-radius layui-btn-normal” οnclick=“empty()”>
清空
先自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-9yWK62H2-1711395104427)]
[外链图片转存中…(img-7wlMVCNx-1711395104427)]
[外链图片转存中…(img-kiIRrohP-1711395104427)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以扫码领取！
本次面试答案，以及收集到的大厂必问面试题分享：
[外链图片转存中…(img-S9M453kT-1711395104428)]
需要更多Java资料的小伙伴可以帮忙点赞+关注，点击传送门，即可免费领取！
2620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
