angular - 如何在ag-grid中为angular 2做分页

Question

我正在使用 ag-grid 开发一个带有 Angular 2 分页组件的网格，已经在 html 中尝试了以下代码。

[gridOptions]="gridOptions"
                 [columnDefs]="columnDefs"
                 [showToolPanel]="showToolPanel"
                 [rowData]="rowData"

                 enableColResize
                 debug
                 rowHeight="30"
                 rowSelection="multiple"
                 rowModelType="pagination"
                 paginationPageSize = "15"

结果是一个带有分页按钮的网格，但 rowData 未加载，但列标题即将出现。我正在从服务加载 rowData 和 columnDefs，这是它​​不起作用的原因吗？我是以正确的方式做的吗？非常感谢任何帮助

Answer 1

您需要为分页提供数据源 - 查看 [Pagination Documenation][1] 了解更多信息，但简而言之:

var dataSource = {
        rowCount: 100, // for example
        getRows: function (params) { 
                var rowsThisPage = someService.getData(params.startRow, params.endRow);
                params.successCallback(rowsThisPage, lastRow);
        };
}

gridOptions.api.setDatasource(dataSource);

更新

请看第一个 [Pagination Example][2] - 这说明了如何完全按照您的要求进行操作。

我稍微修改了示例以适合下面的代码片段 - 这向您展示了如何在一个 block 中加载文件和设置数据源(尽管最好将它们分成单独的方法):

// setup the grid after the page has finished loading
var allOfTheData = [];
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', '../olympicWinners.json');  // your static json file would go here
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            allOfTheData = JSON.parse(httpRequest.responseText);

            var dataSource = {
                rowCount: 20,
                getRows: function (params) {
                    // take a chunk of the array, matching the start and finish times
                    var rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);

                    // see if we have come to the last page. if we have, set lastRow to
                    // the very last row of the last page. if you are getting data from
                    // a server, lastRow could be returned separately if the lastRow
                    // is not in the current page.
                    var lastRow = -1;
                    if (allOfTheData.length <= params.endRow) {
                        lastRow = allOfTheData.length;
                    }
                    params.successCallback(rowsThisPage, lastRow);
                }
            };

            gridOptions.api.setDatasource(dataSource);
        }
    };
});