angular - agGrid - 在现有行之外单击时检测

Question

在 agGrid 的文档中，它们描述了当用户在网格外部单击时，如何添加stopEditingWhenGridLosesFocus“停止编辑”单元格的值。

var gridOptions = {
  columnDefs: [
     . . .
  ],
  defaultColDef: {
     . . .
  },
  // this property tells grid to stop editing if the grid loses focus
  stopEditingWhenGridLosesFocus: true,
};

取自：https ://www.ag-grid.com/javascript-grid-cell-editing

这工作得很好......但是我如何检测用户是否已经停止编辑，但仍然在他们之前编辑的同一行数据中，或者他们是否点击了这一行之外？

我遇到的问题是当我有一个空白网格时，我让用户添加一个新行。

我希望用户能够单击“添加新按钮”，他们会在网格中看到一个新行，以便他们输入该行中的所有值，并且当他们在该行之外单击时，我想调用我的网络服务来保存值。

实际发生的是，我向 中添加了一个新项目rowData，用户可以编辑该行中的值......但我永远无法确定他们何时在该行之外单击，所以我从未被告知是时候调用我的保存功能。

如果网格中已经有一行，则没有问题。用户可以编辑新行中的值，当他们完成后，他们可以点击现有行，然后onSelectionChanged触发 agGrid " " 事件。

但是，如果网格中唯一的行是新行......这个事件永远不会被调用。

最终结果：用户可以点击我的“添加新行”按钮，但我永远无法为他们保存这个新行（除非我每次他们在该行的任何单元格中输入任何值后都进行保存，而不是等待让他们输入行中的所有值，然后保存。）

我能想到的唯一解决方案是在 agGrid 的列中添加一个丑陋的保存/取消按钮。

但是必须有比这更用户友好的方式......？

标签： angularag-grid

Answer 1

我有一个想法，我不确定它是否可行。您应该创建一个具有 100vw 和 100vh 层的 cellRenderer，然后绑定一个单击事件以检查是否单击了外部。