GridManager 分頁詳解

QLQ 發(fā)布于2019-08-26 10:15 / 1586人閱讀

摘要：分頁原理首先，注意了表格分頁是需要后端支撐的以下幾個步驟實現(xiàn)分頁由前端發(fā)送包含分頁信息的參數(shù)，這是由自動實現(xiàn)的。這時可以通過初始化配置對數(shù)據(jù)進行重組。

GridManager 分頁原理:

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

以下幾個步驟實現(xiàn)分頁:

由前端發(fā)送包含分頁信息的參數(shù)，這是由 GridManager 自動實現(xiàn)的。該參數(shù)包含以下信息{cPage: 當前頁， pSize: 每頁顯示條數(shù)}

后端解析請求，并根據(jù)分頁參數(shù)返回當前頁的數(shù)據(jù)，數(shù)據(jù)格式如下:

{
    "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進行變更
}

前端通過返回數(shù)據(jù)自動渲染。

后端接收參數(shù)與 GridManager 不符怎么辦？

打服為止，強勢要求后端按前端規(guī)則修改接口（后端同學表示呵呵噠）

通過初始化配置參 requestHandler 對 GridManager 中使用的分頁參數(shù)進行調整；后端接到的參數(shù)將是調整后的參數(shù)，調整方式如下:

document.querySelector("table").GM("init", {
    supportAjaxPage: true, // 啟用分頁
    requestHandler: function(request){
        request.newParams = "這個參數(shù)是通過 requestHandler 函數(shù)新增的";
        return request;
    },
    // 其它配置項...
});

后端返回數(shù)據(jù)不符怎么辦？ 僅返回字段名不符

如: 一級數(shù)據(jù)中的 data 與 totals，可以使用 dataKey 和 totalsKey 進行調整。

后端返回數(shù)據(jù)為:

{
    "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", // 指定數(shù)組 key 為 list
    totalsKey: "number", // 指定總數(shù) key 為 number
    requestHandler: function(request){
        request.newParams = "這個參數(shù)是通過 requestHandler 函數(shù)新增的";
        return request;
    },
    // 其它配置項...
});

后端返回數(shù)據(jù)與前端期望返回的數(shù)據(jù)出入較大

如數(shù)組中的 createDate， 期望返回的是時間戳， 而返回的為字符串。 這時可以通過初始化配置 responseHandler 對數(shù)據(jù)進行重組。

后端返回數(shù)據(jù)為:

{
    "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", // 指定數(shù)組 key 為 list
    totalsKey: "number", // 指定總數(shù) key 為 number
    responseHandler: function(response){
        // 將返回數(shù)據(jù)中的 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分頁控件分頁服務器分頁和內存分頁容分頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/105861.html

Vue表格組件--GridManager Vue

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設項篩選條件列表數(shù)組對象。格式在使用時該參數(shù)為必設項。并且使用服務需要提前通過將注冊至全局組件。刷新或更新查詢條件或其它更多請直接訪問查看當前版本 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

摘要：非必設項篩選條件列表數(shù)組對象。格式在使用時該參數(shù)為必設項。前端雞湯前端框架前端相關篩選選中項，字符串默認為。非必設項，選中的過濾條件將會覆蓋否為多選布爾值默認為。刷新更新查詢條件其它更多請直接訪問查看當前版本 GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封裝, 用于便捷的在 Angular 中使用GridManager. s...

darcrand 2019-08-23 16:46 評論0 收藏0
分享表格組件-GridManager

摘要：優(yōu)勢純原生實現(xiàn)，不依賴任何框架使用簡單快捷，功能強大與用戶進行溝通，采納來自于使用的需求，并不間段的進行升級維護特色功能表格的列寬度可進行拖拽式調整表格的列位置進行拖拽式調整可通過配置對列進行顯示隱藏轉換在表存在可視區(qū)域的情況下表頭將一直存 GridManager showImg(https://segmentfault.com/img/bV4Mff?w=1146&h=538); 優(yōu)勢...

KaltZK 2019-08-22 15:02 評論0 收藏0
vue表格組件

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設項篩選條件列表數(shù)組對象。格式在使用時該參數(shù)為必設項。非必設項，選中的過濾條件將會覆蓋否為多選布爾值默認為。刷新更新查詢條件其它更多請直接訪問查看當前版本 GridManager Vue 基于 Vue 的 GridManager 封裝, 用于便捷的在 Vue 中使用GridManager. 除過Vue特性外，其它API與GridM...

ysl_unh 2019-08-26 12:10 評論0 收藏0