Ag grid “如何防止在ag网格中关闭单元格编辑”；“其他单元格焦点”；

我正在使用ag网格库处理角度应用程序中的可编辑表格。我想继续编辑单元格（在整行编辑模式下），直到我完成编辑，然后通过API手动关闭编辑器。问题是编辑器正在关闭其他单元格单击/聚焦（在其他行上），如下所述：

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

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

如果可能的话，我想不出如何禁用它。安装

onCellMouseDown（）

钩子没有帮助，因为

cellMouseDown

事件是在

cellMouseDown

之前触发的。因此，在我有机会截获

mousedown

事件之前，编辑就停止了

下面是我的小摘录和相关的代码片段

---

这种场景的需要是，我希望验证条目，并且如果表单无效，则不允许用于退出编辑的。到目前为止，我找到的唯一解决办法是，当编辑器关闭时，在编辑单元格外的任何单击上，我都会立即在

onRowEditingStopped（）

hook中重新打开它，除非编辑器已通过“OK”按钮关闭。

毕竟，我已经设法提供了一个完全适合我所面临的这个问题的自定义解决方案

第一件事是在当前正在编辑特定行时禁用指向未编辑行的指针事件。在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：

通过禁用指针事件，当您单击未编辑的单元格时，该单元格将无法获得焦点，因此当前编辑的单元格仍将保持编辑模式。您可以提供自己的自定义验证解决方案，并通过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");
    });
}

---

我使用过reactjs，但是这个

this.gridApi.redrawRows（）这对我有一点帮助，尽管我仍然无法避免关注另一个单元格。我有完全相同的要求…这方面有什么更新吗？我还不能实现我想要的，但它看起来是正确的方向，实际上这对Angular来说是可怕的实现。首选的解决方案是对覆盖层进行集成。
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");
    });
}