ag-grid - 如何防止在 "Other Cell Focus"上的 ag-grid 中关闭单元格编辑

Question

我正在使用 ag-grid 库在 Angular 应用程序中处理一个可编辑的表格。我想继续编辑单元格(在全行编辑模式下)，直到我完成它，然后通过 API 手动关闭编辑器。问题是编辑器正在关闭其他单元格单击/焦点(在其他行上)，如 here 所述:

The grid will stop editing when any of the following happen:

• Other Cell Focus: If focus in the grid goes to another cell, the editing will stop.

如果可能的话，我无法弄清楚如何禁用它。安装 onCellMouseDown() hook 没有帮助，因为 cellFocused事件在 cellMouseDown 之前触发.因此，编辑在我有机会拦截 mousedown之前停止。事件。

这是我的 stackblitz带有相关代码片段的小摘录。

这种情况的需要是我想验证条目，并且如果表单无效，则不允许用于退出编辑。到目前为止，我发现的唯一解决方法是，当编辑器关闭时，在编辑单元格外的任何单击时，我都会立即在 onRowEditingStopped() 中重新打开它。除非编辑器已通过“确定”按钮关闭。

Answer 1

毕竟，我已经设法提供了一个完全适合我也面临的这个问题的自定义解决方案。
首先是在当前正在编辑特定行时禁用指向未编辑行的指针事件。在 Ag-grid 的“cellEditingStarted”回调中，我添加了以下代码:

public cellEditingStarted(event: any): void {
    //not all rows are on dom ag-grid takes care of it
    const nonSelectedGridRows = document.querySelectorAll('.ag-grid-custom-row:not(.ag-row-selected):not(.ag-row-editing):not(.pointer-events-none)');

    forEach(nonSelectedGridRows, row => {
        row.classList.add("pointer-events-none");
    });
}

因为在编辑特定单元格时，并非所有行都存在于 dom(Ag-grid 在滚动时创建和销毁)，所以我还添加了一个 rowClassRule，它在创建行时应用:

this.rowClassRules = {            
        'pointer-events-none': params => {
            if (params.api.getEditingCells().length > 0) {
                return true;
            }

            return false;
        }
    };

scss:

.pointer-events-none {
  pointer-events: none
}

通过禁用指针事件，当您单击未编辑的单元格时，该单元格将不会获得焦点，因此当前编辑的单元格仍将保持在编辑模式。您可以提供自己的自定义验证解决方案并通过 API 手动关闭编辑器。完成后，您必须再次启用指向所有网格行的指针事件:

private enablePointerEvents(): void {
    //not all rows are on dom ag-grid takes care of it
    const nonSelectedGridRows = document.querySelectorAll('.ag-grid-custom-row.pointer-events-none');

    forEach(nonSelectedGridRows, row => {
        row.classList.remove("pointer-events-none");
    });
}