好文章需要耐心阅读…茶凡—Matrix
注意
本文中采用的是 thymeleaf + springboot + java + layui 来创建的项目,如果单纯写html可能会有一些区别。
1、删除按钮事件
选中要删除的行,点击按钮删除数据。
🥙根据表格的tableId 获取表格状态对象。
🥙再根据表格状态对象获取到一条数据的主键字段,提交这个字段给后台删除数据
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>首页</title>
<link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
</head>
<body class="layui-layout-body">
<!--头-->
<!--在html的head元素中通过th:replace属性引入,值为模板的路径,
不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)-->
<div th:replace="head :: header"></div>
<div class="layui-body layui-container" style="margin:70px 0px 0px 20px; ">
<table class="layui-hide" id="test" lay-filter='test'></table>
<div id="layerDemo">
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-submit lay-filter="delete">
<i class="layui-icon layui-icon-reduce-circle" style="font-size: 10px; color: white;"></i>删除
</button>
</div>
</div>
<script type="text/javascript" th:inline="none" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
<script>
layui.use(['table', 'layer','laypage','form'], function () {
var $ = layui.jquery,
layer = layui.layer,
laypage = layui.laypage,
form = layui.form,
table = layui.table;
table.render({
elem: '#test',
id: 'tableId',
url: 'parent/getParentList',
method:'get',
title: '用户信息表',
totalRow: true,
height: 520,
width:550,
cols: [
[
{type: "numbers", fixed: 'aa'}
,{type: "checkbox", fixed: 'aa'}
, {field: 'studentName', title: '学生姓名', width: 100}
, {field: 'personNo', title: '学号', sort:true ,width: 120}
, {field: 'departmentId', title: '班级', width: 80 }
, {field: 'parentDeptId', title: '年级', width: 80}
]
],
page: true , // 分页
elem: '#test',
limit:10,
parseData: function (res) {
var result;
console.log(this);
console.log(JSON.stringify(res));
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
} else {
result = res.data.slice(0, this.limit);
}
return {"code": res.code, "msg": res.msg, "count": res.data.length, "data": result};
}
});
// 删除用户
form.on('submit(delete)',function(data){
var checkStatus = table.checkStatus('tableId'); //idTest 即为基础参数 id 对应的值
console.log(checkStatus.data[0].personNo) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量,可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选
$.ajax({
url:'/parent/deleteParent',
type:'POST',
data:{
"id": checkStatus.data[0].personNo
},
success:function(data){
if(data.code==1){
layer.msg("删除成功",function() {time:1000});
parent.location.reload();
}else{
layer.msg("删除失败",function() {time:1000})
}
}
})
})
});
</script>
</body>
</html>
2、后台接口数据格式
后台的就不贴代码了,文章末尾可以获取
茶凡_Matrix仓亏地址:(CommuteRate: 通勤率后台初版 (gitee.com))