单击删除按钮清除选定的范围单元格值

Question

我想通过单击删除键盘按钮来清除选定范围内单元格的所有值。有人可以告诉我如何实现吗？

Answer 1

如果有人想达到同样的效果，下面是解决方案。在agGrid的onRangeSelectionChanged回调函数中注册一个按键按下事件 onRangeSelectionChanged={()=>{ window.addEventListener("keydown", this.handleDeleteOnRange)} 然后，检查 handleDeleteOnRange 中是否按下删除键，使用 agGrid 的 api getCellRanges 获取选定的单元格范围并删除该单元格的值。

handleDeleteOnRange(event) {
    var cellRanges = this.gridApi.getCellRanges();
    var rowData = this.state.rowData;
    if ([46].indexOf(event.keyCode) > -1) { //delete key press
      cellRanges.map((range) => {
        if (range?.startRow?.rowIndex && range?.endRow?.rowIndex) {
          var startRow =
            Math.min(range.startRow.rowIndex, range.endRow.rowIndex);
          var endRow =
            Math.max(range.startRow.rowIndex, range.endRow.rowIndex);
          for (var rowIndex = startRow; rowIndex <= endRow; rowIndex++) {
            range.columns.forEach((column) => {
              if (column.colDef.field !== "row_id") {
                rowData[rowIndex][column.colDef.field] = "";
              }
            });
          }
        }
        this.setState({ rowData: rowData });
        this.gridApi.refreshCells();
      });
    }
  }

以上只是演示其工作原理的演示代码。

不要忘记在作业完成后删除 eventListeners。

单击删除按钮清除选定的范围单元格值

clear selected range cell values on clicking delete button

ag-grid

ag-grid-react