如何防止在 ag-grid 中双击单元格？答案

【问题标题】：How to prevent cell double click in ag-grid?如何防止在 ag-grid 中双击单元格？
【发布时间】：2020-04-05 14:42:54
【问题描述】：

我想使用cellClicked($event) 函数来处理我的网格中的点击。我需要禁用对同一个单元格的多次点击，以防止多余的后端调用。如果我向onCellDoubleClick($event) 注册一个空回调，我的问题就解决了，但我想找到一个更优雅的解决方案。

ag-grid 是否有防止双击整个网格的选项？

this.gridOptions = <GridOptions> {
  ...
  onCellClicked: this.cellClicked.bind(this), // <-- Only one with supstance
  onGridReady: this.onGridReady.bind(this),
  onCellDoubleClicked: this.onCellDoubleClicked.bind(this) // <-- Empty function, feels hacky.
}

【问题讨论】：

标签： ag-grid-angular

【解决方案1】：

我通过创建custom component 来处理它。

@Component({
  template: `
  <button [disabled]="isDisabled" (click)="invokeParent()"</button>
  `
})

export class ChildComponent implements ICellRendererAngularComp {

  private isDisabled: boolean = false;
  private params: any;
  constructor() {}

  agInit(params: any) {
    this.params = params;
    if (this.params.value === true) {
      this.isDisabled = true;
    }
  }

  public invokeParent() {
    this.params.value === false ? this.isDisabled = true  : this.isDisabled = false;
    this.params.context.ParentComponent.parentMethod(this.params);
  }

  refresh(): boolean {
    return true
  }
}

在父组件中我创建了一个方法来执行后端调用。

【讨论】：

【解决方案2】：

使用 AgGrid 的 "suppressClickEdit" 绑定属性：

<ag-grid-angular
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [suppressClickEdit]="true"
></ag-grid-angular>

【讨论】：