Lay UI-异步加载数据格式说明

2021/4/9 10:28:41

本文主要是介绍Lay UI-异步加载数据格式说明,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

数据的异步请求由以下几个参数组成:

https://www.layui.com/doc/modules/table.html

参数名功能
url 接口地址。默认会自动传递两个参数:?page=1&limit=30(该参数可通过 request 自定义)
page 代表当前页码、limit 代表每页数据量
method 接口http请求类型,默认:get
where 接口的其它参数。如:where: {token: 'sasasas', id: 123}
contentType 发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:contentType: 'application/json'
headers 接口的请求头。如:headers: {token: 'sasasas'}
parseData

数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式。

table 组件默认规定的数据格式为(参考):

默认规定的数据格式

  1. {
  2. "code": 0,
  3. "msg": "",
  4. "count": 1000,
  5. "data": [{}, {}]
  6. }

很多时候,您接口返回的数据格式并不一定都符合 table 默认规定的格式,比如:

假设您返回的数据格式

  1. {
  2. "status": 0,
  3. "message": "",
  4. "total": 180,
  5. "data": {
  6. "item": [{}, {}]
  7. }
  8. }

那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式

  1. table.render({
  2. elem: '#demp'
  3. ,url: ''
  4. ,parseData: function(res){ //res 即为原始返回的数据
  5. return {
  6. "code": res.status, //解析接口状态
  7. "msg": res.message, //解析提示文本
  8. "count": res.total, //解析数据长度
  9. "data": res.data.item //解析数据列表
  10. };
  11. }
  12. //,…… //其他参数
  13. });

该参数非常实用,系 layui 2.4.0 开始新增

request 用于对分页请求的参数:page、limit重新设定名称,如:
  1. table.render({
  2. elem: '#demp'
  3. ,url: ''
  4. ,request: {
  5. pageName: 'curr' //页码的参数名称,默认:page
  6. ,limitName: 'nums' //每页数据量的参数名,默认:limit
  7. }
  8. //,…… //其他参数
  9. });
那么请求数据时的参数将会变为:?curr=1&nums=30
response

您还可以借助 response 参数来重新设定返回的数据格式,如:

  1. table.render({
  2. elem: '#demp'
  3. ,url: ''
  4. ,response: {
  5. statusName: 'status' //规定数据状态的字段名称,默认:code
  6. ,statusCode: 200 //规定成功的状态码,默认:0
  7. ,msgName: 'hint' //规定状态信息的字段名称,默认:msg
  8. ,countName: 'total' //规定数据总数的字段名称,默认:count
  9. ,dataName: 'rows' //规定数据列表的字段名称,默认:data
  10. }
  11. //,…… //其他参数
  12. });
那么上面所规定的格式为:

重新规定的数据格式

  1. {
  2. "status": 200,
  3. "hint": "",
  4. "total": 1000,
  5. "rows": []
  6. }

注意:request 和 response 参数均为 layui 2.1.0 版本新增



这篇关于Lay UI-异步加载数据格式说明的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程