当前位置:   article > 正文

后台返回JSON数据格式不符合layui.table要求的数据格式_一种后台返回数据格式字段不一致的表格数据处理方法 json

一种后台返回数据格式字段不一致的表格数据处理方法 json

后台返回JSON数据格式不符合layui.table要求的数据格式

在ssm项目中使用了layui前端框架,但是由于layui.table方法要求后台返回的数据具有严格的格式,在尝试了layui官方文档提供的方法无效之后,个人写了一个工具类,负责转换后台返回的数据格式,成功实现,下面分享一下我的方法:

1.首先建立一个LayuiTypeJson实体工具类

package com.card.until;

import java.util.ArrayList;
import java.util.List;

public class LayuiTypeJson<T> {
    private int code=0;
    private String msg="";
    private int count;
    private List<T> data=new ArrayList<T>();
    public int getCode() {
        return code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public int getCount() {
        return count;
    }
    public void setCount(int count) {
        this.count = count;
    }
    public List<T> getData() {
        return data;
    }
    public void setData(List<T> data) {
        this.data = data;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

2.在controller层使用此方法返回数据

@RequestMapping("/a3")
    public LayuiTypeJson<User> findAllUsers() {
        List<User> list= new ArrayList<User>();
        list.add(new User("tom",20,"男"));
        list.add(new User("jack",20,"男"));
        list.add(new User("alice",20,"女"));
        LayuiTypeJson<User> layuiTypeJson=new LayuiTypeJson<User>();
        layuiTypeJson.setCount(list.size());
        layuiTypeJson.setData(list);
        return layuiTypeJson;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

3.在layui提供的方法获取接口数据

  <script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#demo'
            ,url:'/book/a3'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            ,cols: [[
                {field:'name', width:80, title: '用户名', sort: true}
                ,{field:'age', width:80, title: '年龄'}
                ,{field:'sex', width:80, title: '性别', sort: true}

            ]]
        });
    });
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

4.前端成功渲染后台数据

在这里插入图片描述
我们很多人在调用layui表格数据的方法是往往会忽略其对数据格式的要求,导致数据格式不符合,提示数据状态异常,通过工具类的方法可以有效解决此问题。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/158023
推荐阅读
相关标签
  

闽ICP备14008679号