如何在ag-Grid Angular分页旁添加每页记录数组件？

核心思路 #

ag-Grid的分页栏支持自定义内容，你可以通过配置gridOptions中的paginationPanel属性，结合自定义组件的方式，直接将每页记录数选择器嵌入到页码区域旁边。

具体实现步骤 #

1. 自定义每页记录数组件

以Angular为例创建下拉选择组件（其他框架可类比调整）：

import { Component } from '@angular/core';
import { IComponentAngularComp } from '@ag-grid-community/angular';

@Component({
  template: `
    <select (change)="onPageSizeChange($event)" class="ag-page-size-select">
      <option value="10">10条/页</option>
      <option value="20">20条/页</option>
      <option value="50">50条/页</option>
    </select>
  `,
  styles: [`
    .ag-page-size-select {
      margin: 0 8px;
      padding: 4px 6px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
  `]
})
export class PageSizeSelectorComponent implements IComponentAngularComp {
  params: any;

  agInit(params: any): void {
    this.params = params;
    // 初始化选中当前页大小
    const selectEl = document.querySelector('.ag-page-size-select') as HTMLSelectElement;
    selectEl.value = params.api.paginationGetPageSize().toString();
  }

  onPageSizeChange(event: Event): void {
    const pageSize = parseInt((event.target as HTMLSelectElement).value, 10);
    this.params.api.paginationSetPageSize(pageSize);
  }
}

2. 配置ag-Grid分页面板

在gridOptions中自定义分页面板模板，将自定义组件插入到页码区域：

gridOptions = {
  pagination: true,
  paginationPageSize: 10,
  // 自定义分页面板模板，保留原生页码元素的ref保证功能正常
  paginationPanel: {
    template: `
      <div class="ag-pagination-panel">
        <!-- 插入自定义页大小选择器 -->
        <ag-grid-angular 
          [componentFramework]="PageSizeSelectorComponent"
          [gridOptions]="gridOptions">
        </ag-grid-angular>
        <!-- 原生页码导航元素 -->
        <span ref="lbPage" class="ag-pagination-panel-label"></span>
        <button ref="btFirst" class="ag-pagination-button ag-pagination-button-first"></button>
        <button ref="btPrevious" class="ag-pagination-button ag-pagination-button-previous"></button>
        <input ref="txtCurrentPage" class="ag-pagination-panel-input" type="number"/>
        <button ref="btNext" class="ag-pagination-button ag-pagination-button-next"></button>
        <button ref="btLast" class="ag-pagination-button ag-pagination-button-last"></button>
      </div>
    `
  },
  // 注册自定义组件
  frameworkComponents: {
    PageSizeSelectorComponent: PageSizeSelectorComponent
  }
};

3. 样式统一调整（可选）

添加CSS让组件与页码栏样式更协调：

.ag-pagination-panel {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ag-pagination-panel-label {
  margin: 0 4px;
}

关键说明 #

• React/Vue等其他框架的实现逻辑一致，只需对应框架的组件写法，将自定义组件注册到frameworkComponents即可。
• 模板中的ref属性对应ag-Grid原生分页面板的元素，必须保留才能保证原生页码导航功能正常。

内容的提问来源于stack exchange，提问作者Z.Mg