GridManager在處理數(shù)據(jù)時(shí)，需要使用規(guī)定的數(shù)據(jù)格式。而在實(shí)際場景中，或多或少存在一些格式差異,在這里將對這些差異的處理方式進(jìn)行說明。

1. 僅返回字段名不符

如: 一級數(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, // 啟用分頁
    dataKey: 'list', // 指定數(shù)組 key 為 list
    totalsKey: 'number', // 指定總數(shù) key 為 number
    requestHandler: function(request){
        request.newParams = '這個(gè)參數(shù)是通過 requestHandler 函數(shù)新增的';
    },
    // 其它配置項(xiàng)...
});

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

如數(shù)組中的 createDate， 期望返回的是時(shí)間戳， 而返回的為字符串。 這時(shí)可以通過初始化配置 responseHandler 對數(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, // 啟用分頁
    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;
        });
    },
    // 其它配置項(xiàng)...
});

作者：@拭目以待（表格管理開源項(xiàng)目GridManager）

Want to know How To Make Love？I know HTML!