如何捕获Kendo UI表格行内编辑的行保存事件并实现单元格修改自动保存

我来帮你搞定这个自动保存的需求！Kendo UI Grid其实自带了对应的事件可以实现这个功能，核心是利用单元格编辑完成时的触发事件来触发保存操作，下面给你两种可行的方案：

方案一：利用Grid内置的保存机制（推荐） #

这种方式直接借助Kendo Grid的数据源配置来完成保存，不需要手动写太多AJAX代码，步骤如下：

1. 配置Grid的数据源与编辑模式
   首先确保你的Grid开启了单元格内编辑模式（editable: "incell"），同时在数据源的transport里配置好更新接口，让Grid知道要把修改的数据提交到哪里：

   <div id="grid"></div>
   <script>
     $("#grid").kendoGrid({
       dataSource: {
         transport: {
           read: {
             // 你的数据读取接口配置，示例：
             url: "/api/get-data",
             dataType: "json"
           },
           update: {
             // 你的数据更新接口，后端需接收这里提交的修改数据
             url: "/api/update-data",
             type: "POST",
             dataType: "json"
           }
         },
         schema: {
           model: {
             id: "id", // 必须设置主键字段，让Grid识别唯一行
             fields: {
               // 配置你的表格字段，示例：
               name: { type: "string" },
               age: { type: "number" },
               email: { type: "string" }
             }
           }
         }
       },
       editable: "incell", // 开启单元格内编辑模式
       columns: [
         { field: "name", title: "姓名" },
         { field: "age", title: "年龄" },
         { field: "email", title: "邮箱" }
       ],
       // 关键：监听单元格编辑关闭事件
       cellClose: function(e) {
         // 检查是否有修改的值
         if (e.values) {
           // 触发Grid的保存操作，自动把修改提交到后端
           this.saveChanges();
         }
       }
     });
   </script>
   

2. 后端接口处理
   你的后端/api/update-data接口需要接收Grid提交的JSON数据（包含主键和修改后的字段值），然后执行数据库更新操作即可。

方案二：手动发起AJAX保存（灵活自定义） #

如果你需要更灵活的控制保存逻辑，比如添加额外参数、自定义错误处理，可以手动在单元格编辑完成时发起AJAX请求：

$("#grid").kendoGrid({
  // 其他配置和方案一一致
  cellClose: function(e) {
    if (e.values) {
      // 合并原始数据和修改后的数据
      var updatedRow = $.extend({}, e.model.toJSON(), e.values);
      
      // 手动发起AJAX请求保存到数据库
      $.ajax({
        url: "/api/custom-save",
        type: "POST",
        data: JSON.stringify(updatedRow),
        contentType: "application/json",
        success: function(response) {
          // 保存成功后的处理，比如刷新该行数据或者提示用户
          e.model.set(e.values);
          alert("保存成功！");
        },
        error: function(xhr) {
          // 保存失败时恢复原始数据并提示
          e.model.set(e.model.toJSON());
          alert("保存失败：" + xhr.responseText);
        }
      });
    }
  }
});

注意事项 #

• 必须设置schema.model.id字段，否则Grid无法正确识别要修改的行
• 如果担心重复提交，可以在保存时添加加载状态，比如禁用当前单元格或者显示loading图标
• 后端接口需要处理跨域问题（如果前端和后端不在同一域名下）

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