Layui:数据表格异步请求

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

参数名功能
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 组件默认规定的数据格式为(参考:/demo/table/user/):

默认规定的数据格式layui.code

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

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

假设您返回的数据格式layui.code

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

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

codelayui.code

  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重新设定名称,如:

codelayui.code

  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 参数来重新设定返回的数据格式,如:

codelayui.code

  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. });
那么上面所规定的格式为:

重新规定的数据格式layui.code

  1. {
  2. "status": 200,
  3. "hint": "",
  4. "total": 1000,
  5. "rows": []
  6. }
posted @ 2020-04-09 10:22  猩猩侠  阅读(6149)  评论(0编辑  收藏  举报