ag-Grid复选框间歇性不显示问题求助

问题描述 #

我们的ag-Grid存在偶发的复选框间歇性不显示问题——部分行显示复选框，部分行缺失，缺失行出现左移错位。该问题触发概率极低，每日约10次页面访问中仅出现1次。

环境配置 #

• UI框架：Angular 7
• Node.js版本：14.x
• ag-Grid版本：ag-grid-community@~23.2.1、ag-grid-enterprise@^23.2.1

已执行的排查步骤 #

• 网格配置：通过列定义的checkboxSelection属性启用复选框行选择，网格选项rowSelection设为'multiple'
• 数据加载：采用异步加载网格数据，通过setTimeout延迟确保数据加载完成后渲染网格
• CSS检查：排查无样式冲突，样式均作用于特定类和ID以避免副作用

组件配置代码片段 #

<ag-grid-angular style="width: 100%; height: 500px"
        [rowData]="gridData"
        [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef"
        [rowSelection]="rowSelection"
        [isRowSelectable]="isRowSelectable"
        (gridReady)="GridReady($event)"
></ag-grid-angular>

注：代码中rowSelection传入值为"multiple"，isRowSelectable传入值为undefined。

this.defaultColDef = {
  flex: 1,
  minWidth: 120,
  wrapText: true,
  autoHeight: true,
  sortable: true,
  resizable: true,
  headerCheckboxSelectionFilteredOnly: true,
  sortingOrder: ['asc', 'desc'],
  headerCheckboxSelection: isFirstColumn,
  checkboxSelection: isFirstColumn,
  menuTabs: ['filterMenuTab']
};

function isFirstColumn(params) {
  var displayedColumns = params.columnApi.getAllDisplayedColumns();
  var thisIsFirstColumn = displayedColumns[0] === params.column;
  return thisIsFirstColumn;
}

排查思路与解决方案 #

1. 修复isFirstColumn的动态列判断逻辑 #

• 问题点：getAllDisplayedColumns()在网格初始化、列重排的异步阶段可能返回不稳定的列顺序，导致部分行判断是否为第一列时出错，复选框无法渲染。
• 解决方案：改用列的固定colId标识判断第一列，避免依赖动态列顺序。给第一列设置唯一colId，在判断函数中直接匹配：

  function isFirstColumn(params) {
    // 替换为你的第一列colId
    return params.column.colId === 'selection-column';
  }
  

2. 同步数据加载与网格初始化时机 #

• 问题点：setTimeout的延迟时间不可靠，可能在数据未完全就绪或网格未完成初始化时触发渲染，导致部分行的复选框渲染逻辑未执行。
• 解决方案：移除setTimeout，改用ag-Grid内置的gridReady事件触发数据加载，确保网格完全初始化后再传入数据：

  GridReady(event) {
    // 保存网格API实例供后续使用
    this.gridApi = event.api;
    this.gridColumnApi = event.columnApi;
    
    // 在gridReady事件中异步加载数据
    this.loadGridData().then(data => {
      this.gridData = data;
      // 强制刷新第一列单元格，确保复选框渲染
      this.gridApi.refreshCells({columns: ['selection-column'], force: true});
    });
  }
  

3. 升级ag-Grid版本修复已知bug #

• 问题点：ag-Grid 23.x版本存在部分行渲染时复选框逻辑失效的偶发bug，尤其在列动态调整、数据异步加载场景下。
• 解决方案：升级ag-Grid到该大版本的最新补丁（如23.3.5），或升级到兼容Angular 7的更高稳定版本（如25.x系列）。

4. 强制触发复选框列的单元格刷新 #

• 问题点：部分行的复选框渲染可能因网格缓存或渲染优化被跳过。
• 解决方案：在数据更新完成后，调用网格API强制刷新第一列的所有单元格：

  // 数据更新后执行
  this.gridApi.refreshCells({
    columns: ['selection-column'], // 替换为你的第一列colId
    force: true // 强制跳过缓存，重新执行渲染逻辑
  });
  

5. 显式设置行可选性 #

• 问题点：虽然当前isRowSelectable设为undefined，但网格在某些边缘场景下可能误判行的可选状态，间接影响复选框渲染。
• 解决方案：显式设置isRowSelectable为返回true的函数，确保所有行都具备可选性：

  this.isRowSelectable = (params) => {
    return true; // 允许所有行被选择
  };
  

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