zoukankan      html  css  js  c++  java
  • 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. }
  • 相关阅读:
    基于element-ui图片封装组件
    计算时间间隔具体每一天
    C语言学习笔记 —— 函数作为参数
    AtCoder Beginner Contest 049 题解
    AtCoder Beginner Contest 048 题解
    AtCoder Beginner Contest 047 题解
    AtCoder Beginner Contest 046 题解
    AtCoder Beginner Contest 045 题解
    AtCoder Beginner Contest 044 题解
    AtCoder Beginner Contest 043 题解
  • 原文地址:https://www.cnblogs.com/xxzb/p/12665069.html
Copyright © 2011-2022 走看看