JQGrid编辑窗口点击复选框时如何同步更新编辑字段值

问题本质 #

jqGrid的setCell方法只会更新两个地方：一是表格内存里存储的行数据，二是表格视图里对应单元格的DOM内容。已经弹出的编辑表单是独立渲染的DOM块，打开时就已经把当时的行字段值读取出来填充到了各个输入控件里，和表格侧的数据没有做双向绑定，所以你改表格的值不会自动同步到已经打开的表单上。而提交时jqGrid是直接读取表单输入控件的值上传，自然就会把旧值提交回去，覆盖你之前通过setCell修改的内容。

方案1：直接同步表单字段值（推荐，无页面闪烁） #

不用关闭编辑窗口，在你执行setCell修改表格值的逻辑后面，加一行代码同步修改编辑表单里对应输入控件的值即可。
jqGrid编辑表单里的输入控件ID默认和列的name属性一致，部分老版本会加i_前缀，你可以按实际版本选对应的代码：

// 原有修改表格值的逻辑保留
$("#Table" + id).jqGrid("setCell", selectedRowId, "DataPartnerName", "Hello");

// 同步更新编辑表单内的对应字段
// 常规版本（免费jqGrid、4.x+版本Guriddo jqGrid）用这行
$("#DataPartnerName").val("Hello");
// 如果上面的代码选不到元素，试下带前缀的版本
// $("#i_DataPartnerName").val("Hello");

// 如果是复选框、下拉框、日期选择器这类自定义控件，改完值后触发change事件，保证控件和jqGrid能识别到值变更
// $("#DataPartnerName").trigger("change");

把这段逻辑绑定到编辑窗口内复选框的change事件上就行，点击复选框改值的瞬间，表单里的字段会立刻更新，提交时直接读取的就是新值，不会出现回退。

方案2：关闭后重新打开编辑窗口（备选，适合复杂联动场景） #

如果你的编辑表单有大量联动逻辑、自定义渲染的字段，逐个同步输入框值维护成本太高，可以在修改完表格值之后，自动关闭当前编辑窗口（不提交），再立刻重新打开编辑窗口，新打开的窗口会读取最新的行数据渲染，自然就能显示修改后的值。
代码示例：

// 原有修改表格值的逻辑保留
$("#Table" + id).jqGrid("setCell", selectedRowId, "DataPartnerName", "Hello");

// 关闭当前编辑窗口，第二个参数传false表示不提交当前表单数据
$("#Table" + id).jqGrid("restoreRow", selectedRowId);

// 重新打开编辑窗口，下面的配置参数和你之前调用编辑接口的参数保持完全一致即可
$("#Table" + id).jqGrid("editRow", selectedRowId, true, {
    // 这里填你原来editRow用的所有配置，比如提交地址、校验规则、成功回调等
});

这个方案的缺点是：如果用户已经在编辑表单里输入了其他未保存的内容，重开窗口会清空这些输入，只适合触发复选框修改的时机在用户刚打开编辑窗口、还没填写其他内容的场景。

注意：不要只修改表单DOM的值删掉setCell逻辑，setCell是用来更新jqGrid底层存储的行数据的，是数据正确性的基础，表单/窗口操作只是处理展示层的同步。

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