該屬性在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兩個屬性:

