啓動SpringBoot項目後，瀏覽器訪問：http://localhost:8082/table.html
最終效果如下：
SpringBoot負責提供數據的增刪查改方法，LayUI負責顯示數據及管理數據。
項目結構
重點展示LayUi部分代碼：
table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui 後臺table調試</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- <table class="layui-hide" id="demo" lay-filter="test"></table> -->
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">刪除</a>
</script>
<!--點擊後才顯示-->
<div class="layui-row" id="popUpdateTest" style="display:none;">
<div class="layui-col-md10">
<form class="layui-form layui-from-pane" lay-filter="aaa" action="" style="margin-top:20px">
<!--不加id，更新時找不到id，更新會失敗, 添加hidden屬性隱藏-->
<div class="layui-form-item" hidden="true">
<label class="layui-form-label">編號</label>
<div class="layui-input-block">
<input type="text" name="id" placeholder="請輸入編號" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">名字</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="請輸入名字" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性別</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">電話</label>
<div class="layui-input-block">
<input type="text" name="tell" required lay-verify="required" placeholder="請輸入電話" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地址</label>
<div class="layui-input-block">
<input type="text" name="addr" required lay-verify="required" placeholder="請輸入地址" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-top:40px">
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="demo11">確認修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(['table', 'jquery', 'layer', 'form'], function () {
var table = layui.table;
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
//表格數據
table.render({
elem: '#demo'
,height: 312
,url:"custumerTable" //數據接口
,request: {
pageName:'current' //默認爲page
,limitName:'size' //默認爲limit
}
, parseData: function (res) {
console.log('返回的值', res);
console.log('datalist', res.data.records);
return {
"code": res.code, //code爲0表格才能讀到數據
"data": res.data.records, //解析數據列表
"msg": res.message, //解析提示文本
"count": res.data.total, //解析數據長度，一定要寫這句，否則分頁點不了
};
}
, cols: [[ //表頭
{type: 'checkbox', fixed: 'left'}
, {field: 'id', title: '編號', width: 80, sort: true, fixed: 'left', totalRowText: '合計：'}
, {field: 'name', title: '姓名', width: 80}
, {field: 'sex', title: '性別', width: 80, sort: true}
, {field: 'tell', title: '聯繫電話', width: 200}
, {field: 'addr', title: '地址', width: 150}
, {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
]]
, page: true //開啓分頁
, toolbar: 'default'//工具圖標
});
//監聽頭工具欄事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id)
, data = checkStatus.data; //獲取選中的數據
switch (obj.event) {
case 'add':
layer.msg('添加');
adduser();
break;
case 'update':
if (data.length === 0) {
layer.msg('請選擇一行');
} else if (data.length > 1) {
layer.msg('只能同時編輯一個');
} else {
layer.alert('編輯 [id]：' + checkStatus.data[0].id);
var data1 = data[0];
console.log("新data1爲：", data1);
updateuser(obj, data1);
}
break;
case 'delete':
if (data.length === 0) {
layer.msg('請選擇一行');
} else {
console.log("data[0].id爲", data[0].id);
layer.msg('刪除');
deleteuser(data[0].id);
}
break;
}
;
});
//監聽行工具事件
table.on('tool(test)', function (obj) {
var data = obj.data;
var id = data.id;//選中行的id
console.log("data數據爲：", data);
console.log("id數據爲：", data.id);
if (obj.event === 'edit') {
// layer.alert('編輯行：<br>' + JSON.stringify(data))
updateuser(obj, data);
} else if (obj.event === 'delete') {
layer.confirm('真的刪除行麼', function (index) {
// obj.del();
layer.close(index);
deleteuser(id);
});
}
});
//添加用戶
function adduser() {
layer.open({
//layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
type: 1,
title: "修改客戶信息",
area: ['420px', '330px'],
content: $("#popUpdateTest")//引用的彈出層的頁面層的方式加載修改界面表單
});
console.log("測試輸出");
//監聽提交
form.on('submit(demo11)', function (message) {
// console.log(data.field);
var field = message.field;
console.log(field);
$.ajax({
type: "post",
url: "custumerTable/insert",
data: JSON.stringify(field),
contentType: 'application/json',
datatype: "json",
success: function (resp) {
console.log(resp);
layer.closeAll();//關閉所有的彈出層
if (resp.code == 0) {
layer.msg("添加成功", {icon: 6});
//刷新數據
$(".layui-laypage-btn").click();
} else {
layer.msg("添加失敗", {icon: 5});
}
}
});
return false
});
}
//編輯更新用戶
function updateuser(obj, data) {
//回填數據到表單
form.val("aaa", {
"id": data.id
, "name": data.name
, "sex": data.sex
, "tell": data.tell
, "addr": data.addr
});
layer.open({
//layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
type: 1,
title: "修改客戶信息",
area: ['420px', '330px'],
content: $("#popUpdateTest")//引用的彈出層的頁面層的方式加載修改界面表單
});
console.log("修改原始數據爲：", data);
console.log("id類型", typeof data.id);
console.log("obj爲：", obj);
form.on('submit(demo11)', function (massage) {
console.log("message爲：", massage);
console.log(massage.field);
var data1 = massage.field;
$.ajax({
type: "post",
url: "/custumerTable/update",
data: JSON.stringify(massage.field),
// data: { id: data.id, name: data1.name, sex: data1.sex, tell: data1.tell, addr: data1.addr },
contentType: 'application/json',
datatype: "json",
success: function (resp) {
console.log(resp);
layer.closeAll();//關閉所有的彈出層
if (resp.code == 0) {
layer.msg("修改成功", {icon: 6});
//刷新數據
$(".layui-laypage-btn").click();
} else {
layer.msg("修改失敗", {icon: 5});
}
}
})
return false
})
}
//刪除用戶
function deleteuser(idList) {
var url = "custumerTable/delete?idList=" + idList;
console.log("url爲：", url);
$.ajax({
type: "post",
url: url,
contentType: 'application/json',
datatype: "json",
success: function (resp) {
console.log(resp);
if (resp.code == 0) {
layer.msg("刪除成功", {icon: 6});
//刷新數據
$(".layui-laypage-btn").click();
} else {
layer.msg("刪除失敗", {icon: 5});
}
}
})
return false;
}
});
</script>
</body>
</html>
項目地址：
https://github.com/jipsonliang/SpringBoot-LayUI-Table-Demo
完成！ enjoy it!