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

Question

如 ag-grid文档中所述：

如果按下 Backspace 或 Delete，默认编辑器将清除单元格的内容。

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

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

标签： javascriptangulargridag-gridag-grid-angular

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

这按预期工作。