Question

我有一个具有fullRow编辑功能的Ag网格。单击Edit按钮（使用网格的startEditing()方法）时，该行进入编辑模式。

在编辑模式下，我显示两个按钮Save和Cancel。我已经找到了抑制键盘事件（Enter，Esc等）的方法。但是当单击另一个单元格时，我找不到任何方法来阻止网格退出编辑模式。我希望即使单击网格的另一部分，行仍处于编辑模式。

如何实现此功能？谢谢

N：B：我在Angular 9中使用了ag-grid（最新版本）

Answer 1

AG-Grid文档声明以下内容：

发生以下任何一种情况时，网格将停止编辑：

其他单元格焦点：如果网格中的焦点转到另一个单元格，编辑将停止。

这似乎是导致大多数问题的功能。如另一个答案中所述，没有办法使用ag-grid禁用此功能，这很不幸。由ag-grid提供的事件处理程序将在ag-grid处理完单元格焦点之后全部运行，因此它们都无济于事。还有一些选项可以禁用对行的单击，但是这些都不阻止单元格获得焦点。

因此，如果您使用内置的编辑器而不必处理丢失编辑器状态的情况，那么Pratik Bhat提出的解决方案是最佳选择。

如果使用的是自定义编辑器组件，则每次ag-grid关闭编辑器时都会丢失状态，这是一个巨大的问题。我能够提出以下解决方法，以防止单元格的焦点触发stopEditing事件。此解决方法很丑陋，我只建议将其作为最后的手段。

解决方法：

AG-Grid源代码定义了onCellFocused的原型。您可以在应用程序源代码中覆盖此函数，并删除调用stopRowOrCellEdit（）的代码，这将阻止其他行的焦点停止编辑模式。下面是您需要在应用程序源代码中包含的代码片段的示例（请务必删除注释下方的行）。

如果您决定采用这种方法，请确保从使用的AG网格版本的源代码中复制函数原型，而不是从本示例中复制。此示例来自ag-grid 22.0.1，因此该功能在您的ag-grid源中可能会有所不同。请记住，如果更新AG网格，则可能需要更新函数覆盖以使其与新的农业网格资源。如果您使用包管理器，请确保锁定了ag-grid的版本，以便应用程序源代码中被覆盖的原型将匹配。

import { CellComp, _ } from 'ag-grid-community';

CellComp.prototype.onCellFocused = function(event) {
      var cellFocused = this.beans.focusedCellController.isCellFocused(
        this.cellPosition
      );
      
      if (cellFocused !== this.cellFocused) {
        var doingFocusCss = !this.beans.gridOptionsWrapper.isSuppressCellSelection();
        if (doingFocusCss) {
          _.addOrRemoveCssClass(this.getGui(), 'ag-cell-focus', cellFocused);
        }
        this.cellFocused = cellFocused;
      }
      
      if (cellFocused && event && event.forceBrowserFocus) {
        this.getGui().focus();
        if (
          !document.activeElement ||
          document.activeElement === document.body
        ) {
          this.getGui().focus();
        }
      }

      // remove these lines to prevent editing from being stopped on focus
      var fullRowEdit = this.beans.gridOptionsWrapper.isFullRowEdit();
      if (!cellFocused && !fullRowEdit && this.editingCell) {
        this.stopRowOrCellEdit();
      }
    };

Answer 2

不幸的是，ag-grid不支持此功能。

但是我实施了一项解决方案。

基本上，您需要跟踪编辑开始后是否随时单击保存和取消。如果未单击“保存”，然后再次显示弹出窗口。

在模板中

(rowEditingStopped)="onRowEditingStopped($event)"
(rowEditingStarted)="onRowEditingStarted($event)"

在组件中

  onRowEditingStarted(params) {
       isSaveClicked = false;
       isCancelClicked = false;
  }

  onRowEditingStopped(params) {

   if (!isSaveClicked || !isCancelClicked ) {
    this.gridApi.setFocusedCell(2, 'columnName');
    this.gridApi.startEditingCell({
      rowIndex: 2,
      colKey: 'columnName',
    });}
  }

更多文档-https://www.ag-grid.com/javascript-grid-events/#editing

Answer 3

Ag-grid在执行此操作的'numeric-editor.component.ts'文件主代码中具有example here，具有此功能

export class NumericEditor implements ICellEditorAngularComp, AfterViewInit {


private params: any;
  public value: number;
  public highlightAllOnFocus: boolean = true;
  private cancelBeforeStart: boolean = false;

  @ViewChild('input', { read: ViewContainerRef }) public input: any;

  agInit(params: any): void {
    this.params = params;
    this.setInitialState(this.params);

    // only start edit if key pressed is a number, not a letter
    this.cancelBeforeStart =
      params.charPress && '1234567890'.indexOf(params.charPress) < 0;
--------- if this condition return true cell will exit from edit state if it return false cell will enter in edit state
  }

  isCancelBeforeStart(): boolean {
    return this.cancelBeforeStart;
  }
}

当单击网格上的任何其他单元格时，Ag Grid将停止编辑单元格。如何预防这种情况？

3 个答案:

AG-Grid文档声明以下内容：