对于后台系统来说最重要的就是表格的 增删改查
同时要完成增删改查最先的。也就是最重要的就是获取数据，也就是先把数据的列表整出到页面
先贴下效果
jsp的代码（html就不用了）：
<script>
layui.use(['form', 'table','layuimini','element'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
layuimini = layui.layuimini;
table.render({
elem: '#currentTableId',
url: '/staffs/getAll',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50, fixed: "left"},
{field: 'id', width: 80, title: 'ID', sort: true},
{field: 'deptName', width: 80, title: '部门'},
{field: 'name', width: 80, title: '用户名'},
{field: 'sexName', width: 80, title: '性别', sort: true},
{field: 'age', width: 80, title: '年龄'},
{field: 'workAge', title: '工龄',width:80},
{field: 'number', width: 80, title: '身份证'},
{title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
]],
limits: [2, 15, 20, 25, 50, 100],
limit: 15,
page: true
});
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var result = JSON.stringify(data.field);
layer.alert(result, {
title: '最终的搜索信息'
});
//执行搜索重载
table.reload('currentTableId', {
page: {
curr: 1
}
, where: {
searchParams: result
}
}, 'data');
return false;
});
// 监听添加操作
$("body").on("click",".data-add-btn", function () {
// $(".data-add-btn").on("click", function () {
var content = layuimini.getHrefContent('layuimini-onepage/page/table/add.html');
var openWH = layuimini.getOpenWidthHeight();
var index = layer.open({
title: '添加用户',
type: 1,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: [openWH[0] + 'px', openWH[1] + 'px'],
offset: [openWH[2] + 'px', openWH[3] + 'px'],
content: content,
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
});
// 监听删除操作
$("body").on("click",".data-delete-btn", function () {
// $(".data-delete-btn").on("click", function () {
var checkStatus = table.checkStatus('currentTableId')
, data = checkStatus.data;
layer.alert(JSON.stringify(data));
});
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
var content = layuimini.getHrefContent('layuimini-onepage/page/table/add.html');
var openWH = layuimini.getOpenWidthHeight();
var index = layer.open({
title: '编辑用户',
type: 1,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: [openWH[0] + 'px', openWH[1] + 'px'],
offset: [openWH[2] + 'px', openWH[3] + 'px'],
content: content,
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
} else if (obj.event === 'delete') {
layer.confirm('真的删除行么', function () {
console.log(obj)
$.ajax({
url:"/staffs/del?id="+obj.data.id,
success:function(data){
if(data){
table.reload('currentTableId')
layer.msg("删除成功！")
}else {
layer.msg("删除失败！")
}
},
error:function () {
layer.msg("删除失败！")
}
})
});
}
});
});
</script>
后端代码（附带增加删除操作）
package cn.edu.controller;
import cn.edu.model.Staff;
import cn.edu.service.StaffDataServiceImpl;
import cn.edu.service.StaffServiceImpl;
import cn.edu.utils.Layui;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
/***
* @date 2020/2/13
* @author ZZS
*/
@Controller
@RequestMapping("/staffs")
public class StaffJson {
@Autowired
private StaffServiceImpl staffService;
@Autowired
private StaffDataServiceImpl staffDataService;
/***
*
* @param page 页码
* @param limit 每页数
* @return json
*/
@RequestMapping("/getAll")
@ResponseBody
public Layui getAll(Integer page,Integer limit){
Staff staff = new Staff();
List<Staff> list = staffService.fine(staff);
Integer count = list.size();
//count 总长度
PageHelper.startPage(page,limit);
list = staffService.fine(staff);
return Layui.data(count,list);
}
@RequestMapping("/del")
@ResponseBody
public Boolean del(Integer id){
return staffService.delete(id);
}
@RequestMapping(value = "/add",method = RequestMethod.POST)
@ResponseBody
public Boolean add(Staff staff){
return staffService.add(staff);
}
}
后端是不是很简单！！！
这就是使用前端框架的原因，结合一下，可以节省很多工作
下面说一下需要的环境或者可能发生的错误
后端环境需要
<!--json解析包-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.8</version>
</dependency>
layui工具
package cn.edu.utils;
import java.util.HashMap;
import java.util.List;
public class Layui extends HashMap<String, Object> {
public static Layui data(Integer count, List<?> data){
Layui r = new Layui();
r.put("code", 0);
r.put("msg", "");
r.put("count", count);
r.put("data", data);
return r;
}
}
以上是为了返回layui所需要的数据格式
分页看你写不写了，我用的是mybatis的插件分页工具
执行操作的时候我都用的layui的表格重载，可能会发生一些点击事件失效的麻烦
可以吧点击事件改成
// 监听添加操作
$("body").on("click",".data-add-btn", function () {
// $(".data-add-btn").on("click", function () { 这个可能会导致表格重载后 add按钮点击失效（没反应）
