• 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. }
  • 相关阅读:
    开发管理工具(日常)
    python之uWSGI和WSGI
    php之Opcache
    nginx之健康检查
    重构糟糕的代码(一)
    PHP之50个开源项目
    Redis之各版本特性
    Redis之淘汰策略
    Redis之过期策略
    高并发之nginx限制
  • 原文地址:https://www.cnblogs.com/xxzb/p/12665069.html
Copyright © 2020-2023  润新知