利用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两个参数吧,这两个参数哪儿来的,上面有说。

利用EasyUI 数据网格(DataGrid)的loader属性实现后端分页

接收格式:

这是我定义的返回的格式,在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属性实现后端分页

参考:easyui-datagrid 的loader属性用法

上一篇:EasyUi文档地址


下一篇:jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)