欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui表格接口返回格式

程序员文章站 2024-01-02 13:56:10
...

layui表格接口返回格式

首先,最简单的先渲染一个表格,参考官方示例:

layui.use('table', function(){
  var table = layui.table;
 
    table2.render({
      elem: '#demo',
      url: dz+'bisNurseProject/bisNurseProjectList',
      cellMinWidth: 95,
      page: true,
      height: "312",
      limits: [10, 15, 20, 25],
      where: {
        status: $("#status").val(),
      },
      limit: 5,
      id: "userListTable2",
      cols: [[

        { field: 'projectId', title: '项目编号', minWidth: 100, align: "center" },
        { field: 'projectName', title: '项目名称', minWidth: 100, align: "center" },
        { field: 'rmbPrice', title: '人民币售价', minWidth: 100, align: "center" },
        { field: 'manualPrice', title: '手工价格', minWidth: 100, align: "center" },
        { field: 'serverTime', title: '服务时常', minWidth: 100, align: 'center' },
        { field: ' content', title: '项目介绍', minWidth: 100, align: 'center' },
        {
          field: 'status', title: '项目状态', minWidth: 100, align: 'center', templet: function (d) {
            return d.status == '1' ? "在售" : "<span class='layui-red'>下架</span>";
          }
        },
        {
          field: '', title: '选择项目', minWidth: 100, align: 'center', templet: function (d) {
            return '<input type="radio" name="aa"  data-test="' + d.projectId + '"  lay-skin="primary"  data-test2="' + d.projectName + '" data-test3="' + d.rmbPrice + '">';
          }
        }
      ]]
    });
  
});

这里先讲讲一些渲染细节:

  1. elem: ‘#demo’ //指定原始表格元素选择器(推荐id选择器)

  2. cols:设置表头。值是一个二维数组。方法渲染方式必填

  3. url:异步数据接口相关参数。其中 url 参数为必填项

  4. page:开启分页(默认:false) 注:从 layui 2.2.0 开始,支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外)

  5. limit:每页显示的条数(默认:10)。值务必对应 limits 参数的选项。
    注意:优先级低于 page 参数中的 limit 参数

  6. limits:每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
    注意:优先级低于 page 参数中的 limits 参数

  7. id:设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。

  8. 更多参数请参考官网

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

cols - 表头参数一览表

参数 类型 说明 示例值
field String 设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识,要和后台返回的数据字段一致 username
title String 设定标题名称 用户名
templet String 自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等 查看官方模板

异步数据接口

参数名 功能
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/):
{ "code": 0, "msg": "", "count": 1000, "data": [{}, {}]}
很多时候,您接口返回的数据格式并不一定都符合 table 默认规定的格式,比如:
{ "status": 0, "message": "", "total": 180, "data": { "item": [{}, {}] }}
那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式
```table.render({ elem: ‘#demp’ ,url: ‘’,parseData: function(res){ //res 即为原始返回的数据 return { “code”: res.status, //解析接口状态 “msg”: res.message, //解析提示文本 “count”: res.total, //解析数据长度 “data”: res.data.item //解析数据列表 }; } //,…… //其他参数});
request 用于对分页请求的参数:page、limit重新设定名称,如:
table.render({ elem: '#demp' ,url: '' ,request: { pageName: 'curr' //页码的参数名称,默认:page ,limitName: 'nums' //每页数据量的参数名,默认:limit } //,…… //其他参数});
那么请求数据时的参数将会变为:?curr=1&nums=30
response 您还可以借助 response 参数来重新设定返回的数据格式,如:
table.render({ elem: '#demp' ,url: '' ,response: { statusName: 'status' //规定数据状态的字段名称,默认:code ,statusCode: 200 //规定成功的状态码,默认:0 ,msgName: 'hint' //规定状态信息的字段名称,默认:msg ,countName: 'total' //规定数据总数的字段名称,默认:count ,dataName: 'rows' //规定数据列表的字段名称,默认:data } //,…… //其他参数});
那么上面所规定的格式为:
重新规定的数据格式{ "status": 200, "hint": "", "total": 1000, "rows": []}

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

//“方法级渲染”配置方式
table.render({ //其它参数在此省略
  url: '/api/data/'
  //where: {token: 'sasasas', id: 123} //如果无需传递额外参数,可不加该参数
  //method: 'post' //如果无需自定义HTTP类型,可不加该参数
  //request: {} //如果无需自定义请求参数,可不加该参数
  //response: {} //如果无需自定义数据响应名称,可不加该参数
}); 
 
等价于(“自动化渲染”配置方式)
<table class="layui-table" lay-data="{url:'/api/data/'}" lay-filter="test"> …… </table>

更多请参考官网

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

上一篇:

下一篇: