该属性在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属性用法