如何在 ag-grid 中为 Angular 2 进行分页

Posted 2023-03-28

【中文标题】如何在 ag-grid 中为 Angular 2 进行分页

【英文标题】：how to do pagination in ag-grid for angular 2

【发布时间】：2017-03-19 03:46:18

【问题描述】：

我正在使用 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 是它不起作用的原因吗？我以正确的方式做吗？非常感谢任何帮助

【问题讨论】：

这个答案帮助我完成了分页工作***.com/questions/36934207/…

【参考方案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);
        
    ;
);

【讨论】：

当我尝试使用 gridOptions.api.setDatasource(dataSource);它抛出错误，因为 gridOptions 是空的，它里面没有'api'。它发生是因为在构造函数中我有这个代码（与我从 angular 2 示例中得到的相同）//我们传入一个空的 gridOptions，所以我们可以将 api 取出 this.gridOptions = ;

调用 gridReady 事件后，您就可以使用该 api - 监听该事件，调用时您可以设置数据源

非常感谢天才 :) 是否有任何可用于 angular 2 的文档

谢谢！文档可以在ag-grid.com/best-angular-2-data-grid 找到，但在过滤、渲染和编辑下还有额外的 ng2 文档。如果您对此答案感到满意，请将其标记为已接受:-)