AG-Grid实现单元格选中时聚焦复选框及键盘操作需求

一、单元格选中时自动聚焦复选框 #

在自定义单元格渲染器中，通过refresh方法和Grid的onCellFocused事件，确保单元格成为焦点时，内部复选框自动获得焦点：

class CheckboxCellRenderer {
  init(params) {
    this.params = params;
    this.eGui = document.createElement('div');
    this.eCheckbox = document.createElement('input');
    this.eCheckbox.type = 'checkbox';
    this.eCheckbox.checked = params.value;

    // 空格切换复选框状态
    this.eCheckbox.addEventListener('keydown', (e) => {
      if (e.key === ' ') {
        e.preventDefault();
        this.toggleState();
      }
    });

    // 点击切换状态
    this.eCheckbox.addEventListener('change', () => {
      this.toggleState();
    });

    this.eGui.appendChild(this.eCheckbox);
  }

  getGui() {
    return this.eGui;
  }

  refresh(params) {
    this.params = params;
    this.eCheckbox.checked = params.value;

    // 单元格聚焦时自动选中复选框
    const focusedCell = this.params.columnApi.getFocusedCell();
    if (focusedCell?.rowIndex === params.rowIndex && focusedCell?.colId === params.column.colId) {
      this.eCheckbox.focus();
    }
    return true;
  }

  toggleState() {
    const newValue = !this.eCheckbox.checked;
    this.params.setValue(newValue);
    this.eCheckbox.checked = newValue;
  }
}

二、Grid配置与键盘导航支持 #

配置列定义和Grid选项，禁用整行选中，开启单元格聚焦模式：

const columnDefs = [
  {
    headerName: '选择',
    field: 'selected',
    cellRenderer: CheckboxCellRenderer,
    suppressRowSelection: true, // 禁止整行选中
    cellStyle: { textAlign: 'center' }
  },
  // 其他列配置...
];

const gridOptions = {
  columnDefs,
  rowData: 你的数据集合,
  enableCellFocus: true, // 开启单元格聚焦
  suppressRowClickSelection: true, // 点击单元格不选中整行
  // 监听单元格聚焦事件，确保复选框获取焦点
  onCellFocused: (params) => {
    if (params.column.colId !== 'selected') return; // 替换为你的复选框列ID
    const rendererInstance = params.api.getCellRendererInstances({
      rowIndex: params.rowIndex,
      columns: [params.column]
    })[0];
    rendererInstance?.eCheckbox?.focus();
  }
};

三、核心逻辑说明 #

• 上下箭头切换单元格：AG-Grid默认支持，开启enableCellFocus后，按下上下箭头会自动切换到对应行的复选框列单元格。
• 空格切换状态：复选框获得焦点后，按下空格会触发绑定的keydown事件，切换状态并同步到Grid数据。
• 聚焦保障：refresh方法处理单元格刷新时的聚焦，onCellFocused处理导航切换时的聚焦，双重保证复选框能及时获得焦点。

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