使用jqGrid编辑数据时,弹出确认框后脚本未暂停的问题及解决方法
问题原因
- beforeSubmit是同步执行函数:它要求立即返回
[布尔值, 错误消息]的校验结果,你的代码未在函数末尾返回任何值,且弹窗、setTimeout都是异步操作,beforeSubmit执行完毕后直接结束,不会等待用户的弹窗操作。 - 弹窗按钮的return无效:按钮click回调里的return语句属于独立函数上下文,和beforeSubmit的返回值完全无关,无法影响表单提交逻辑。
- setTimeout循环无法阻塞主线程:JavaScript是单线程模型,你写的
waitForUserInput循环只会在事件队列排队执行,根本不会暂停beforeSubmit的执行流程,达不到等待用户输入的效果。
解决办法
不能依赖beforeSubmit实现异步确认逻辑,建议通过拦截编辑表单的提交事件处理,先判断foo值是否为空,弹出确认框后再决定是否提交:
代码示例
// 假设你的表格ID是gridTable $("#gridTable").jqGrid('editGridRow', 'new', { afterShowForm: function(form) { // 绑定表单提交事件 $(form).on('submit', function(e) { // 获取当前提交的表单数据 var postData = $("#gridTable").jqGrid('getGridParam', 'postData'); if (postData.foo === '') { // 阻止默认提交行为 e.preventDefault(); $("#dialog-confirm").dialog({ resizable: true, height: 180, width: 320, modal: true, buttons: { "OK": { text: "OK", id: "ok", click: function () { $(this).dialog("close"); // 解除提交拦截,手动触发表单提交 $(form).off('submit').submit(); } }, "Cancel": { text: "Abbrechen", id: "cancel", click: function () { $(this).dialog("close"); // 取消编辑,关闭表单 $("#gridTable").jqGrid('restoreRow', $("#gridTable").jqGrid('getGridParam', 'selrow')); } } } }); } }); } });
额外修正点
原代码中取消按钮里的var checkBox = $(e.target);存在e未定义的问题,上述示例已移除无效代码,改为直接关闭编辑表单的逻辑。
内容的提问来源于stack exchange,提问作者Greta
相关产品推荐
相关产品推荐

