Question

我正在使用 ag-grid 库在Angular应用程序中的可编辑表上工作。我想继续编辑单元格（以全行编辑模式），直到完成它，然后通过API手动关闭编辑器。问题在于，编辑器正在关闭here中所述的其他单元格单击/焦点（在另一行）：

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

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

我无法弄清楚如何禁用它（如果可能）。安装onCellMouseDown()挂钩没有帮助，因为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");
    });
}

Answer 2

我在 Ag-Grid React 中实现了上述相同的方法。我使用 getRowStyle 回调来添加 css pointerEvents: none 动态基础。它似乎对我有用。请参考以下代码

const getRowStyle = (params) => {
// this is not initialized in read mode
// condition for me ==> currentEditRowIndex.current !== null && params.node.rowIndex !== currentEditRowIndex.current
if (someCondition for Row other than inline edit row) {
  return { pointerEvents: "none" };
}
return null;
};

在开始编辑时添加此内容后..您将需要调用 redrawRows 以便可以应用 css 更改。

希望这会有所帮助。谢谢！！

如何防止在“其他单元格焦点”上的ag-grid中关闭单元格编辑

2 个答案: