数据表格（纯前端）
快速使用
首先需要引入layui的css和js
<link rel="stylesheet" href="../static/layui/css/layui.css">
<script src="../static/layui/layui.js" charset="utf-8"></script>
然后再定义一个table标签，并写入js代码即可快速使用
<table id="demo"></table>
<script>
layui.use('table',function () {
var table = layui.table;
table.render({
elem: "#demo",//绑定table的id
url: "../static/layui/user.json",//数据接口
cols: [[
{field: 'aa', type: 'numbers'},
{field: 'bb', type: 'checkbox'}, // 开启复选框
{field: 'id', title: '用户编号', sort: true, width: 120, hide: true}, // 隐藏该列
{field: 'username', title: '用户名', width: 100, edit: 'text'},
{field: 'sex', title: '性别', sort: true, width: 80},
{field: 'city', title: '城市', sort: true, width: 80},
{field: 'sign', title: '签名', width: 80, edit: 'text'}
]],
page: true //开启分页
});
})
</script>
数据接口的数据格式为：code必须为0
最后的效果
头部工具栏
先定义一个script代码
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
获取选中行数据
</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
获取选中数目
</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">
验证是否全选
</button>
</div>
</script>
lay-event就是后面绑定事件的id
然后在table.render里设置绑定id
table.render({
elem: "#demo",//绑定table的id
url: "../static/layui/user.json",//数据接口
cols: [[
{field: 'aa', type: 'numbers'},
{field: 'bb', type: 'checkbox'}, // 开启复选框
{field: 'id', title: '用户编号', sort: true, width: 120, hide: true},
{field: 'username', title: '用户名', width: 100, edit: 'text'},
{field: 'sex', title: '性别', sort: true, width: 80},
{field: 'city', title: '城市', sort: true, width: 80},
{field: 'sign', title: '签名', width: 80, edit: 'text'}
]],
page: true,//开启分页
// 设置表头工具栏
toolbar:"#toolbar"
});
效果
不过这三个按钮点击了都没反应，这是因为我们还没有绑定事件
这时再在table上指定一个lay-filter用于下面绑定
<table id="demo" lay-filter="test"></table>
然后再layui.use中编写事件代码（可以通过console.log(obj)在控制台打印出obj数据查看其中的数据）
//头监听事件
table.on('toolbar(test)',function (obj){
//console.log(obj);
// 获取当前表格被选中的记录对象，返回数据
var checkStatus = table.checkStatus(obj.config.id);
console.log(checkStatus);
// 获取事件名，执行对应的代码
var eventName = obj.event;
switch (eventName) {
case "getCheckData":
// 获取被选中的数组
var arr = checkStatus.data;
// 将数组解析成字符串
layer.alert(JSON.stringify(arr));
break;
case "getCheckLength":
var arr = checkStatus.data;
layer.msg("选中了"+arr.length+"条记录");
break;
case "isAll":
//通过isall属性判断是否全选
var flag = checkStatus.isAll;
var str = flag?"全选":"未全选";
layer.msg(str);
break;
}
});
最后的效果就是点击后上述三个选项会完成各自的功能
表格工具栏
先定义一个script代码
<!-- 表格工具栏-->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
然后再cols中增加一列来绑定script代码
// 设置表格工具栏
{field: '操作',toolbar:'#barDemo'}
效果
然后再layui.use中编写事件代码
// 监听行工具栏事件
table.on('tool(test)',function (obj) {
//得到当前操作行的相关信息
var tr = obj.data;
console.log(tr);
// 得到事件名，判断执行
var eventName = obj.event;
// 删除
if (eventName == 'del'){
// 确认框
layer.confirm('确认删除吗？',function (index) {
// 删除指定tr
obj.del();
//关闭弹出层,index是当前弹出层的的下标
layer.close(index);
});
}else if (eventName=='edit'){//编辑
//输出框
layer.prompt({
// 表单元素的类型 0=文本框 1=密码框 2=文本域
formType:0,
value:tr.username//设置输入框的值
},function (value,index) {
//修改指定单元格的值
// value表示输入的值
obj.update({
username:value
});
//关闭弹出层
layer.close(index);
});
}
});
分页
在后端把所有的数据取出来，然后再在前端进行分页
通过在table.render（{}）中的parseData:function (res) {）方法来对取出的数据进行分页
parseData:function (res) {
var result;
console.log(res);
console.log(this.page.curr);//this.page.curr为当前的页码
if(this.page.curr){
//若为第二页 则curr为2 页面显示的数据就是从res.data集合数组里的 （2-1）*limit（10）=10 到 limit（10）*2=20的数据
result = res.data.slice
(this.limit*(this.page.curr-1),this.limit*this.page.curr);
// string.slice(start, end)，表示截取从start下标到end下标的字符串（左闭右开）
}
else {
// 一开始就是第一页 则就是 显示的数据就是从res.data集合数组里的0到limit（10）中
result = res.data.slice(0, this.limit);
}
// 最后返回规定的数据格式
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
},
limit:5,
limits:[3,5,10]
最后的效果
如果选择要在后端进行分页的话，要注意layui会在你给的数据接口后面自动传入一个page（当前是第几页）和limit（每页的限制）参数，在后台接收了这两个参数，根据参数编写对应的后台代码
数据表格（java后端）
采用的是前端分页，通过java在后端取出所有数据（把url的地址改成后端的就行了）然后传给前端进行分页
table.render里的规范数据参数
parseData:function (res) {// 对从后端获得的数据进行规范，最后返回四个键值对
var result;
// console.log(res);
// console.log(this.limit);
if(this.page.curr){
//若为第二页 则curr为2 页面显示的数据就是从res.data集合数组里的
//（2-1）*limit（10）=10 到 limit（10）*2=20的数据
//slice（）跟java的substring类似，slice是将键值对的键根据索引
//以左闭右开的形式截取
result = res.data.slice
(this.limit*(this.page.curr-1),this.limit*this.page.curr);
}
else {
// 一开始就是第一页 则就是 显示的数据就是从res.data集合数组里的
//0到limit（10）中
result = res.data.slice(0, this.limit);
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
增
1、定义一个表头工具栏
<!-- 表头工具栏（新增）-->
<script type="text/html" id="addbook">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">
新增
</button>
</div>
</script>
2、绑定id
lay-event是后面要绑定事件的id
然后在table.render里设置绑定id
toolbar: "#addbook"//绑定表头工具栏的id
3、编写javascript代码
在layui.use里编写对应的新增事件
// 表头工具栏（新增）
table.on('toolbar(bookdata)',function (obj) {
console.log(obj)
var eventName = obj.event
// 新增
if (eventName=='add'){
layer.open({
type:1,
title:"新增",
content:layui.$('#addone'),
btn:['确定','取消'],
yes:function(index, layero){
// 取出输入框的内容
var bn = layui.$('#bName').val()
var bc = layui.$('#bCount').val()
var bd = layui.$('#bDetail').val()
console.log(bn)
console.log(bc)
console.log(bd)
// 如果有一项数据未填，则弹出提示框
if (bn==''||bc==''||bd==''){
layer.open({
title: '<div style="color:red">错误</div>'
,content: '请填写每个数据'
});
// 如果书籍数量不是整数，则弹出提示框
} else if (bc.length!=String(parseInt(bc)).length||!Number.isInteger(parseInt(bc))){
layer.open({
title: '<div style="color:red">错误</div>'
,content: '请正确填写数量(数量应为整数)'
});
} else{
//向服务端发送新增指令
// '/book/addbook'
layui.$.ajax({
type: 'post',
url: '/book/addbook',
data: {'bookName':bn,
'bookCounts':bc,
'detail':bd},
success:function (msg) {
}
})
layer.open({
title: '<div style="color:#44ff00">完成</div>'
,content: '增加成功'
});
layer.close(index)
}
}
})
}
});
上面layer.open里content绑定的id
<!--新增表格的具体内容,display: none表示隐藏（编辑和新增共用的表格）-->
<div style="display: none" id="addone">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">书籍名称</label>
<div class="layui-input-block">
<input id="bName" type="text" name="bookName" lay-verify="title" autocomplete="off" placeholder="请输入书名" class="layui-input" required>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">书籍数量</label>
<div class="layui-input-block">
<input id="bCount" type="text" name="bookCounts" lay-verify="title" autocomplete="off" placeholder="请输入数量" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">书籍详情</label>
<div class="layui-input-block">
<input id="bDetail" type="text" name="detail" lay-verify="title" autocomplete="off" placeholder="请输入备注" class="layui-input">
</div>
</div>
</form>
</div>
4、后端java对应的代码
后端新增的java代码
// 新增一本书籍
@RequestMapping("/addbook")
@ResponseBody
public String addbook(Books books){
System.out.println("进入了addbook方法"+books);
mapper.insertBook(books);
return "ok";
}
5、效果
点击新增后，弹出界面，这里对数量和三个数据都不为空作了判断（数据不能为空，数量必须是整数）
如果数据为空，会弹出提示框
如果数据不为整数，会弹出提示框
删+改
1、先定义一个表格工具栏
<!-- 表格工具栏（编辑和删除）-->
<script type="text/html" id="bookbar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
2、绑定
然后在table.render里的cols参数中新增一栏绑定表格工具栏
// 设置表格工具栏
{field: '操作',toolbar:'#bookbar'}
3、编写javascript代码
在layui.use里编写对应的删除和编辑事件，弹出层与上面新增共用一个界面
//表格工具栏（编辑和删除）
table.on('tool(bookdata)',function (obj) {
var eventName = obj.event;
var bookid = obj.data.bookID;
console.log(bookid)
//console.log(obj);
console.log(eventName)
// 删除
if (eventName == 'del'){
// 确认框
layer.confirm('确认删除吗？',function (index) {
// 前端删除指定tr
obj.del()
//关闭弹出层,index是当前弹出层的的下标
layer.close(index);
//向服务端发送删除指令
// '/book/delbook'
layui.$.ajax({
type: 'get',
url: '/book/delbook',
data: {'id':bookid},
success:function () {
console.log('ok')
}
})
});
}else if (eventName=='edit'){// 修改
// 将所要编辑的内容先显示出来
layui.$('#bName').val(obj.data.bookName)
layui.$('#bCount').val(obj.data.bookCounts)
layui.$('#bDetail').val(obj.data.detail)
layer.open({
type:1,
title:"编辑",
content:layui.$('#addone'),
btn:['确定','取消'],
yes:function(index, layero){
// 取出输入框的内容
var bn = layui.$('#bName').val()
var bc = layui.$('#bCount').val()
var bd = layui.$('#bDetail').val()
console.log(bn)
console.log(bc)
console.log(bd)
// 如果有一项数据未填，则弹出提示框
if (bn==''||bc==''||bd==''){
layer.open({
title: '<div style="color:red">错误</div>'
,content: '请填写每个数据'
});
// 如果书籍数量不是整数，则弹出提示框
} else if (bc.length!=String(parseInt(bc)).length||!Number.isInteger(parseInt(bc))){
layer.open({
title: '<div style="color:red">错误</div>'
,content: '请正确填写数量(数量应为整数)'
});
} else{
//向服务端发送修改指令
// '/book/updatebook'
layui.$.ajax({
type: 'post',
url: '/book/updatebook',
data: {'bookID':bookid,
'bookName':bn,
'bookCounts':bc,
'detail':bd},
success:function (msg) {
console.log(msg)
}
})
layer.open({
title: '<div style="color:#44ff00">完成</div>'
,content: '修改成功'
});
// 前端更新数据
obj.update({
bookID:bookid,
bookName:bn,
bookCounts:bc,
detail:bd
})
layer.close(index)
}
}
})
}
});
4、后端java对应的代码
// 删除书籍
@RequestMapping("/delbook")
@ResponseBody
public String delbook( int id){
System.out.println("进入了delbook方法"+id);
int i = mapper.deleteBookById(id);
return " "+i;
}
//修改书籍
@RequestMapping("/updatebook")
@ResponseBody
public String updatebook(Books books){
System.out.println("进入了updatebook方法"+books);
int i = mapper.updateBook(books);
return ""+i;
}
6、效果
点击删除，出现提示框
点击编辑，会把该行的数据全都显示出来
修改后，点击确定会和上面的新增一样对数据进行判断（都不能为空，数量必须为整数）
