GridManager 分页详解

最新推荐文章于 2024-08-12 08:41:39 发布

写个程序换个饼

最新推荐文章于 2024-08-12 08:41:39 发布

阅读量1k

点赞数

分类专栏：表格组件文章标签： javascript

本文链接：https://blog.youkuaiyun.com/iteye_17835/article/details/105229405

版权

表格组件专栏收录该内容

24 篇文章

订阅专栏

GridManager表格分页依赖后端支持，通过前端发送分页参数到后端，后端依据参数返回相应数据。当后端参数不匹配或返回数据格式错误时，可通过requestHandler和responseHandler进行调整。对于字段名不符和数据类型差异，可以使用dataKey、totalsKey及responseHandler进行定制化处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GridManager 分页原理:

首先，注意了: GridManager 表格分页是需要后端支撑的.

以下几个步骤实现分页:

由前端发送包含分页信息的参数，这是由 GridManager 自动实现的。该参数包含以下信息{cPage: 当前页， pSize: 每页显示条数}
后端解析请求，并根据分页参数返回当前页的数据，数据格式如下:

{
    "data":[ // 分页必须存在的属性， 属性名可通过配置项dataKey进行变更
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        }
    ],
    "totals": 8  // 分页必须存在的属性， 属性名可通过配置项totalsKey进行变更
}

前端通过返回数据自动渲染。

后端接收参数与 GridManager 不符怎么办？

打服为止，强势要求后端按前端规则修改接口（后端同学表示呵呵哒）
通过初始化配置参 requestHandler 对 GridManager 中使用的分页参数进行调整；后端接到的参数将是调整后的参数，调整方式如下:

document.querySelector('table').GM('init', {
    supportAjaxPage: true, // 启用分页
    requestHandler: function(request){
        request.newParams = '这个参数是通过 requestHandler 函数新增的';
        return request;
    },
    // 其它配置项...
});

后端返回数据不符怎么办？

仅返回字段名不符

如: 一级数据中的 data 与 totals，可以使用 dataKey 和 totalsKey 进行调整。

后端返回数据为:

{
    "list":[  // GridManager 期望返回的是 data, 而这里返回了 list
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        }
    ],
    "number": 8  // GridManager 期望返回的是 totals, 而这里返回了 number
}

解决方式:

document.querySelector('table').GM('init', {
    supportAjaxPage: true, // 启用分页
    dataKey: 'list', // 指定数组 key 为 list
    totalsKey: 'number', // 指定总数 key 为 number
    requestHandler: function(request){
        request.newParams = '这个参数是通过 requestHandler 函数新增的';
        return request;
    },
    // 其它配置项...
});

后端返回数据与前端期望返回的数据出入较大

如数组中的 createDate，期望返回的是时间戳，而返回的为字符串。这时可以通过初始化配置 responseHandler 对数据进行重组。

后端返回数据为:

{
    "list":[  // GridManager 期望返回的是 data, 而这里返回了 list
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12", // 返回的是字符串
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12", // 返回的是字符串
            "info": "野生前端程序",
            "operation": "修改"
        }
    ],
    "number": 8  // GridManager 期望返回的是 totals, 而这里返回了 number
}

前端期望返回的是：

{
    "data":[
        {
            "name": "baukh",
            "age": "28",
            "createDate": 1426118400000,  // 期望返回时间戳
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": 1426118400000, // 期望返回时间戳
            "info": "野生前端程序",
            "operation": "修改"
        }
    ],
    "totals": 8
}

解决方式:

document.querySelector('table').GM('init', {
    supportAjaxPage: true, // 启用分页
    dataKey: 'list', // 指定数组 key 为 list
    totalsKey: 'number', // 指定总数 key 为 number
    responseHandler: function(response){
        // 将返回数据中的 createDate 修改为 时间戳
        response.list = response.data.map(function(item){
            item.createDate = new Date(item.createDate).getTime();
            return item;
        });
        return response;
    },
    // 其它配置项...
});