后台返回數據渲染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
                    }
                }
            });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM