本文介绍如何在通过 fetch 动态加载数据并初始化 ag-Grid 的场景下，仍能灵活控制分页大小（如 15/50/100 行或“全部显示”），关键在于正确持有 grid 实例引用并调用 api.paginationSetPageSize()。
本文介绍如何在通过 fetch 动态加载数据并初始化 ag-grid 的场景下，仍能灵活控制分页大小（如 15/50/100 行或“全部显示”），关键在于正确持有 grid 实例引用并调用 `api.paginationsetpagesize()`。
在动态初始化 ag-Grid（例如通过 fetch 获取 JSON 数据后创建表格）时，常见的误区是将 new agGrid.Grid(...) 的配置对象直接传入而未保留对网格实例（grid instance）或配置对象的引用。这会导致后续无法调用 gridOptions.api.paginationSetPageSize() —— 因为 gridOptions 根本未被定义，更无 api 属性。
✅ 正确做法是：显式声明一个全局（或模块级）变量来保存 grid 实例，而非仅保存配置对象。因为 api 方法实际挂载在 grid 实例上（即 new agGrid.Grid(...) 返回的对象），而非配置对象中。
以下是推荐的完整实现方案：
1. 声明并持有 grid 实例引用
let gridApi; // 全局变量，用于存储 grid 的 API 实例
document.addEventListener('DOMContentLoaded', () => {
fetch('/data.evento')
.then(response => {
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return response.json();
})
.then(data => {
const gridDiv = document.querySelector('#myGrid');
// 初始化 grid 并保存其 API 引用
const grid = new agGrid.Grid(gridDiv, {
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, // 默认每页 15 行
domLayout: 'autoHeight',
enableSorting: true,
enableFilter: true,
rowData: data
});
// ✅ 关键：从 grid 实例中提取 api，并赋值给全局变量
gridApi = grid.api;
})
.catch(err => console.error('Failed to load grid data:', err));
});
2. 实现动态分页大小切换函数
function changePageSizeFunction() {
const select = document.getElementById('pageSizeSelect');
const value = parseInt(select.value, 10);
if (!gridApi) {
console.warn('ag-Grid API not available yet. Please wait for data loading.');
return;
}
if (value === -1) {
// “全部显示” → 设置极大值（注意：ag-Grid v28+ 推荐使用 null 表示无分页；旧版可用 Number.MAX_VALUE）
gridApi.paginationSetPageSize(Number.MAX_VALUE);
} else {
gridApi.paginationSetPageSize(value);
}
}
3. 前端 HTML 控件（保持不变）
<label for="pageSizeSelect">显示：</label> <select id="pageSizeSelect" onchange="changePageSizeFunction()"><option value="15">15 行</option> <option value="50">50 行</option> <option value="100">100 行</option> <option value="-1">全部</option></select><div id="myGrid" class="ag-theme-alpine" style="height: 500px;"></div>
⚠️ 注意事项
- 不要依赖 gridOptions.api：gridOptions 是配置对象，不含 api；api 属于 new agGrid.Grid(...) 返回的实例。
- 确保 gridApi 已就绪：changePageSizeFunction 必须在 grid 初始化完成（即 fetch.then(...) 执行后）才可安全调用，否则会报错。可在函数内加空值校验（如上所示）。
-
ag-Grid 版本差异：
- v27 及以下：paginationSetPageSize(Number.MAX_VALUE) 可实现“全部显示”；
- v28+：推荐设置 paginationSetPageSize(null) 启用“无限滚动”模式（需配合 paginationAutoPageSize: false），或继续用 Number.MAX_VALUE（兼容性更强）。
- 避免重复初始化：若页面可能多次执行 DOMContentLoaded 或重绘，建议增加防重逻辑（如检查 gridApi 是否已存在）。
通过以上方式，你即可在动态数据加载场景下，完全复用原有的分页控制逻辑，实现用户自由切换每页行数的交互体验。
