数据表格（纯前端）

快速使用

首先需要引入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的idurl: "../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的idurl: "../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) {// 删除指定trobj.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")@ResponseBodypublic 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) {// 前端删除指定trobj.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")@ResponseBodypublic String delbook( int id){System.out.println("进入了delbook方法"+id);int i = mapper.deleteBookById(id);return " "+i;}//修改书籍@RequestMapping("/updatebook")@ResponseBodypublic String updatebook(Books books){System.out.println("进入了updatebook方法"+books);int i = mapper.updateBook(books);return ""+i;}

6、效果

点击删除，出现提示框

点击编辑，会把该行的数据全都显示出来

修改后，点击确定会和上面的新增一样对数据进行判断（都不能为空，数量必须为整数）

layui数据表格的使用（前端和后端）相关推荐

Layui 数据表格多条件查询与后端交互
这里记录下layui数据表格多个查询条件数据提交查询,数据库返回对应数据,数据库使用第三方模块flask_sqlalchemy, 需要对flask及flask_sqlalchemy有一定的了解一.h ...
LayUI数据表格的使用指南
LayUI是现在比较流行的一款前端框架,数据表格也是后台管理中很长用到的工具了. 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮.之后就写了一 ...
layui数据表格某个字段不显示问题
表格是用layui数据表格的方法渲染方式渲染的大概这个样子 var table = layui.table;//执行渲染 table.render({elem: '#demo' //指定原始表格元素 ...
layui数据表格简单使用
为什么layui已经停止更新我们还在使用 1.layui是针对小型项目,对后端程序员比较友好,不用用太多的css等去调节样式! 进入主题:数据表格简单使用前端: 新建一个HTML文件引入layui. ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
LayUi数据表格数据太多导致下拉框卡顿问题
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例做出数据表格示例根据官网表格展示在layui官网数据表格示例中 https://www.layui.c ...
layui数据表格中导出所有数据的简易解决办法
layui数据表格中导出所有数据的简易解决办法官方文档的困惑解决办法官方文档的困惑首先要说明的是:layui在 table 的工具栏内置了数据导出按钮,如果你是用它内置的导出按钮来导出数据,是 ...
Thinkphp+layui数据表格实现表格分页
项目场景:Thinkphp+layui数据表格实现表格分页提示:thinkphp+layui数据表格分页,需要服务器端配合.之前在百度上一通乱搜也没找到解决方案. 问题描述提示:这里描述项目中遇到 ...
layui数据表格增加序号列（第二页从1开始 or 接上一页序号开始）
layui数据表格增加序号列: 一.分页模式下第二页从1开始 1.在table.render()方法中,加 {title: '序号', align: "center",temple ...

layui数据表格的使用（前端和后端）

数据表格（纯前端）

快速使用

头部工具栏

表格工具栏

分页

数据表格（java后端）

增

1、定义一个表头工具栏

2、绑定id

3、编写javascript代码

4、后端java对应的代码

5、效果

删+改

1、先定义一个表格工具栏

2、绑定

3、编写javascript代码

4、后端java对应的代码

6、效果

layui数据表格的使用（前端和后端）相关推荐

最新文章

热门文章