Ag-grid：使用"agSelectCellEditor"时清除单元格

Question

如农业网格所述documentation:

The default editor will clear the contents of the cell if Backspace or Delete are pressed.

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

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

Answer 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 });
}

这按预期工作。

Ag-grid：使用"agSelectCellEditor"时清除单元格

Ag-grid: clear cell when "agSelectCellEditor" is used

javascript

grid

ag-grid

angular

ag-grid-angular