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

后台返回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;
    }
}

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;
    }

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>

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

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

好的,将 layui 数据表格的数据格式设置为 JSON 格式,可以参考以下代码: ```javascript // 前端 JS 代码 layui.use('table', function(){ var table = layui.table; // 渲染 layui 数据表格 table.render({ elem: '#data-table', url: '/api/tableData', method: 'POST', contentType: 'application/json', parseData: function(res){ return { code: res.code, msg: res.msg, count: res.data.length, data: res.data }; }, where: { keyword: '' } // 其他配置项 }); // 监听搜索按钮的点击事件 $('#searchBtn').click(function(){ // 获取搜索框的值 var keyword = $('#keyword').val(); // 设置请求参数 table.reload('data-table', { method: 'POST', contentType: 'application/json', where: { keyword: keyword } }); }); }); // 后台接口代码 app.post('/api/tableData', function(req, res){ // 获取请求参数 var keyword = req.body.keyword; // 根据参数查询数据 var data = getDataByKeyword(keyword); // 返回数据给 layui 数据表格 res.json({ code: 0, msg: '', data: data }); }); ``` 以上代码中,我们通过设置 `contentType` 为 `application/json` 来将数据格式设置为 JSON 格式。同时,使用 `parseData` 方法将后台返回数据格式转换成 layui 数据表格所需要的格式。 需要注意的是,当将 layui 数据表格的数据格式设置为 JSON 格式时,后台接口返回的数据应该是一个 JSON 对象,其中 `code` 表示状态码,`msg` 表示状态信息,`data` 表示数据数组。 希望这个回答能够帮到您!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

失落的猫头鹰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值