如何在动态生成的ag-grid中修改表格显示行数？

方法一：保存Grid实例引用 #

初始化Grid时将实例存储起来，后续直接调用实例的API方法：

• 初始化阶段：

  // 在全局或组件作用域内声明变量
  let gridInstance;
  
  // 创建Grid时保存实例
  gridInstance = new agGrid.Grid(gridDiv, gridOptions);
  

• 下拉选择框的切换事件处理：

  function onPageSizeChange(newSize) {
    gridInstance.api.paginationSetPageSize(Number(newSize));
  }
  

方法二：通过DOM容器获取Grid实例 #

如果不想维护全局实例变量，可直接通过Grid所在的DOM容器获取实例：

function onPageSizeChange(newSize) {
  const gridDiv = document.getElementById('your-grid-container-id');
  const gridInstance = agGrid.Grid.getGridInstance(gridDiv);
  gridInstance.api.paginationSetPageSize(Number(newSize));
}

方法三：利用onGridReady回调保存API引用 #

在gridOptions中通过onGridReady回调获取并保存Grid的API对象：

let gridApi;

const gridOptions = {
  // 其他表格配置...
  onGridReady: (params) => {
    gridApi = params.api;
    // 在此处加载动态数据
    fetch('your-json-file-path')
      .then(res => res.json())
      .then(data => gridApi.setRowData(data));
  }
};

// 下拉切换事件
function onPageSizeChange(newSize) {
  gridApi.paginationSetPageSize(Number(newSize));
}

注意事项 #

• 确保调用paginationSetPageSize时Grid已完成初始化（比如在onGridReady回调触发之后）
• 下拉框传递的数值需要转为数字类型，避免类型错误导致方法调用失败

内容的提问来源于stack exchange，提问作者Khakovs