jqgrid - 关闭表单对话框答案

【问题标题】：jqgrid - close form dialogjqgrid - 关闭表单对话框
【发布时间】：2012-01-31 10:21:26
【问题描述】：

我正在使用 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 中的错误。

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

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

根据文档，afterSubmit的语法是：

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

否则，即使数据成功发布，IE8 也会抛出错误。

你可以使用：

return [true,'',''];

然后 closeAfterAdd:true 和 closeAfterEdit:true 无需以编程方式关闭表单即可工作：

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

【讨论】：

【解决方案2】：

好吧，这很合乎逻辑，只需像这样触发对话框关闭按钮的点击事件。您将使用 fire bug 找到 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');
                                }
                            },
                            {},{},{}      
                    );

希望有人从中受益。

【讨论】：

此解决方案的问题是，如果您打开了任何其他对话框，它们也会被关闭。原因是您没有触发跨度的 ID，而是触发跨度的类，默认情况下它们将共享一个类。
你能解释一下这两行是做什么的吗？ var myObject = eval('(' + data.responseText + ')'); $('#studentset').setGridParam({data: myObject}).trigger("reloadGrid");对不起，糟糕的格式。
data.responseText 是 json 数据，必须评估为 javascript 对象。这将是重新加载后显示的新数据。
joseph，我可以唯一地识别表单，因此它的紧密链接因为网格具有唯一的 ID，所以它将类似于 $("#uniqueGridId uniqueFormId .ui-icon-closethick").trigger ('点击');

【解决方案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>

【讨论】：

仅仅为此目的添加像 Bootstrap 这样的大型框架没有多大意义。 OP 只使用 jQuery，其他一切都是猜测。试着在你的回答中反映出来。