用于剪切操作的 ag 网格剪贴板

Question

我想在 ag 网格中实现复制、剪切、粘贴操作。 Ag 网格企业功能包含除剪切操作外的所有我需要的功能。我认为可以通过在组件中添加 keydown 事件处理程序来实现。该过程仅包括复制和擦除单元格数据。但问题是我找不到我复制的行和列，单元格的位置。有什么想法吗？

...
constructor(props) {
    super(props);

    this.state = {
      columnDefs: [
        {
          headerName: "Athlete",
          field: "athlete",
          width: 150,
          suppressSizeToFit: true
        },
        {
          headerName: "Age",
          field: "age",
          width: 90,
          minWidth: 50,
          maxWidth: 100
        },
        ...
      ],
      defaultColDef: { editable: true },
      rowSelection: "multiple",
      clipboardDeliminator: ",",
      rowData: []
    };
}
onKeyDown(evt) {
    if (evt.key == "x" && (evt.ctrlKey || evt.metaKey)) {
        this.gridApi.copySelectedRangeToClipboard();
        // here should add some code        
    }    
}
render() {
    return (
      <div style={{ width: "100%", height: "100%" }}>
        <div className="grid-wrapper">
          <div
            id="myGrid"
            style={{
              boxSizing: "border-box",
              height: "100%",
              width: "100%"
            }}
            className="ag-theme-balham"
            onKeyDown={this.onKeyDown.bind(this)}
          >
            <AgGridReact
            columnDefs={this.state.columnDefs}
            defaultColDef={this.state.defaultColDef}
            enableRangeSelection={true}
            rowSelection={this.state.rowSelection}
            clipboardDeliminator={this.state.clipboardDeliminator}
            onGridReady={this.onGridReady.bind(this)}
            rowData={this.state.rowData}
          />

          </div>
        </div>
      </div>
    );
  }
}
...

Answer 1

我找到了答案。有一种方法可以选择范围

this.gridApi.getCellRanges()

它会 return 列选择和 startRow，endRow 值，所有我需要的！

https://www.ag-grid.com/javascript-grid-range-selection/

用于剪切操作的 ag 网格剪贴板

ag grid clipboard for cut action

javascript

clipboard

reactjs

ag-grid

ag-grid-react