Kendo UI Grid内联编辑时如何批量提交所有变更行至服务器？

当然可以实现一次性提交所有变更数据或者网格全部行的需求，默认的内联编辑确实会每行触发一次Update，但我们可以通过自定义保存逻辑来实现批量提交。下面是具体的实现步骤：

1. 修改Grid配置 #

首先调整Grid的DataSource配置，移除默认的Update绑定，同时给保存按钮添加ID方便绑定自定义事件。修改后的Grid代码如下：

@(Html.Kendo().Grid<StrategyParameterModel>()
    .Name("strategyParameters")
    .Columns(columns => {
        columns.Bound(c => c.Id).Width(170);
        columns.ForeignKey(p => p.ParamType, (System.Collections.IEnumerable)ViewData["paramTypes"], "Key", "Value").Title("Param Type").Width(200);
        columns.Bound(c => c.Key);
        columns.Bound(c => c.Value);
        columns.Bound(c => c.MinimumValue);
        columns.Bound(c => c.MaximumValue);
        columns.Bound(c => c.IncrementalValue);
    })
    .ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save().HtmlAttributes(new { id = "batchSaveBtn" }); // 给保存按钮添加ID
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable(pager => pager.Refresh(true) )
    .Navigatable()
    .Resizable(resize => resize.Columns(true))
    .Sortable(sortable => {
        sortable.SortMode(GridSortMode.SingleColumn);
        sortable.AllowUnsort(false);
    })
    .Filterable(filterable => filterable.Mode(GridFilterMode.Menu))
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(100)
        .Model(model => {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
        })
        .Read(read => read.Action("StrategyParameter_Read", "StrategySets").Data("getStrategySetId"))
        // 移除默认的Update配置，改用自定义提交逻辑
        .Sort(sort => sort.Add("Id").Descending())
    )
    .Deferred()
)

2. 编写自定义保存的JavaScript逻辑 #

绑定保存按钮的点击事件，收集变更数据（或全部数据）后一次性提交到服务器：

$(document).ready(function() {
    $("#batchSaveBtn").on("click", function(e) {
        e.preventDefault(); // 阻止默认单行提交行为
        var grid = $("#strategyParameters").data("kendoGrid");
        var dataSource = grid.dataSource;
        
        // 方式1：获取所有已变更的行（新增、修改、删除）
        var changes = dataSource.getChanges();
        // 可单独获取不同类型的变更：
        // var addedRows = dataSource.added();
        // var updatedRows = dataSource.dirty();
        // var deletedRows = dataSource.deleted();
        
        // 方式2：获取网格中的全部行数据
        // var allRows = dataSource.data().toJSON();
        
        // 先判断是否有需要保存的变更
        if (changes.added.length === 0 && changes.dirty.length === 0 && changes.deleted.length === 0) {
            alert("没有需要保存的变更数据");
            return;
        }
        
        // 准备提交的数据，包含你需要的strategySetId
        var postData = {
            strategySetId: getStrategySetId(), // 调用原有获取ID的方法
            changes: changes // 如果用全部行则传allRows
        };
        
        // 发送批量提交请求
        $.ajax({
            url: "@Url.Action("StrategyParameter_BatchUpdate", "StrategySets")",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(postData),
            success: function(result) {
                // 提交成功后清除变更标记并刷新网格
                dataSource.sync();
                grid.refresh();
                alert("批量保存成功");
            },
            error: function(xhr, status, error) {
                alert("保存失败：" + error);
            }
        });
    });
});

3. 修改后端Controller的Action #

在StrategySets控制器中添加批量处理的Action，接收变更数据列表：

// 定义接收变更数据的模型
public class BatchChangesModel
{
    public List<StrategyParameterModel> Added { get; set; }
    public List<StrategyParameterModel> Dirty { get; set; }
    public List<StrategyParameterModel> Deleted { get; set; }
}

// 批量处理Action
public ActionResult StrategyParameter_BatchUpdate(int? strategySetId, [FromBody]BatchChangesModel changes)
{
    // 在这里处理不同类型的变更：新增/修改/删除
    // 示例：遍历修改的行进行保存
    foreach(var updatedParam in changes.Dirty)
    {
        // 你的业务逻辑：更新数据库等
    }
    
    // 返回处理结果
    return Json(new { success = true });
}

如果需要提交全部行数据，Action可以改为接收列表：

public ActionResult StrategyParameter_BatchUpdate(int? strategySetId, [FromBody]List<StrategyParameterModel> allParameters)
{
    // 处理全部行的保存逻辑
    return Json(new { success = true });
}

关键说明 #

• dataSource.getChanges()：会返回包含三类变更的对象，精准获取需要提交的数据，避免不必要的传输。
• dataSource.sync()：提交成功后调用该方法，清除数据源的变更标记，让网格回到“干净”状态。
• 必须阻止保存按钮的默认行为，否则会触发原有单行提交逻辑，导致冲突。

内容的提问来源于stack exchange，提问作者Jean-François Beaulieu