GridManager 分頁詳解

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