前段框架layui中的table的dataName嵌套读取问题

问题描述

layui在渲染一个table的时候，需要传递一些参数，参数之一是response，它的官方说明如下

当后端返回的参数是

{
  status: 200,
  hint: "",
  total: 1000,
  rows: []
} 

我们应该这样定义

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

而当我的后端返回的参数是

{
    statusCode: 200,
    message: "",
    data:{
        authUserList:{
            total:7,
            list:[]
        }
    }
}

根据官方说明，我这么定义的

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

但是这样，table是拿不到后端传来的数据的

查看了一下layui最新版本V2.3.0的源码中的table.js,，搜索dataName发现这么一段

解释一下这段代码

s.response.dataName就是我们在上面配置response中的dataName，e是后端传来的完整数据，u是最后得到的List。

所以问题就显现出来了。

假设后台传来数据变量名为data，当dataName: 'rows'的时候，u=data['rows']，这是没有问题的。

但是当dataName: 'data.authUserList.list'的时候，是不行的，因为这时u=data['data.authUserList.list']，这样的话u就是undefined。

因此，layui对于这种参数，只支持一个变量，而不能实现嵌套的变量。

解决方案

1、使后端传出来的List的变量放在外层。比如官方说的这样：

{
  status: 200,
  hint: "",
  total: 1000,
  rows: []
} 

2、改写layui的table.js

在table.js的最后放下这段代码

//bygzr
function getGvalue(gdata, gvariable) {
    var gvariableArr = gvariable.split('.');
    for(let gvariableEle of gvariableArr) {
        gdata = gdata[gvariableEle];
    }
    return gdata;
}

它接收两个参数，gdata是后端返回的数据，gvariable是数据的变量名，比如‘data.authUserList.list’，它将返回正确的数值。

然后将

改写为

u=getGvalue(e, s.response.dataName)||[],

此时问题解决。

对于response中的其他属性，比如countName，也可以采用这种方式解决。

第一次用layui，欢迎批评指正。