GridManager 分頁(yè)詳解

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

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

GridManager 分頁(yè)原理:

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

以下幾個(gè)步驟實(shí)現(xiàn)分頁(yè):

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

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

{
    "data":[ // 分頁(yè)必須存在的屬性， 屬性名可通過(guò)配置項(xiàng)dataKey進(jìn)行變更
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        }
    ],
    "totals": 8  // 分頁(yè)必須存在的屬性， 屬性名可通過(guò)配置項(xiàng)totalsKey進(jìn)行變更
}

前端通過(guò)返回?cái)?shù)據(jù)自動(dòng)渲染。

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

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

通過(guò)初始化配置參 requestHandler 對(duì) GridManager 中使用的分頁(yè)參數(shù)進(jìn)行調(diào)整；后端接到的參數(shù)將是調(diào)整后的參數(shù)，調(diào)整方式如下:

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

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

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

后端返回?cái)?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, // 啟用分頁(yè)
    dataKey: "list", // 指定數(shù)組 key 為 list
    totalsKey: "number", // 指定總數(shù) key 為 number
    requestHandler: function(request){
        request.newParams = "這個(gè)參數(shù)是通過(guò) requestHandler 函數(shù)新增的";
        return request;
    },
    // 其它配置項(xiàng)...
});

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

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

后端返回?cái)?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,  // 期望返回時(shí)間戳
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": 1426118400000, // 期望返回時(shí)間戳
            "info": "野生前端程序",
            "operation": "修改"
        }
    ],
    "totals": 8
}

解決方式:

document.querySelector("table").GM("init", {
    supportAjaxPage: true, // 啟用分頁(yè)
    dataKey: "list", // 指定數(shù)組 key 為 list
    totalsKey: "number", // 指定總數(shù) key 為 number
    responseHandler: function(response){
        // 將返回?cái)?shù)據(jù)中的 createDate 修改為 時(shí)間戳
        response.list = response.data.map(function(item){
            item.createDate = new Date(item.createDate).getTime();
            return item;
        });
        return response;
    },
    // 其它配置項(xiàng)...
});

更多API，請(qǐng)點(diǎn)擊API進(jìn)入

歡迎star github

GPU云服務(wù)器云服務(wù)器 GridManager asp分頁(yè)控件分頁(yè) 服務(wù)器分頁(yè)和內(nèi)存分頁(yè) 容分頁(yè)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105861.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

QLQ

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【11.15-11.21】博客精彩回顧

閱讀 1129·2021-11-24 09:39
騰訊云香港云服務(wù)器怎么購(gòu)買(mǎi)便宜?喲!來(lái)騰訊云海外全球購(gòu)逛一逛唄

閱讀 1431·2021-11-18 13:18
【手把手帶你刷LeetCode】——15.劍指offer之不用加減乘除做加法（位運(yùn)算）

閱讀 2578·2021-11-15 11:38
淺談物聯(lián)網(wǎng)技術(shù)

閱讀 1896·2021-09-26 09:47
主機(jī)域名是什么-主機(jī)域名是哪個(gè)？

閱讀 1715·2021-09-22 15:09
回調(diào)函數(shù)；

閱讀 1691·2021-09-03 10:29
原生JS操作DOM元素的類(lèi)名class

閱讀 1594·2019-08-29 17:28
http相關(guān)知識(shí)點(diǎn)回顧

閱讀 3013·2019-08-29 16:30

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

GridManager 分頁(yè)詳解

相關(guān)文章

**Vue表格組件--GridManager Vue**

**React 表格組件 GridManager-React**

**表格組件 GridManager Angular 1.x**

分享表格組件-GridManager

vue表格組件

發(fā)表評(píng)論

0條評(píng)論

QLQ

男|高級(jí)講師

TA的文章

【11.15-11.21】博客精彩回顧

騰訊云香港云服務(wù)器怎么購(gòu)買(mǎi)便宜?喲!來(lái)騰訊云海外全球購(gòu)逛一逛唄

【手把手帶你刷LeetCode】——15.劍指offer之不用加減乘除做加法（位運(yùn)算）

淺談物聯(lián)網(wǎng)技術(shù)

主機(jī)域名是什么-主機(jī)域名是哪個(gè)？

回調(diào)函數(shù)；

原生JS操作DOM元素的類(lèi)名class

http相關(guān)知識(shí)點(diǎn)回顧

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

GridManager 分頁(yè)詳解

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！