如何检测Tabulator表格数据变更，触发用户保存确认提示？

当然有办法啦！针对Tabulator表格的数据变更检测，我给你整理了几个实用的方案，结合浏览器的页面离开事件就能实现你要的提示功能：

方案1：监听Tabulator的各类数据变更事件 #

Tabulator本身提供了大量和数据修改相关的事件，你可以通过监听这些事件来标记数据是否发生了变化，再结合浏览器的beforeunload事件在用户离开时给出提示。

具体实现步骤：

• 先定义一个状态变量isDataChanged，初始值设为false，用来记录数据是否被修改。
• 初始化表格时，监听cellEdited（单元格编辑）、rowAdded（行添加）、rowDeleted（行删除）等核心变更事件，触发时把isDataChanged设为true。
• 用户点击保存按钮完成数据写入后，把isDataChanged重置为false。
• 最后监听页面的beforeunload事件，当isDataChanged为true时，弹出提示阻止用户直接离开。

代码示例：

// 初始化状态变量，标记数据是否变更
let isDataChanged = false;

// 创建Tabulator表格
const table = new Tabulator("#your-table-id", {
  columns: [/* 你的列配置 */],
  ajaxURL: "your-data-file.txt", // 加载数据的文本文件路径
  // 监听单元格编辑完成事件
  cellEdited: function(cell) {
    isDataChanged = true;
  },
  // 监听新增行事件
  rowAdded: function(row) {
    isDataChanged = true;
  },
  // 监听删除行事件
  rowDeleted: function(row) {
    isDataChanged = true;
  },
  // 还可以按需监听rowUpdated（行更新）等其他变更事件
});

// 绑定保存按钮的点击事件
document.getElementById("save-btn").addEventListener("click", function() {
  // 这里执行你的保存逻辑，比如将表格数据写回文本文件
  // 示例：用Tabulator的download方法导出为txt，或者自定义AJAX请求写入
  table.download("txt", "your-data-file.txt");
  
  // 保存完成后重置变更状态
  isDataChanged = false;
});

// 监听页面离开事件，提示未保存的修改
window.addEventListener("beforeunload", function(e) {
  if (isDataChanged) {
    const tipMessage = "你有未保存的修改，离开后将会丢失，确定要离开吗？";
    // 不同浏览器对提示文本的支持不同，但触发提示的逻辑是通用的
    e.returnValue = tipMessage;
    return tipMessage;
  }
});

方案2：对比原始数据与当前数据 #

如果担心单一事件监听有遗漏（比如批量修改数据的场景），可以在表格初始化时保存一份原始数据的深拷贝，之后在需要检测时对比当前表格数据和原始数据是否一致。

代码示例：

// 存储原始数据的深拷贝
let originalData = [];

const table = new Tabulator("#your-table-id", {
  ajaxURL: "your-data-file.txt",
  // 加载数据后保存原始版本
  ajaxResponse: function(url, params, response) {
    // 用JSON深拷贝确保和原始数据完全独立
    originalData = JSON.parse(JSON.stringify(response));
    return response;
  },
  // 其他表格配置
});

// 保存按钮点击后，更新原始数据为当前最新状态
document.getElementById("save-btn").addEventListener("click", function() {
  // 执行保存逻辑
  // ...
  
  // 更新原始数据
  originalData = JSON.parse(JSON.stringify(table.getData()));
});

// 页面离开前对比数据
window.addEventListener("beforeunload", function(e) {
  const currentData = table.getData();
  // 通过JSON序列化对比数据（适合数据结构简单的场景）
  if (JSON.stringify(currentData) !== JSON.stringify(originalData)) {
    const tipMessage = "未保存的修改将会丢失，确定离开？";
    e.returnValue = tipMessage;
    return tipMessage;
  }
});

注意：如果你的数据包含函数、Date对象等特殊类型，JSON.stringify会丢失信息，这时候可以自定义一个深对比函数来遍历数据属性逐一对比。

方案3：利用Tabulator的dataChanged统一事件 #

Tabulator提供了一个dataChanged事件，当表格数据发生任何类型的变更（编辑、增删、批量更新等）时都会触发，用这个事件可以更简洁地标记数据变更状态，不用单独监听多个事件。

代码示例：

let isDataChanged = false;

const table = new Tabulator("#your-table-id", {
  columns: [/* 列配置 */],
  ajaxURL: "your-data-file.txt",
  // 数据发生任何变更时触发
  dataChanged: function(data) {
    isDataChanged = true;
  },
});

// 保存后重置状态
document.getElementById("save-btn").addEventListener("click", function() {
  // 执行保存逻辑
  // ...
  
  isDataChanged = false;
});

// 页面离开提示
window.addEventListener("beforeunload", function(e) {
  if (isDataChanged) {
    const tipMessage = "你有未保存的修改，确定要离开吗？";
    e.returnValue = tipMessage;
    return tipMessage;
  }
});

额外注意点 #

• 不同浏览器对beforeunload的提示文本限制不同，有些会强制显示浏览器默认文本，但触发提示的逻辑是有效的。
• 如果你的页面有撤销/重做功能，记得在撤销到原始状态时，也要把isDataChanged重置为false。
• 对于大型数据集，对比原始数据的方式可能有性能损耗，优先推荐事件监听的方案。

内容的提问来源于stack exchange，提问作者waubain