解决layui table插件无法直接获取多层级JSON数据的方法

作者:清欢时间:2026-10-24 01:53:01浏览:405

本文介绍如何解决layui table插件在版本2.2.6中无法直接解析嵌套JSON数据的问题。通过修改M.prototype.page方法中的success回调,利用renderResponse函数动态映射statusName、msgName、countName和dataName等字段路径,实现从深层级JSON中提取list和total数据,同时保持分页功能正常运作。

问题背景与版本说明

针对layui table插件在版本2.2.6中无法直接获取多层级JSON数据的问题,提供一种解决方法。

依据官方文档,接口返回的数据格式需遵循response对应的字段名称规范。

默认情况下,返回的数据格式应包含以下字段:


{ 
code: 0,//数据状态的字段名称,默认:code 
msg: “”, //状态信息的字段名称,默认:msg 
count: 1000,//数据总数的字段名称,默认:count 
data: []//数据列表的字段名称,默认:data 
}

然而,当后台返回的数据结构如下所示时,直接获取“list”和“total”字段将变得不可行:


{“status”:0, 
“msg”:”超级管理员查询成功”, 
“data”:{ 
“pageNum”:1, 
“pageSize”:10, 
“size”:2, 
“total”:2, 
“list”:[ 
{“phone”:”13713596448”,”username”:”旺”,”passwd”:”1”,”usegrant”:”0”,”leader”:”“,”chancecount”:”1000”,”createtime”:1528369281000,”updatetime”:1528369285000,”usecount”:”0”}, 
{“phone”:”18038060732”,”username”:”彬”,”passwd”:”1”,”usegrant”:”0”,”leader”:”“,”chancecount”:”100”,”createtime”:1528422270000,”updatetime”:1528422270000,”usecount”:”0”} 
]

解决方案概述

以下是几种解决方案:

第一种方案是最直接的方式,即要求后端开发人员按照官方文档规定的格式调整返回数据。

第二种方案是先通过ajax请求获取原始数据,然后利用data属性进行手动赋值。需要注意的是,当涉及分页功能时,这种方法的代码实现会相对冗余。

源码修改实现

第三种方案是通过url属性赋值,并在table源文件中的M.prototype.page方法下添加特定代码来实现。


var multilevel=function (data,list) {
  var d = data;
  for (var i in list){
    d =d[list[i]];
  }
  return d
};
var renderResponse=function (data) {
 var statusNameLsit=r.statusName.split("."),
   msgNameLsit=r.msgName.split("."),
   countNameLsit=r.countName.split("."),
   dataNameLsit=r.dataName.split(".");
 var dataTemp={};
 dataTemp[r.statusName]=multilevel(data,statusNameLsit);
 dataTemp[r.msgName]=multilevel(data,msgNameLsit);
 dataTemp[r.countName]=multilevel(data,countNameLsit);
 dataTemp[r.dataName]=multilevel(data,dataNameLsit);

 return dataTemp;
};

具体而言,需要在M.prototype.page方法的ajax请求成功回调函数success中添加以下代码:


typeof renderResponse === 'function' && (t = renderResponse(t));

配置使用示例

在实际使用时,可以在response属性中使用点号(.)来分割层级路径,具体代码如下:


response: {
  statusName: 'status' //数据状态的字段名称,默认:code
  ,statusCode: 0 //成功的状态码,默认:0
  ,msgName: 'msg' //状态信息的字段名称,默认:msg
  ,countName: 'data.total' //数据总数的字段名称,默认:count
  ,dataName: 'data.list' //数据列表的字段名称,默认:data
}

以上即为解决layui table插件无法直接获取多层级JSON数据问题的全部内容,希望能对读者有所帮助,也欢迎大家继续支持本站。

作者最新文章