如何自定义ag-grid分页

Question

是否可以为 Angular 自定义 ag-grid 分页。 附上自定义分页图像以供参考。

<ag-grid-angular id="myGrid" style="width: 500px; height: 500px;" class="ag-theme-alpine"
 [rowData]="gridOptions.rowData"
    [columnDefs]="gridOptions.columnDefs" [pagination]="true"  [paginationPageSize]="paginationPageSize"
    (gridReady)="onGridReady($event)"  (cellClicked)="onCellClicked($event)"
    [defaultColDef]="defaultColDef" 
    [frameworkComponents]="frameworkComponents" [allowContextMenuWithControlKey]="true"
    [getContextMenuItems]="getContextMenuItems" >
</ag-grid-angular>


 onPageSizeChanged(event: any) {
    var value = event.target.value;
    this.gridApi.paginationSetPageSize(Number(value));
  }

Answer 1

要创建自定义分页面板，您必须执行以下两件事：

1. 设置 suppressPaginationPanel=true 以告诉网格不显示分页的默认控件，如 文档

2. 创建一个 自定义状态栏面板来设计您的分页面板您的要求。请注意，这是一项企业功能，因此如果您拥有 AG Grid 许可证，您可以通过 Zendesk 联系团队以获得进一步的支持。