Ag-grid：使用“agSelectCellEditor”时清除单元格答案

【问题标题】：Ag-grid: clear cell when "agSelectCellEditor" is usedAg-grid：使用“agSelectCellEditor”时清除单元格
【发布时间】：2021-04-16 06:04:27
【问题描述】：

如 ag-grid documentation 中所述：

如果 Backspace 或删除被按下。

但这在使用“agSelectCellEditor”时不起作用。如果您按 Delete 或 Backspace，单元格将进入 EDIT 模式，您只能选择作为选项提供的值。

知道如何实现相同的行为吗？

【问题讨论】：

如果您使用的是社区版本，您可以通过stackblitz展示示例吗？

标签： javascript angular grid ag-grid ag-grid-angular

【解决方案1】：

我发现一篇文章解释了如何编写删除单元格逻辑。这也适用于多个单元格。请查看这篇文章：https://blog.ag-grid.com/deleting-selected-rows-and-cell-ranges-via-key-press/

基本上，您可以在我们的默认列定义中使用 suppressKeyboardEvent 回调来覆盖 DELETE 或 BACKSPACE 键的默认行为：

defaultColDef: {
    suppressKeyboardEvent: params => {
        if (!params.editing) {
            let isBackspaceKey = params.event.keyCode === 8;
            let isDeleteKey = params.event.keyCode === 46;
            
            if (isBackspaceKey || isDeleteKey) {
              params.api.getCellRanges().forEach(range => {
              let colIds = range.columns.map(col => col.colId);

              let startRowIndex = Math.min(
                  range.startRow.rowIndex,
                  range.endRow.rowIndex
              );
              let endRowIndex = Math.max(
                  range.startRow.rowIndex,
                  range.endRow.rowIndex
              );

              clearCells(startRowIndex, endRowIndex, colIds, params.api);
            }
        }
        return false;
    }
}

以及删除方法：

function clearCells(start, end, columns, gridApi) {
  let itemsToUpdate = [];

  for (let i = start; i <= end; i++) {
    let data = gridApi.rowModel.rowsToDisplay[i].data;
    columns.forEach(column => {
      data[column] = "";
    });
    itemsToUpdate.push(data);
  }

  gridApi.applyTransaction({ update: itemsToUpdate });
}

这按预期工作。

【讨论】：