LayUI表格渲染实现前后端交互
2024-06-22 12:26:12
方法渲染
初始化 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。
首先满足：
- 带有
class="layui-table"的 标签； - 对标签设置属性
lay-data=""用于配置一些基础参数； - 在
<th>标签中设置属性lay-data=""用于配置表头信息。
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.3/layui.js"></script><link src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.3/css/layui.min.css"></link></head><body><table class="layui-table" id="demo" lay-filter="test"> <!-- lay-data="{height:315, url:'/demo/table/user/', page:true, --><script>layui.use(['layer', 'form','table'], function(){var layer = layui.layer,form = layui.form,table = layui.table;layer.msg('Hello World');//第一个实例table.render({elem: '#demo',height: 312// ,url: '../../demo/table/user' //数据接口// ,page: true //开启分页,cols: [[ //表头{field: 'id', title: 'ID', width:80, sort: true},{field: 'username', title: '用户名', width:80},{field: 'sex', title: '性别', width:80, sort: true},{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177},{field: 'experience', title: '积分', width: 80, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'classify', title: '职业', width: 80},{field: 'wealth', title: '财富', width: 135, sort: true}]],//data : obj.data});});</script> </body>
</html>初始化一个表格：
同步数据
- 定义数据
let obj = {"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"man","city":"beiji","sign":"0","experience":90,"logins":24,"wealth":82830700,"classify":"111","score":57},
{"id":10001,"username":"user1","sex":"woman","city":"diqu","sign":"222","experience":884,"logins":58,"wealth":64928690,"classify":"xsissd","score":27},
{"id":10002,"username":"user-2","sex":"man","city":"shhdd","sign":"sdsds","experience":650,"logins":77,"wealth":6298078,"classify":"s1111","score":31},
{"id":10003,"username":"user3","sex":"ffffdsd","city":"lddsk","sign":"sdnskj","experience":362,"logins":157,"wealth":37117017,"classify":"dsdsd","score":68},
{"id":10004,"username":"user-4","sex":"man","city":"fdff","sign":"fdfdf","experience":807,"logins":51,"wealth":76263262,"classify":"fdfd","score":6},
{"id":10005,"username":"user-5","sex":"fdfdf","city":"fdfdf","sign":"fdfdf","experience":173,"logins":68,"wealth":60344147,"classify":"fdfdfd","score":87},
{"id":10006,"username":"user-6","sex":"fdfdf","city":"fdfdf","sign":"fdaaa","experience":982,"logins":37,"wealth":57768166,"classify":"2121sds","score":34}]}
初始化数据定义在初始化表格之前（js单线程）：
配置cols的
field为返回数据响应的字段。初始化时添加
data属性，对应[{},{},{}....]
//第一个实例
table.render({elem: '#demo',height: 312,cols: [[ //表头{field: 'id', title: 'ID', width:80, sort: true},{field: 'username', title: '用户名', width:80},{field: 'sex', title: '性别', width:80, sort: true},{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177},{field: 'experience', title: '积分', width: 80, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'classify', title: '职业', width: 80},{field: 'wealth', title: '财富', width: 135, sort: true}]],data : obj.data
});
data对应list列表即可。
异步数据
- 控制器返回数据
返回如果返回数据是下面所示，更改url后可以直接渲染。
{"code": 0,"msg": "","count": 1000,"data": [{}, {}]
}
//修改url为控制器地址
,url: 'http://localhost:8080/test/datalist' //数据接口
示例：
后台返回不规范数据：
修改url地址：
<script>
layui.use(['layer', 'form','table'], function(){var layer = layui.layer,form = layui.form,table = layui.table;layer.msg('Hello World');//第一个实例table.render({elem: '#demo',height: 312,url: 'http://localhost:8080/test/datalist' //数据接口,cols: [[ //表头{field: 'id', title: 'ID', width:80, sort: true},{field: 'username', title: '用户名', width:80},{field: 'sex', title: '性别', width:80, sort: true},{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177},{field: 'experience', title: '积分', width: 80, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'classify', title: '职业', width: 80},{field: 'wealth', title: '财富', width: 135, sort: true}]]})
});
</script>
code只能为0，返回的数据也不规范无法自动渲染所以报错。
除了上面的不规范数据外还有如下这种，返回数据结果一致，但是字段不对应的情况，如下：
{"code1": 0,"msg1": "hello","count1": 10,"rankObjList": [{"id": 1,"username": "user","sex": "男","city": "Beijing","sign": "签名","experience": 90,"score": 90,"classify": "职业","wealth": "财富"}]
}
这样的数据就需要通过parseData: function(res){}函数转化转化一下。
,parseData: function(res){ //res 即为原始返回的数据return {"code": res.code1, //解析接口状态"msg": res.msg1, //解析提示文本"count": res.count1, //解析数据长度"data": res.rankObjList//解析数据列表}
}
转化为标准的规范的数据格式。
<script>
layui.use(['layer', 'form','table'], function(){var layer = layui.layer,form = layui.form,table = layui.table;layer.msg('Hello World');//第一个实例table.render({elem: '#demo',height: 312,url: 'http://localhost:8080/test/datalist' //数据接口
// ,page: true //开启分页,cols: [[ //表头{field: 'id', title: 'ID', width:80, sort: true},{field: 'username', title: '用户名', width:80},{field: 'sex', title: '性别', width:80, sort: true},{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177},{field: 'experience', title: '积分', width: 80, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'classify', title: '职业', width: 80},{field: 'wealth', title: '财富', width: 135, sort: true}]],parseData: function(res){ //res 即为原始返回的数据return {"code": res.code, //解析接口状态"msg": res.msg, //解析提示文本"count": res.count, //解析数据长度"data": res.rankObjList//解析数据列表}}})});
</script>
成功渲染：
自动渲染
自动渲染发生在html中如需过多的js，直接在html中配合相应的参数，地址即可：
<table class="layui-table" lay-data="{height:315, url:'http://localhost:8080/test/datalist', page:true, id:'demo'}" lay-filter="test"><thead><tr><th lay-data="{field:'id', width:80, sort: true}">ID</th><th lay-data="{field:'username', width:80}">用户名</th><th lay-data="{field:'sex', width:80, sort: true}">性别</th><th lay-data="{field:'city'}">城市</th><th lay-data="{field:'sign'}">签名</th><th lay-data="{field:'experience', sort: true}">积分</th><th lay-data="{field:'score', sort: true}">评分</th><th lay-data="{field:'classify'}">职业</th><th lay-data="{field:'wealth', sort: true}">财富</th></tr></thead>
</table>
<script>layui.use(['layer', 'form','table'], function(){var layer = layui.layer,form = layui.form,table = layui.table;layer.msg('Hello World');//第一个实例table.render({elem: '#demo'}) });
</script>
需要注意的html中渲染数据必须是标准数据类型。
返回标准数据类型：
成功渲染：
LayUI表格渲染实现前后端交互相关推荐
- SpringBoot+AntV实现一次前后端交互渲染多个饼状图
场景 效果 SpringBoot+AntV实现饼状图中的花瓣图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92810169 ...
- 微信小程序【网易云音乐实战】（第二篇 轮廓图、阿里巴巴的矢量图标、滚动条、前后端交互、列表渲染）
下面通过webStrom来写代码,通过微信开发者工具来调试! 本篇最终效果图: 这里写目录标题 一.轮播图 二. 五个小图标 1. 将阿里巴巴矢量图标转换为本地的 2. 项目使用图标 三.滚动条 sc ...
- 前后端交互——Ajax
前后端交互Ajax Ajax jQuery中的ajax $.get() $.post() $.ajax() 案例:图书列表 Ajax Ajax 即"AsynchronousJavascrip ...
- 前后端交互详解(建议收藏)
1.前后端认知 相信很多人心里都有一个疑惑:我⼀个前端, 为什么要学习后端? 那么到底什么是前端? 什么是后端? 什么是数据库? 1.1 基本组织架构 我们是⼀个 前端开发⼯程师 还有⼀个⼯作叫做后端 ...
- 前后端交互，网络请求
这边文章主要根据我自己的前端开发工作经验,东拼西凑出来的一点理解,希望能够对大家有点帮助,如果有误导或者错误的地方还请帮助指正,感谢!!! 前后端交互我理解主要分为三个主要的部分: 1.客户端 2.服 ...
- [原创]前后端交互的方式整理
前言 本来我只是想整理下前后端如何传输数据这种交互过程,大概流程如下: 前台使用ajax通过get/post等方式提交数据到后端 后端如何获取参数 经过业务处理后,返回前端对应的响应数据 前端接受到响 ...
- 写给刚入门的前端工程师的前后端交互指南
转自原文 写给刚入门的前端工程师的前后端交互指南 作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据 ...
- Mysql+Echarts+Python+Flask实现前后端交互及数据可视化
前言 社区版Pycharm实现python+flask+echarts+Mysql实现简单的前后端交互. 新手入门,记录经验,欢迎交流. 一.首先检测Flask框架是否成功? 首先,在你的项目下中安装 ...
- # Odoo丨Odoo框架源码研读一：前后端交互
Odoo丨Odoo框架源码研读一:前后端交互 本期内容 Odoo框架源码研读之 前后端交互 Odoo框架是一款企业应用快速开发平台,适用于各种规模的企业应用,安装与使用十分广泛. Odoo框架源码的第 ...
最新文章
- 脑电数据的Epoching处理
- 理解单例模式、单例类
- jQuery之换肤与cookie插件
- linux查询用过的历史命令,在linux中,怎麼查看系统的版本,怎麼查看自己用过的历史命令...
- 闲来无事，仿了一个百度杀毒主界面
- 洛谷P2144 bzoj1002 [FJOI2007]轮状病毒 (高精度板子)
- Spry Framework入门（四）——XML数据集排序
- 取色工具和RGB网页颜色在线取色器
- Android URLEncoder和URLDecoder
- appium安装教程
- uniapp适配pc_uniapp+Html5端实现PC端适配
- C3: 基金名称末尾 A 和 C 的区别
- 【学习笔记】维基百科中文数据处理（NLP）
- Java xml格式化工具
- win10如何通过局域网从浏览器访问ip
- Codeforces D. Omkar and Bed Wars
- 苹果电脑IOS ssh远程关机
- flutter之包管理
- 有备无患 婚宴发言经典串场词摘录
- 不会有人运营独立站还不知道聊天机器人吧？五分钟带你深入了解AI聊天机器人！
热门文章