ag-grid - 如何防止在“其他单元格焦点”的 ag-grid 中关闭单元格编辑
问题描述
我正在使用ag-grid库在 Angular 应用程序中处理可编辑表。我想继续编辑单元格(在全行编辑模式下),直到我完成它,然后通过 API 手动关闭编辑器。问题是编辑器正在关闭其他单元格单击/焦点(在其他行),如下所述:
当发生以下任何情况时,网格将停止编辑:
- 其他单元格焦点:如果网格中的焦点转到另一个单元格,则编辑将停止。
如果可能的话,我无法弄清楚如何禁用它。安装onCellMouseDown()
钩子没有帮助,因为cellFocused
事件是在cellMouseDown
. 因此,在我有机会截获mousedown
事件之前,编辑就停止了。
这是我的stackblitz小摘录,其中包含相关的代码。
这种情况的需要是我想验证条目,并且如果表单无效,则不允许用于退出编辑。到目前为止,我发现的唯一解决方法是,当编辑器关闭时,在编辑单元格之外的任何单击时,我都会立即在onRowEditingStopped()
挂钩中重新打开它,除非编辑器已通过“确定”按钮关闭。
解决方案
毕竟,我已经设法提供了一个完全适合我也面临的这个问题的自定义解决方案。
首先是在当前正在编辑特定行时禁用指向未编辑行的指针事件。在 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");
});
}
推荐阅读
- python - 找到点之间的最短距离
- java - 我有从主机收集的数据(小时/日期),但我无法将它们放入文本(场景生成器)
- arrays - 用Scala中的另一个数组中的元素替换一个数组中的元素
- android-camera-intent - 相机意图中的模糊图像
- ruby - 跟踪推荐用户的奖励
- vue.js - 字体很棒的 SVG 图标不适用于 Vuetify
- reactjs - 如何将文本框中的值作为 HTML 字符串提交?
- variables - 如何从用户输入中为特定变量赋值
- transactions - 尽管下一个事务步骤失败,但 TypeORM 事务将实体保存到数据库
- ios - 根据内容动态增加 UICollectionViewCell 大小