Question

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

这是我的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和datasource，例如：

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

angular2 ag-grid分页的任何例子？

1 个答案: