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

时间:2020-06-18 20:10:56

标签: ag-grid ag-grid-react

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

enter image description here

1 个答案:

答案 0 :(得分:0)

如果有人要实现相同的目标,则下面是解决方案。 在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。