jqGrid Free 4.15.2行内编辑：自动提交修改数据到服务器

嘿，针对你用jqGrid Free 4.15.2实现行内编辑自动提交的需求，我给你整理了一套可行的方案，亲测有效：

1. 先确保基础配置到位 #

首先要保证你的grid已经配置了提交数据的服务器地址，也就是editurl，同时调整行内编辑的基础参数：

$("#yourGridId").jqGrid({
    // 你的其他grid配置（列、数据源等）
    editurl: "/your-server-submit-url", // 替换成实际的服务器接口
    inlineEditing: {
        keys: false, // 关闭默认的Enter键处理，我们自己实现
        // 可选：编辑开始时的回调，比如高亮行等
        oneditfunc: function(rowid) {
            console.log("开始编辑行：" + rowid);
        }
    }
});

2. 给可编辑列绑定事件 #

在DrugGroupName列的colModel配置里，通过editoptions.dataEvents绑定Enter键按下和单元格失去焦点两个事件，触发自动保存：

colModel: [
    // 你的其他非编辑列（已设置editable: false）
    {
        name: "DrugGroupName",
        editable: true,
        editoptions: {
            dataEvents: [
                // 处理Enter键提交
                {
                    type: "keydown",
                    fn: function(e) {
                        var $grid = $("#yourGridId");
                        var rowid = $(e.target).closest("tr.jqgrow").attr("id");
                        
                        if (e.keyCode === 13) {
                            e.preventDefault(); // 阻止默认的换行行为
                            // 调用saveCell提交修改
                            $grid.jqGrid("saveCell", rowid, "DrugGroupName");
                        }
                    }
                },
                // 处理点击其他区域（失去焦点）提交
                {
                    type: "blur",
                    fn: function(e) {
                        var $grid = $("#yourGridId");
                        var rowid = $(e.target).closest("tr.jqgrow").attr("id");
                        var $input = $(e.target);
                        
                        // 先判断内容是否有修改，避免无变更时重复提交
                        var oldValue = $grid.jqGrid("getCell", rowid, "DrugGroupName");
                        var newValue = $input.val();
                        
                        if (oldValue !== newValue) {
                            $grid.jqGrid("saveCell", rowid, "DrugGroupName");
                        }
                    }
                }
            ]
        }
    }
]

3. 可选：自定义提交数据格式 #

如果你的服务器需要JSON格式的请求体，而不是默认的表单键值对，可以通过serializeRowData回调处理：

$("#yourGridId").jqGrid({
    // 其他配置...
    serializeRowData: function(postData) {
        // 把默认的postData转成JSON字符串
        return JSON.stringify(postData);
    }
});

关键说明 #

• saveCell是jqGrid行内编辑的核心方法，会自动把当前单元格的修改数据发送到editurl，默认用POST请求。
• 失去焦点时的修改判断很重要，能避免用户只是点击单元格但没修改内容时的无效提交。
• 确保你的rowid是唯一且稳定的，避免分页或刷新后出现提交数据错误的情况。

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