GridManager 分页详解

QLQ 发布于2019-08-26 10:15 / 1730人阅读

摘要：分页原理首先，注意了表格分页是需要后端支撑的以下几个步骤实现分页由前端发送包含分页信息的参数，这是由自动实现的。这时可以通过初始化配置对数据进行重组。

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;
    },
    // 其它配置项...
});

更多API，请点击API进入

欢迎star github

GPU云服务器云服务器 GridManager asp分页控件分页服务器分页和内存分页容分页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105861.html

Vue表格组件--GridManager Vue

摘要：基于的封装用于便捷的在中使用除过特性外，其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。并且使用服务需要提前通过将注册至全局组件。刷新或更新查询条件或其它更多请直接访问查看当前版本 GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外，其它API与GridManag...

khs1994 2019-08-23 16:46 评论0 收藏0
React 表格组件 GridManager-React

摘要：基于的封装用于便捷的在中使用除过特性外，其它与相同。刷新更新查询条件其它更多请直接访问查看当前版本的版本的版本 GridManager React 基于 React 的 GridManager 封装, 用于便捷的在 React 中使用GridManager. 除过React特性外，其它API与GridManager API相同。 showImg(https://segmentfault...

cyixlq 2019-08-23 18:04 评论0 收藏0
表格组件 GridManager Angular 1.x

摘要：非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。前端鸡汤前端框架前端相关筛选选中项，字符串默认为。非必设项，选中的过滤条件将会覆盖否为多选布尔值默认为。刷新更新查询条件其它更多请直接访问查看当前版本 GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager. s...

darcrand 2019-08-23 16:46 评论0 收藏0
分享表格组件-GridManager

摘要：优势纯原生实现，不依赖任何框架使用简单快捷，功能强大与用户进行沟通，采纳来自于使用的需求，并不间段的进行升级维护特色功能表格的列宽度可进行拖拽式调整表格的列位置进行拖拽式调整可通过配置对列进行显示隐藏转换在表存在可视区域的情况下表头将一直存 GridManager showImg(https://segmentfault.com/img/bV4Mff?w=1146&h=538); 优势...

KaltZK 2019-08-22 15:02 评论0 收藏0
vue表格组件

摘要：基于的封装用于便捷的在中使用除过特性外，其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。非必设项，选中的过滤条件将会覆盖否为多选布尔值默认为。刷新更新查询条件其它更多请直接访问查看当前版本 GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外，其它API与GridM...

ysl_unh 2019-08-26 12:10 评论0 收藏0