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 - 表头参数一览表

参数类型说明示例值
fieldString设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识,要和后台返回的数据字段一致username
titleString设定标题名称用户名
templetString自定义列模板,模板遵循 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

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页