Alle Beispiele für angular2 ag-grid pagination?

Question

Beliebige Beispiele für angular2 ag-grid Paginierung, besonders beim virtuellen Paging/infinit scrolling? Ich habe eine Weile gesucht und nichts Nützliches gefunden. Jede Hilfe wird sehr geschätzt!

Das ist mein html:

<ag-grid-ng2 #agGrid class="ag-fresh" style="height: 300px" 
     [gridOptions]="gridOptions" 
     [rowGroupPanelShow]="always" 
     [columnDefs]="columnDefs" 
     [datasource] = "dataSource" 
     rowModelType = "virtual" 
     enableFilter 
     enableSorting 
     enableColResize 
     (modelUpdated)="onModelUpdated()" 
     > 
    </ag-grid-ng2> 

Dies ist meine Datenquelle Methode in der Steuerung:

private createDataSource() { 
     if (!this.rowData) { 
      //in case user selected 'onPageSizeChanged()' before the json was loaded 
      return; 
     } 
     console.log("this.rowData " + this.rowData.length); 
     console.log("Obtaining datasource"); 
     this.dataSource = { 
      rowCount: null, // behave as infinite scroll 
      pageSize: 2, 
      overflowSize:1,  
      getRows: function (params) { 
       console.log('asking for ' + params.startRow + ' to ' + params.endRow); 
       // At this point in your code, you would call the server, using $http if in AngularJS. 
       // To make the demo look real, wait for 500ms before returning 
       setTimeout(function() { 
        // take a slice of the total rows 
        var rowsThisPage = this.rowData.slice(params.startRow, params.endRow); 
        // if on or after the last page, work out the last row. 
        var lastRow = -1; 
        if (this.rowData.length <= params.endRow) { 
         lastRow = this.rowData.length; 
        } 
        // call the success callback 
        params.successCallback(rowsThisPage, lastRow); 
       }, 500); 
      } 
     } 
    } 

Answer 1

einen Blick auf die ng2 example on github nehmen, sowie die ag-Grid-Dokumentation auf Virtual Paging

Wenn Sie in dem Beispiel ng2 nach app.component.html suchen, sehen Sie eine Anzahl von dort (z. B. enableColResize).

Fügen Sie einfach die rowModelType und Datenquelle gemäß der ag-Grid-Dokumentation in der gleichen Art und Weise - zum Beispiel:

 <ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh" 

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

       [rowModelType] = "virtual" 
       [datasource] = "myDataSource" 

       enableColResize 
       ...other properties... 

Mit MyDatasource in der entsprechenden Komponente definiert (AppComponent im Beispielfall)