如何在动态加载数据的 ag-Grid 中动态调整每页显示行数-js教程-PHP中文网

如何在动态加载数据的 ag-Grid 中动态调整每页显示行数

本文介绍如何在使用 fetch 动态初始化 ag-Grid 的场景下，通过全局引用 grid 实例和 API，实现下拉选择切换分页大小（如 15/50/100 行或“全部”），解决因移除 gridOptions 变量导致无法调用 paginationSetPageSize 的问题。

本文介绍如何在使用 fetch 动态初始化 ag-grid 的场景下，通过全局引用 grid 实例和 api，实现下拉选择切换分页大小（如 15/50/100 行或“全部”），解决因移除 `gridoptions` 变量导致无法调用 `paginationsetpagesize` 的问题。

在动态加载数据的 ag-Grid 应用中，常见误区是将 new agGrid.Grid(...) 的配置对象直接传入而未保留对 Grid 实例或配置的引用，导致后续无法调用分页控制 API。核心解决方案是：显式声明并持久化 Grid 实例（而非仅 gridOptions），因为 paginationSetPageSize() 必须通过 gridApi 调用，而 gridApi 由 agGrid.Grid 构造后返回的实例提供。

✅ 正确做法如下（关键修改已高亮）：

// ✅ 声明全局 grid 实例变量（推荐），便于后续 API 调用
let gridApi;

document.addEventListener('DOMContentLoaded', () => {
  fetch('/data.evento')
    .then(response => response.json())
    .then(data => {
      const gridDiv = document.querySelector('#myGrid');

      // 配置对象（可选：仍可定义为 const gridOptions，但非必需）
      const gridOptions = {
        columnDefs: columnDefs,
        defaultColDef: {
          flex: 1,
          minWidth: 150,
          resizable: true,
          enableValue: true,
          enableRowGroup: true,
          enablePivot: true,
          sortable: true,
          filter: true,
          filter: 'agTextColumnFilter',
          menuTabs: ['filterMenuTab', 'generalMenuTab', 'columnsMenuTab'],
        },
        suppressRowClickSelection: true,
        rowSelection: 'multiple',
        enableRangeSelection: true,
        autoGroupColumnDef: { minWidth: 200 },
        sideBar: ['columns', 'filters'],
        animateRows: true,
        pagination: true,
        paginationPageSize: 15, // 初始页大小
        domLayout: 'autoHeight',
        enableSorting: true,
        enableFilter: true,
        rowData: data,
        // ✅ 关键：通过 onGridReady 回调获取 gridApi
        onGridReady: (params) => {
          gridApi = params.api; // 保存 API 实例
        }
      };

      new agGrid.Grid(gridDiv, gridOptions);
    });
});

接着，更新你的分页大小切换函数，直接调用 gridApi.paginationSetPageSize()：

function changePageSizeFunction() {
  const pageSizeSelect = document.getElementById('pageSizeSelect');
  const selectedValue = pageSizeSelect.value;
  const selectedPageSize = selectedValue === '-1' 
    ? Number.MAX_SAFE_INTEGER // 推荐用 MAX_SAFE_INTEGER 替代 MAX_VALUE（更安全）
    : parseInt(selectedValue, 10);

  if (gridApi && typeof gridApi.paginationSetPageSize === 'function') {
    gridApi.paginationSetPageSize(selectedPageSize);
  } else {
    console.warn('ag-Grid API not ready yet. Please wait for grid initialization.');
  }
}

⚠️ 注意事项：

不要依赖 gridOptions.api：gridOptions 是配置对象，不包含运行时 API；API 必须通过 onGridReady、onFirstDataRendered 等生命周期回调获取。
确保 DOM 元素存在且事件绑定正确：确认
“全部”选项的健壮处理：使用 Number.MAX_SAFE_INTEGER（≈9E15）比 Number.MAX_VALUE（≈1.8E308）更稳妥，避免某些浏览器分页逻辑异常；ag-Grid 内部会自动截断为实际总行数。
响应式兼容性：若启用 domLayout: 'autoHeight'，切换分页大小后建议调用 gridApi.resetRowHeights() 以重算高度（尤其含动态内容时）。

? 扩展提示：你也可以在 onGridReady 中一次性绑定下拉事件，避免全局函数污染：

onGridReady: (params) => {
  gridApi = params.api;
  const select = document.getElementById('pageSizeSelect');
  select.addEventListener('change', () => {
    const size = select.value === '-1' 
      ? Number.MAX_SAFE_INTEGER 
      : +select.value;
    gridApi.paginationSetPageSize(size);
  });
}

至此，无论数据是静态定义还是动态 fetch 加载，你都能灵活控制每页显示行数，并保持代码清晰、可维护。