AG 整个网格的网格变化检测

Question

团队正在使用 Angular AG-Grid。网格本身有 52 列，最多 40,000 行。

我们应该创建某种更改检测，以便在尝试点击 F5/刷新按钮时通知用户有未保存的更改（我的意思是 - 没有点击“保存到数据库”按钮）完全关闭应用程序。 我在 AG-Grid 文档中找不到任何内容可以让我们将数据首次加载时网格的初始状态与用户所做的更改进行比较。 我们在其他地方使用@HostListener 来处理“window:beforeunload”事件，但这是下一步。首先，我想了解如何处理如此大的网格中的变化检测。

Answer 1

一个简单的方法是

JSON.stringify

您的原始数据并将其与表中的字符串化数据进行比较，看看它们是否匹配。即使有 52 列和多达 40,000 行，这也应该是一个过于密集的操作。

这是一个简单的功能，可以为您检查：

  checkChanges() {

    console.log('data changed: ');
    console.log(
      JSON.stringify(this.rowData) != JSON.stringify(this.originalData)
    );
  }

您可以在

gridReady

回调中使用以下函数来获取行数据，因为您说您无权访问它：

onGridReady(params) {
    const api = params.api;
    this.rowsToDisplay = params.api.getModel().rowsToDisplay.map((x) => x.data);
    this.originalData = JSON.parse(JSON.stringify(this.rowData));
  }

演示.

Answer 2

我会通过在应用程序状态中设置一些标志来完成任务，例如

gridDirty: boolean

。然后监听grid事件

cellValueChanged

，设置flag。当点击“保存”按钮并保存数据时——重置标志。