Layui中table异步数据请求支持自定义返回数据格式

我们使用LayUI的后台管理系统框架时，会使用table.render方法与Java后端系统的controller层进行数据交互，LayUI的table.render方法处理的res返回结果有固定的数据格式，如果controller层返回的数据与LayUI不匹配时会造成LayUI无法处理后端传递过来的数据问题。
LayUI的table.render方法要求返回的数据格式如下：
使用案例：

table.render({
   elem: '#test-table-toolbar'
 ,url:"http://localhost:8090/program-web/api/magic_change/oj/problem/page_list?userId=youcongtech"
   ,toolbar: '#test-table-toolbar-toolbarDemo'
   ,title: '程序设计题绑定'
,cols: [[
  {type: 'checkbox', fixed: 'left'},
     {field:'problemId', width:300, title: 'ID', sort: true}
     ,{field:'title', width:400, title: '题目'}
     ,{width:215, align:'center', fixed: 'right', toolbar: '#test-table-toolbar-barDemo'}
   ]]
   ,page: true
 });

要求返回的数据格式：

{
  "msg": "success",
  "code": "0",
  "data": [
    {
      "title": "for循环输出",
      "problemId": 1139
    },
    {
      "title": "测试2",
      "problemId": 1138
    },
    {
      "title": "测试1",
      "problemId": 1137
    },
    {
      "title": "for循环-Plus",
      "problemId": 1140
    },
    {
      "title": "第一个C++程序",
      "problemId": 1141
    }
  ]
}

而我们实际上后台返回的数据结构是这样的

{
	"code": "200",
	"message": "成功",
	"data": {
		"page": {
			"index": 1,
			"size": 10,
			"totalItems": 2,
			"items": [{
 
					"creationDatetime": "2019-08-23T16:19:37",
					"completeDatetime": "2019-08-23T16:19:37"
				}, {
 
					"creationDatetime": "2019-08-23T16:15:12",
					"completeDatetime": "2019-08-23T16:15:09"
				}
			]
		}
	},
}

所以我们得解决LayUI的table.render方法数据格式问题。解决办法的思路有两种，一种是定义好后台的返回数据的json格式，第二种是重写LayUI的table.render方法中的parseData方法来实现自定义返回数据格式。在这里我选择第二种方法：

layui.use('table', function () {
      var table = layui.table;

      table.render({
        elem: '#test'
        ,parseData :parseDataFun //调用自定义返回数据方法
        , url: 'http://127.0.0.1:8111/futurefund/record/getSum'
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
          { field: 'money', width: 120, title: '存款总额', sort: true }
        ]]
      });
    });

    //定义处理数据结构转化的适配器
    var parseDataFun = function (res){
        // console.log("返回数据 ： "+JSON.stringify(res));
        if(res.code == 20000){
            // console.log(res.code);
            // console.log(res.data.money);
            return {
              "code": "0"
              , "msg": "success"
              , "data": [
                {
                  "money":res.data.money
                }
              ]
            };
        }
    };

这样即可解决LayUI的table.render方法的自定义数据格式的问题。
文章参考了两个教程，链接如下：
https://www.cnblogs.com/youcong/p/11342366.html
https://blog.csdn.net/lmx15063393957/article/details/110549635

总结

本文章作者问题也是通过其他博主发表的文章才得以解决，在此感谢那些在解决BUG路上贡献心得的博主们，向你们致敬。希望这篇文章能对你有小小的帮助，感谢你的阅读！我是黑马Jack，一起学习一起进步！