如何在 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

您需要为分页提供数据源 - 请查看 [分页文档][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] - 这说明了如何做你所追求的。

我稍微修改了示例以适应下面的代码 sn-p - 这向您展示了如何加载文件并将数据源全部设置在一个块中（尽管最好将它们分成单独的方法）：

// 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);
        }
    };
});