有没有angular2 ag-grid分页的例子？

Question

有没有angular2 ag分页的例子，特别是虚拟分页/无限滚动？我已经搜索了一段时间，但没有找到任何有用的东西。任何帮助都是非常感谢的！

这是我的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>

这是我在控制器中的数据源方法：

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

看看ng2 example on github，以及Virtual Paging上的ag-Grid文档

如果您在ng2示例中查看app.component.html，您将看到在那里设置了许多(例如，enableColResize)。

只需按照ag-Grid文档以相同的方式添加rowModelType和数据源-例如：

        <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...

在相应的组件中定义了myDataSource (示例中的AppComponent)