ag网格剪贴板,用于剪切动作

时间:2019-07-05 14:37:08

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

我想在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>
    );
  }
}
...

1 个答案:

答案 0 :(得分:0)

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

this.gridApi.getCellRanges()

它将返回所选的列以及startRow,endRow值,这是我所需要的!

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