zoukankan      html  css  js  c++  java
  • 后台返回数据渲染Layui表格

    1、layui表格数据返回的格式是有限制的,这时候可以自己定义一个类来接收数据库查出来的结果然后再来渲染layui表格,下面自己定义一个类,这个类定义了两个方法

    public class JsonToken {
        public int code;
        public String msg;
        public Object data;
        public int count;
        public int pages;
    //返回数据符合layui需要的数据格式;第一个是状态码,0表示成功,第二个是提示信息,第三个是要返回的数据,第四个是数据的总数量
        public JsonToken(int code, String message, Object data, int count) {
            this.code = code;
            this.msg = message;
            this.data = data;
            this.count = count;
        }
    //这个方法添加了页数,方便做分页的时候直接做好分页再渲染页面
        public JsonToken(int code, String message, Object data, int count,int pages) {
            this.code = code;
            this.msg = message;
            this.data = data;
            this.count = count;
            this.pages=pages;
        }
    
    }

    2、使用:

        public JsonToken searchTestData(String name) {
            List<TestDemo> testData = testDataService.findTestDataByName(name);
            JSONObject object = new JSONObject();
    //这里返回对应的实参
    return new JsonToken(0,"",testData,testData.size()); }

    3、除了自己定义的类外我们还可以直接使用 JSONObject类,具体使用如下:

        public String searchTestData(String name) {
            List<TestData> testData = testDataService.findTestDataByName(name);
            JSONObject object = new JSONObject();
            object.put("code", 0);
            object.put("msg", "");
            object.put("data", testData);
            object.put("count",testData.size());
            return object.toJSONString();
    
        }

    4、其实上面两种方法都是差不多的,自己定义一个类接收是为了更好的理解,而不是直接object.put这样可能会有点乱。在页面使用的时候如果我写了parseData 回调函数将其解析成 table 组件所规定的数据格式的时候,但是里面参数不写全的话可能会影响显示,比如我不要这行"count":res.count,即使开启了分页,但是表格中的页数还是不会起效的,所以我们要写就写完,要么就直接省略掉就可以了,还有一点就是在定义列的时候, 如果我把写成下面这样子,也有可能报模板错误,所以括号记得换一下行就好了

    cols[[
    ]]
     table.render({
                    id: 'idTest',
                    elem: "#endTable",
                    url: url, //数据接口
                    toolbar: true,
                    page:true,           
                    cols: [
                        [
                           //省略   
                        ]
                    ]
                    ,parseData: function(res){
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "data": res.data,//解析数据列表
                            "count":res.count
                        }
                    }
                });
  • 相关阅读:
    教你一招Linux下文本比对方法
    Linux下find与exec的联手干大事
    Linux下Shell日期的格式,你知道几种?
    Linux下Python3.6的安装及避坑指南
    多线程中使用CompletableFuture
    ElasticSearch7.6.2中语法使用(更新中)
    ElasticSearch7.6.2使用_update_by_query语法
    ElasticSearch7.6.2使用_delete_by_query产生版本冲突问题
    filebeat7.6.2进程运行一段时间后自动退出问题解决
    把本地项目提交到gitLab
  • 原文地址:https://www.cnblogs.com/yanghr/p/12979135.html
Copyright © 2011-2022 走看看