GridManager When processing data, it is necessary to use the specified data format. In the actual scene, there are some format differences more or less.

How to deal with these differences will be explained here

1. Only return field name is inconsistent

Data and totals in the primary data can be adjusted by using dataKey and totalsKey.

The back-end return data is:

{
    "list":[  // GridManager expects data to be returned, and here a list is returned
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "Wild front end program",
            "operation": "modify"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "Wild front end program",
            "operation": "modify"
        }
    ],
    "number": 8  // GridManager expects to return totals, and here number is returned
}

Solution:

new GridManager(document.querySelector('table'), {
    gridManagerName: 'test',
    supportAjaxPage: true, // Enable paging
    dataKey: 'list', // Specify the array key as list
    totalsKey: 'number', // Specify the total number key as number
    // More configuration items
});

2. The data returned by the back end is quite different from the data expected by the front end

For example, createDate in the array is expected to return a timestamp and a string. At this time, the data can be reorganized by initializing the configuration responseHandler.

The back-end return data is:

{
    "list":[  // GridManager expects data to be returned, and here a list is returned
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12", // String returned
            "info": "Wild front end program",
            "operation": "modify"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12", // String returned
            "info": "Wild front end program",
            "operation": "modify"
        }
    ],
    "number": 8  // GridManager expects to return totals, and here number is returned
}

The front end expects to return:

{
    "data":[
        {
            "name": "baukh",
            "age": "28",
            "createDate": 1426118400000,  // Expected return timestamp
            "info": "Wild front end program",
            "operation": "modify"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": 1426118400000, // Expected return timestamp
            "info": "Wild front end program",
            "operation": "modify"
        }
    ],
    "totals": 8
}

Solution:

new GridManager(document.querySelector('table'), {
    gridManagerName: 'test',
    supportAjaxPage: true, // Enable paging
    dataKey: 'list', // Specify the array key as list
    totalsKey: 'number', // Specify the total number key as number
    responseHandler: function(response){
        // Change createDate in return data to timestamp
        response.list = response.data.map(function(item){
            item.createDate = new Date(item.createDate).getTime();
            return item;
        });
    },
    // More configuration items
});

Finally, I recommend you to use GridManager Table component, supports Angular 1.x, Vue, React, jquery and native encoding.