jQuery模态对话框和jqGrid

Question

如何在jqGrid中使用Jquery模态确认框？例如，当我提交我的条目时，它会弹出一个模态对话框，并显示名称和要发送到服务器的消息。

我的做法:

$("#dialog-confirm").dialog({
            autoOpen:false,
            resizable:false,
            height:180,
            modal:true,
            buttons:{
                 'Confirm': function(){
                            var ids =jQuery("#list10").jqGrid('getGridParam','selarrrow');
                                $.ajax({
                                  type: "POST",
                                  url: "url&names="+ids,
                                  data: JSON.stringify(ids), 
                                  dataType: "json"
                            });
                                },
                            'cancel': function(){
                                    $(this).dialog('close');
                                    }
        }
        });
        });

我的HTML：

<div id="dialog-confirm" title="Confirm">
        <p><span class="ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure want to cancel(or send this names)#names?</p>
    </div>

在那个对话框中，我需要发送这些名称...但是这种方法无法从我选择要发送到服务器的网格中获取名称。

- paul

Answer 1

以下代码可以实现您需要的功能。

$("#wics").click( function(){
    var grid = jQuery("#list10");
    var ids = grid.jqGrid('getGridParam','selarrrow');
    if (ids.length>0) {
        var names = [];
        for (var i=0, il=ids.length; i < il; i++) {
            var name = grid.jqGrid('getCell', ids[i], 'Name');
            names.push(name);
        }
        //alert ("Names: " + names.join(", ") + "; ids: " + ids.join(", "));
        $("#names").html(names.join(", "));
        $("#dialog-confirm").dialog({
            height:280,
            modal:true,
            buttons:{
                'Cancel': function(){
                    $(this).dialog('close');
                },
                'Confirm': function(){
                    //alert("Confirm");
                    $.ajax({
                        type: "POST",
                        url:  "/cpsb/unprocessedOrders.do",
                        data: { method: "releaseTowics",
                            orderNum: JSON.stringify(ids),
                            names: JSON.stringify(names)
                        },
                        dataType: "json",
                        success: function(msg){
                            alert(msg);
                        },
                        error: function(res, status, exeption) {
                            alert(res);
                        }
                    });
                }
            }
        });
    }
});

具体的解决方案取决于您在服务器端的要求。您可以在此处尝试此操作（无需ajax请求）http://www.ok-soft-gmbh.com/jqGrid/DataToMultiSelect2.htm。选择一些项目，然后单击“获取所选”按钮。

- Oleg

---

@Oleg：我们如何使用jqGrid的默认确认对话框？ - IT ppl

@ITppl：尝试以下代码：$.jgrid.info_dialog("某些可能是<i>HTML</i>文本的标题", "一些其他<span style='color:red'>HTML</span>文本", true);。您可以使用额外的参数来获取其他选项：请参见源代码。 - Oleg

.info_dialog没有像select a row弹窗一样在窗口中心显示，有什么方法可以解决吗？ - CJ Ramki

@CJRamki：您可以使用$.jgrid.info_dialog的选项（第四个参数）：top，left，width，height和其他来指定信息对话框的位置和大小。或者，您可以使用jQuery UI Position在创建对话框后直接更改对话框的位置。请参见此处。 - Oleg