如何在ag-grid中爲角度分頁2

Question

我正在使用Ag-grid在角度2中開發具有分頁組件的網格，它已經在html中嘗試了以下代碼。

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

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

這個結果與分頁按鈕的網格，但rowData是一個不加載，但列標題coming.I正在加載rowData和columnDefs從服務是一個原因爲什麼它不工作？我以正確的方式做這件事嗎？任何幫助深表感謝

Answer 1

您需要提供用於分頁的數據源 - 看看在[分頁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); 

更新

請看看第一個[分頁示例] [2] - 這說明了如何做到你正在做的事情。

我修改了一下這個例子，以適應下面的代碼片段 - 它展示瞭如何加載一個文件並將數據源全部設置在一個塊中（儘管最好將它們分成不同的方法）：

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