LayUi中接口传数据成功，表格不显示数据

今天接触这个框架发现的问题，某些情况下，json传过来了，对应表格报错或提示无数据，情况截图如下：

LayUi 对传过来的 Json 有严格的要求，一般情况下，要求要有4个参数，分别为：

code:0  //数据状态
msg:""  //状态信息
count:1000  //数据总数
data:[]  //数据列表

若传过来的 Json 包含这四个参数，且参数名一样，则表格读数据不会出问题。若参数名和上述的不一样，则需要转换下，具体方法如下：

response:{statusName: '自定义的参数名称' ,// 对应 codemsgName: '自定义的参数名称'  , // 对应 msgcountName: '自定义的参数名称' , // 对应 countdataName: '自定义的参数名称'  // 对应 data
}

上述代码写在 table.render({}) 内。

经过测试，发现有两个字段不是必要的，分别是，msg 和 count 。若不传或参数名对不上时不转换，前台表格页面依旧会显示出数据，必要的参数只有 code 和 data 。

官方文档地址：传送门

文档中，statusCode 不需要写，写的话数据会显示不成功。

下面用例子再说明下：

表格页代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="https://res.layui.com/layui/rc/css/layui.css?t=20181101-1" media="all"><!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --></head><body><table class="layui-hide" id="test"></table><script src="https://res.layui.com/layui/rc/layui.js?t=20181101-1"></script><!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --><script>layui.config({base: './dist/' //指定 layuiAdmin 项目路径,version: '1.2.1'}).use('table', function() {var table = layui.table;table.render({elem: '#test',url: 'json/default.json',cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增                        ,cols: [[{field: 'id',width: 80,title: 'ID',sort: true}, {field: 'username',width: 80,title: '用户名'}, {field: 'sex',width: 80,title: '性别'}]]});});</script></body>
</html>

对应的default.json如下：

{"code": "0","msg": "","data": [{"id": "1","username": "hello","sex": "boy"}, {"id": "2","username": "world","sex": "boy"}, {"id": "3","username": "too","sex": "boy"}]
}

显示的结果如下图：

这种是传参默认符合Layui中Table配置的结果，若仅更改参数名称，即将JSON中的code改为status，得到的结果如下图：

若仅将JSON参数列表中的参数名data更改为rows，得到的结果如下图：

实际上，接口对应的请求都是成功的，只是Layui显示不出来，碰到上述问题，有两个解决办法：

第一，后端改，使传过来的参数名符合Layui所需要；

第二，前端改，需要加代码，Layui有示例，下面也简单说下：

传的JSON，更改code为status，data为rows：

{"status": "0","msg": "","rows": [{"id": "1","username": "hello","sex": "boy"}, {"id": "2","username": "world","sex": "boy"}, {"id": "3","username": "too","sex": "boy"}]
}

现在页面上表格显示不出来数据，还报错，和上面报的的截图一样，更改html上的代码，如下所示（只显示主要的）：

<!-- 省略部分-->table.render({elem: '#test',url: 'json/default.json',cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增,cols: [[{field: 'id',width: 80,title: 'ID',sort: true}, {field: 'username',width: 80,title: '用户名'}, {field: 'sex',width: 80,title: '性别'}]],response: {statusName: 'status' //规定数据状态的字段名称，默认：code,dataName: 'rows' //规定数据列表的字段名称，默认：data}
});<!-- 省略部分-->

这样，即使传过来的JSON中的参数名有问题，这样也能纠正过来。

LayUi中接口传数据成功，表格不显示数据相关推荐

微信小程序开发中遇到的问题（前台用表格形式显示数据）
微信小程序之前台用表格形式显示数据开发环境:微信开发者工具+eclipse+Tomcat+Mysql 功能描述:微信小程序前台传参到后台获取数据,后台将数据返回给前台,前台用表格形式显示数据. 后台 ...
c# winform html 表,C# winform中嵌入Excel实现复杂表格的显示和控制
龙源期刊网 http://www.doczj.com/doc/7c6e747d7375a417866f8fac.html C# winform中嵌入Excel实现复杂表格的显示和控制作者:斯琴巴图杨 ...
Sharepoint学习笔记---如何在Sharepoint2010网站中整合Crystal Report水晶报表（显示数据二）...
在Sharepoint学习笔记---如何在Sharepoint2010网站中整合Crystal Report水晶报表(显示数据一)中,解释了如何把Crystal Report整合到Sharepoint ...
如何在Excel 里倒序排列表格数据 || csv表格倒序排列数据
如何在Excel 里倒序排列表格数据 || csv表格倒序排列数据许多公共api提供时序数据的时候都是倒序提供,最新的数据在前面.在训练时序模型时需要按时间轴分布数据. csv文件倒序的工作在exc ...
Excel中VBA实现文件夹表格合并和数据提取
多个文件夹下excel文件的提取复制 Public Sub 取出文件() Dim x1, x2, x3, x4, x5, arr Dim mysheet1, fs, fo, fd, fi, fe Di ...
html导入wps,wps excel导入html表格数据-WPS表格里的数据怎样快速导入到wps文字里
wps表格怎样导入txt数据由于WPS表格不支持直接将网页数据导入到表格之中,但可以使用微软Excel表格的"自网站"获取网页数据,也比较方便快捷. 使用微软office打开Ex ...
java导出大数据excel表格，导出数据
常规的java导出excel表格最大的数据量是65535行. package com.sf.module.timeManagement.biz; import java.io.ByteArrayInp ...
如何在html页面循环回显数据,从while循环显示数据到html代码
我需要提示或指导如何使用echo显示来自mysql的数据.但我想在html代码中显示它.我想在mysql中显示第一个标题的$row["title"]而不是title1和$row[& ...
layUI中使用layer.open，在content打开数据表格，获取值并返回
在layUI编写的页面中,遇到这么一种情况,从一个页面中使用layer.open打开一个新窗口,新窗口中是一个数据表格,现在需要选中数据表格中的一列并获取它的值,以便下面这个选择按钮可以使用这个值进行 ...

LayUi中接口传数据成功，表格不显示数据

LayUi中接口传数据成功，表格不显示数据相关推荐

最新文章

热门文章