用于剪切动作的 ag 网格剪贴板答案

【问题标题】：ag grid clipboard for cut action用于剪切动作的 ag 网格剪贴板
【发布时间】：2019-11-16 05:02:30
【问题描述】：

我想在 ag 网格中实现复制、剪切、粘贴操作。 Ag Grid Enterprise 功能包含我需要的所有功能，除了剪切操作。我认为可以通过向组件添加 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>
    );
  }
}
...

【问题讨论】：

标签： javascript reactjs clipboard ag-grid ag-grid-react

【解决方案1】：

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

this.gridApi.getCellRanges()

它将返回选定的列和 startRow、endRow 值，我只需要！

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

【讨论】：