在Angular 2+中如何检测Kendo Grid是否存在数据变更

Kendo Grid绑定的数据源内置了变更检测能力，无需自行实现全量数据对比，实现逻辑如下：

核心实现代码 #

// 保存按钮点击事件
$('#saveBtn').click(function() {
  // 获取Grid实例
  const grid = $('#yourGridElementId').data('kendoGrid');
  const gridDataSource = grid.dataSource;

  // 调用内置方法检测是否存在未提交的变更
  if (!gridDataSource.hasChanges()) {
    alert('未检测到变更');
    return;
  }

  // 原有保存逻辑，执行提交
  gridDataSource.sync().done(function() {
    // 保存成功后的自定义逻辑，例如提示保存成功、刷新表格等
  }).fail(function() {
    // 保存失败的自定义逻辑
  });
});

特殊场景适配 #

如果你的Grid使用了自定义插入的输入控件（而非Kendo内置的编辑模板），需要在控件值变更时手动标记行数据为已修改，否则hasChanges()会检测不到变更，适配代码如下：

// 自定义输入控件的change事件绑定
$('.grid-custom-input').on('change', function() {
  const grid = $('#yourGridElementId').data('kendoGrid');
  // 获取当前行对应的数据项
  const dataItem = grid.dataItem($(this).closest('tr'));
  // 更新数据项字段值，set方法会自动将行标记为dirty（已修改）
  dataItem.set('绑定的字段名', $(this).val());
  // 若set方法未生效，可手动加一行：dataItem.dirty = true;
});

进阶优化 #

如果需要实现「用户修改后又改回原值则判定为无变更」的逻辑，可以自行对比数据源的原始数据和当前数据：

• 原始数据可以通过gridDataSource._pristineData获取
• 当前数据可以通过gridDataSource.data()获取
• 逐行逐字段对比两个数组的内容，完全一致则判定为无变更

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