如何在ag-grid-community v19.0.0纯JS版中动态增删列并保留分页？

我之前在项目里刚好碰到过一模一样的需求——用ag-grid社区版v19.0.0实现类似企业版的列工具面板，还要保住分页状态。之前试过直接替换columnDefs的方案，结果分页直接重置了，后来摸索出了一个可行的思路，核心就是不修改整个列定义集合，只切换列的可见性，这样分页状态完全不会受影响。

核心思路 #

企业版的列工具面板本质是通过修改列的可见性来控制显示/隐藏，但如果我们在社区版里直接重新设置gridOptions.columnDefs，ag-grid会触发表格的完全重初始化，分页的当前页码、每页条数这些状态都会被清空。所以正确的做法是：

• 自定义一个列选择面板，列出所有列的复选框
• 当用户勾选/取消勾选时，调用ag-grid的setColumnVisible方法单独修改对应列的可见性
• 同步面板和表格的列状态，确保两边显示一致

具体实现步骤（纯JavaScript） #

1. 初始化ag-grid并配置分页 #

首先正常初始化表格，开启分页，同时监听columnVisible事件用来同步面板状态：

// 表格配置
const gridOptions = {
  columnDefs: [
    { headerName: "用户ID", field: "userId", visible: true },
    { headerName: "用户名", field: "userName", visible: true },
    { headerName: "邮箱", field: "email", visible: false },
    { headerName: "注册日期", field: "registerDate", visible: true },
    // 更多列定义...
  ],
  rowData: [],
  pagination: true,
  paginationPageSize: 10,
  // 表格就绪后初始化列工具面板
  onGridReady: (params) => {
    initColumnToolPanel(params.api);
    // 这里加载你的数据
    loadYourRowData(params.api);
  },
  // 当列可见性变化时，同步面板的复选框状态
  onColumnVisible: (params) => {
    updateToolPanelCheckbox(params.column.getColId(), params.visible);
  }
};

// 渲染表格
new agGrid.Grid(document.getElementById('userGrid'), gridOptions);

2. 实现自定义列工具面板 #

创建一个DOM容器作为工具面板，然后遍历所有列生成复选框，绑定可见性切换事件：

// 初始化列工具面板
function initColumnToolPanel(gridApi) {
  const panelContainer = document.getElementById('columnToolPanel');
  // 获取所有列（包括隐藏列）
  const allColumns = gridApi.getAllColumns();

  allColumns.forEach(column => {
    const colId = column.getColId();
    const headerName = column.getColDef().headerName;

    // 创建复选框
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = `col-${colId}`;
    checkbox.checked = column.isVisible();

    // 创建列名标签
    const label = document.createElement('label');
    label.htmlFor = checkbox.id;
    label.textContent = headerName;

    // 绑定复选框变更事件
    checkbox.addEventListener('change', function() {
      // 关键：只修改当前列的可见性，不替换整个columnDefs
      gridApi.setColumnVisible(colId, this.checked);
    });

    // 把复选框和标签加入面板
    const row = document.createElement('div');
    row.style.margin = '8px 0';
    row.appendChild(checkbox);
    row.appendChild(label);
    panelContainer.appendChild(row);
  });
}

// 同步面板复选框和表格列状态
function updateToolPanelCheckbox(colId, visible) {
  const checkbox = document.getElementById(`col-${colId}`);
  if (checkbox) {
    checkbox.checked = visible;
  }
}

3. HTML结构示例 #

在页面中添加表格和工具面板的容器：

<div style="display: flex;">
  <!-- 列工具面板 -->
  <div id="columnToolPanel" style="width: 200px; padding: 16px; border-right: 1px solid #eee;"></div>
  <!-- ag-grid表格 -->
  <div id="userGrid" style="flex: 1; height: 500px;"></div>
</div>

为什么这个方案能保留分页？ #

因为setColumnVisible方法是ag-grid提供的局部更新API，它只会修改指定列的显示状态，触发的是表格的局部渲染，完全不会触动分页相关的状态（比如当前页码、分页数据缓存等）。而如果直接替换columnDefs，ag-grid会认为表格需要完全重新初始化，所有状态都会被重置，包括分页。

额外注意点 #

• 如果你的列是动态添加的，记得在添加列后调用initColumnToolPanel重新渲染面板（或者写一个追加列的方法）
• 如果有列分组需求，可以递归遍历列分组结构，在面板里渲染分组折叠/展开的UI，核心还是通过setColumnVisible控制可见性

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