jqgrid - 关闭表单对话框

Question

我正在使用jqgrid 4.3.1，并且正在使用本地数据进行表单编辑。问题是添加或编辑后表单不会关闭。以下是我的代码。

                  $('#studentset').jqGrid({
                      data: mydata,
                      datatype: "local",
                      colNames:['id','First Name', 'Last Name'], 
                      colModel:[ 
                                   {name:'id',index:'id', width:60}, 
                                   {name:'firstName',index:'fName', width:300, editable:true},
                                   {name:'lastName',index:'lastName', width:300, editable:true}
                      ],
                      pager: '#pager',
                      rowNum: 10,
                      rowList: [5, 10, 20],
                      sortname: 'id',
                      sortorder: 'asc',
                      viewrecords: true,
                      height: "80%",
                      caption: "Students to be Registered",
                      editurl: corpUrl
                  });
                  $('#studentset').jqGrid('navGrid', '#pager', { add: true, edit: true, del: false, search: false, refresh: false },
                            {
                                recreateForm: true,
                                closeAfterEdit: true,
                                modal:true,
                                afterSubmit: function(data){
                                    var myObject = eval('(' + data.responseText + ')');
                                    $('#studentset').setGridParam({data: myObject}).trigger("reloadGrid");
                                }
                            },
                            {
                                recreateForm: true,
                                closeAfterAdd: true,
                                modal:true,                 
                                afterSubmit: function(data){
                                    var myObject = eval('(' + data.responseText + ')');
                                    $('#studentset').setGridParam({data: myObject}).trigger("reloadGrid");
                                }
                            },
                            {},{},{}      
                    );  

在navGrid的编辑和添加选项中，我已经指定了相关选项。其中包括closeAfterAdd: true和closeAfterEdit: true。但是弹出窗口似乎无法关闭。我不确定这是否是jqgrid的一个bug。

有人可以提供一些指导吗？也许，如何手动关闭对话框？

- Faiyet

Answer 1

根据文档，afterSubmit 的语法如下：

afterSubmit : function(response, postdata) 
{ 
 … 
return [success,message,new_id] 
} 

否则IE8会抛出错误，即使数据已经成功提交。

您可以使用：

return [true,'',''];

如果设置了 closeAfterAdd:true 和 closeAfterEdit:true，则无需通过编程方式关闭表单即可工作：

$('#cData').trigger('click');

- Yaqoob Al-Shuaibi

Answer 2

好的，很简单，只需触发对话框关闭按钮的单击事件即可，如下所示。您可以使用Firebug查找span标记的ID。

                  $('#studentset').jqGrid('navGrid', '#pager', { add: true, edit: true, del: false, search: false, refresh: false },
                            {
                                modal:true,
                                jqModal: true,
                                afterSubmit: function(data){
                                    var myObject = eval('(' + data.responseText + ')');
                                    $('#studentset').setGridParam({data: myObject}).trigger("reloadGrid");
                                    $(".ui-icon-closethick").trigger('click');
                                }
                            },
                            {
                                modal:true,
                                jqModal: true,
                                afterSubmit: function(data){
                                    var myObject = eval('(' + data.responseText + ')');
                                    $('#studentset').setGridParam({data: myObject}).trigger("reloadGrid");
                                    $(".ui-icon-closethick").trigger('click');
                                }
                            },
                            {},{},{}      
                    );  

希望有人从中受益。

- Faiyet

---

这个解决方案的问题在于，如果您有任何其他对话框打开，它们也将被关闭。原因是您没有触发 span 的 ID，而是触发了 span 的类，它们默认会共享一个类。 - Joseph

你能解释一下这两行代码的作用吗？ var myObject = eval('(' + data.responseText + ')'); $('#studentset').setGridParam({data: myObject}).trigger("reloadGrid"); 对于格式混乱，我很抱歉。 - Doo Dah

data.responseText 是 JSON 数据，必须被解析为 JavaScript 对象。这将是重新加载后显示的新数据。 - Faiyet

Joseph，我可以唯一地识别表格及其紧密联系，因为网格具有唯一的ID，所以它将类似于$("#uniqueGridId uniqueFormId .ui-icon-closethick").trigger('click'); - Faiyet

Answer 3

您可以借助Bootstrap实现此操作，将jqgrid放置在一个div中，然后使用链接关闭该div即可。以下是代码：

 <div>
<div class="alert alert-default">
<a href="#" id="okayMessage" class="close" data-dismiss="alert" 
 aria-label="close">&times;</a>
 <br>
   <table id="accountIdSearch" style="font-size: 11px"></table>
        <div id="pagingDivId" style="height: 50px;">
        </div>
</div>
</div>

- Chetan Luhiya

---

仅为此目的添加像Bootstrap这样的大型框架并没有太多意义。 OP仅使用jQuery，其他一切都是猜测。尝试在您的答案中反映出这一点。 - Fabian Schultz