利用EasyUI 數據網格(DataGrid)的loader屬性實現后端分頁


該屬性在easyui官方文檔中並沒有詳細闡述,通過簡單的資料查詢和摸索,實現了easyUI數據網格的后端分頁功能。

在官網文檔中這樣闡述loader屬性:

定義如何從遠程服務器加載數據。返回false則取消該動作。該函數有下列參數:
param:要傳遞到遠程服務器的參數對象。
success(data):當檢索數據成功時調用的回調函數。
error():當檢索數據失敗時調用的回調函數。

一般來說,這個loader配合着JQuery的ajax使用,即$.ajax({})。

下面記錄一個使用loader屬性實現分頁表格 數據網格(DataGrid)的大致步驟:

一、前端頁面

首先定義一個DataGrid表格,里面的columns隨便在哪兒定義(官方給了兩種方式,js或者html),我這里用了js方式;

其次,loader屬性需要賦值一個方法名,在下面的代碼中都可以看出來;

然后,我通過打印param值,發現里面會傳遞兩個參數(page和size),分別表示當前要顯示的頁,每頁的數據條數,把它獲取到,根據自己的具體情況封裝傳遞到后台查詢數據。

最后,在ajax請求中,success回調方法里面,將需要顯示到表格中的數據通過success(data)方法傳遞一下就可以了;

需要強調的是返回的數據格式,至少包含total和rows屬性。可以看我后面貼的格式參考。

<div>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:525px" data-options="fitColumns:true,singleSelect:true">
    </table>

    <script type="text/javascript">
        var myloader = function(param, success, error) {
            var obj = {}; //聲明一個對象
            obj.id = 10001; //后端要求每次請求傳入一個ID
            obj.page = param.page;
            obj.size = param.rows;
            $.ajax({
                type: "post",
                url: "http://localhost:8080/home/customerService/getAllCustomerWithPage",
                async: true, //如果是在ajax方法外加載表格數據,必須【同步】方式提交
                contentType: 'application/json',
                dataType: 'JSON',
                data: JSON.stringify(obj),
                success: function(obj) {
                    console.log(obj.data)
                    success(obj.data);
                }
            });
        }

        $('#dg').datagrid({ //表格的初始化
            data: '', //初始化為空,請求成功后數據加載(這里使用ajax加載數據)
            loader: myloader,
            striped: true, //行條紋化,即奇偶行使用不同背景色
            pagination: true, //分頁工具欄
            pageSize: 15, //當設置了 pagination 屬性時,初始化頁面尺寸。
            pageList: [15, 30, 45, 60], //當設置了 pagination 屬性時,初始化頁面尺寸的選擇列表
            columns: [
                [{
                        field: 'cusNo',
                        title: '客戶編號',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'cusName',
                        title: '客戶名稱',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'cusRegion',
                        title: '所屬地區',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'cusAddr',
                        title: '客戶地址',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'cusUrl',
                        title: '客戶網址',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'cusLevel',
                        title: '客戶級別',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'score',
                        title: '信用級別',
                        width: 100,
                        align: 'center'
                    }
                ]
            ]
        });
    </script>
</div>

二、數據格式

我這里貼上我的發送數據和接收到的數據格式,供大家參考。

發送格式:

我傳遞了三個參數,但是如果你要分頁,至少得傳遞page和size兩個參數吧,這兩個參數哪兒來的,上面有說。

接收格式:

這是我定義的返回的格式,在success方法中只傳遞了data里面的東西(即上面js代碼中的obj.data)。

{
"id":10001,
"status":200,
"desc":"查詢成功",
"data":{
"total":39,
"rows":
[
{"cusId":1,
"cusNo":"90001",
"cusName":"123",
"cusRegion":"123",
"cusAddr":"重慶市",
"cusUrl":"http://www.***.edu.com",
"cusLevel":"戰略合作伙伴",
"score":5}
]
}
}

sucess(data)中的data具體就是指rows和total兩個屬性:

參考:easyui-datagrid 的loader屬性用法


免責聲明!

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



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