ag Grid - 在现有行之外单击时检测答案

【问题标题】：agGrid - detect when clicking outside an existing rowag Grid - 在现有行之外单击时检测
【发布时间】：2020-09-22 13:49:43
【问题描述】：

在 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 添加了一个新项目，用户可以编辑该行中的值......但我永远无法确定他们何时点击了该行之外，所以我从未通知该调用我的 Save 函数。

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

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

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

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

但一定有比这更用户友好的方式...？

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

在使用ag-grid 时，我从未使用过stopEditingWhenGridLosesFocus。我只需要处理两个事件：cellEditingStarted、cellEditingStopped。

这两个事件对我有用。

因此，可能一旦您添加了新行，您就可以调用api.startEditingCell()。每当单元格失去焦点时，cellEditingStopped 就会被调用。

希望这会有所帮助。如果有什么不清楚的地方请告诉我。

我如何检测用户是否已停止编辑，但仍在他们之前编辑的同一行数据中，或者他们是否点击了该行之外的数据？

如果您想编辑整行，[editType]="editType" 会帮助您。

【讨论】：

感谢您的回复。我的计划是仅在用户离开此行后才将值保存在新行中。你是对的，我可以等到他们在行中输入一个值 - 然后将新行保存回服务器 - 然后他们在第二列中输入一个值 - 我再次调用 Web 服务，以更新新行，依此类推。只是真的很乱。而且我真的不想在行中输入所有强制值之前保存记录。

【解决方案2】：

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

【讨论】：