为什么JQuery模态对话框和JQGrid模态对话框外观不同？

Question

我使用JQuery模态框为删除创建了JQGrid。 Jqgrid具有内联编辑功能，其中一个字段是必填项。如果我将其留空并按提交按钮，则会弹出消息“请输入名字”，但问题是默认的弹出消息和我的JQuery模态对话框看起来非常不同。 内置JQGrid模态对话框： JQuery模态对话框： 代码：

function createGrid() {
        jQuery("#list").jqGrid({
            url: '@Url.Action("JQGridGetGridData", "TabMaster")',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['col ID', 'First Name', 'Last Name', ''],
            colModel: [{ name: 'colID', index: 'colID', width: 100, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
                      { name: 'FirstName', index: 'FirstName', width: 150, align: 'left', editable: true, editrules: { required: true} },
                      { name: 'LastName', index: 'LastName', width: 150, align: 'left', editable: true, editrules: { required: true} },
                      { name: 'act', index: 'act', width: 60, sortable: false}],
            pager: jQuery('#pager'),
            hidegrid: false,
            rowNum: 100,
            rowList: [10, 50, 100, 150],
            sortname: 'colID',
            sortorder: "asc",
            viewrecords: true,
            multiselect: false,
            width: 500,
            height: "250px",
            imgpath: '@Url.Content("~/Scripts/themes/steel/images")',
            caption: 'Tab Master Information',
            editurl: '@Url.Action("JQGridEdit", "TabMaster")',
            gridComplete: function () {
                var ids = jQuery("#list").getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    var id = ids[i];
                    be = "<a href='#'><div title='Edit' id='action_edit_" + id + "' class='actionEdit' onclick='inlineEdit(" + id + ");'></div></a>";
                    de = "<a href='#'><div title='Delete' id='action_delete_" + id + "' class='actionDelete' onclick='inlineDelete(" + id + ");'></div></a>";
                    se = "<a href='#'><div title='Save' style='display:none' id='action_save_" + id + "' class='actionSave' onclick='inlineSave(" + id + ");'></div></a>";
                    ce = "<a href='#'><div title='Cancel' style='display:none' id='action_cancel_" + id + "' class='actionCancel' onclick='inlineCancel(" + id + ");'></div></a>";
                    jQuery("#list").setRowData(ids[i], { act: be + de + se + ce })
                }
            }
        }).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: false });
    }

如何将Jquery Modal Dialog应用于JQGrid内置的对话框皮肤？

谢谢， Imdadhusen

- imdadhusen

---

关于您之前的问题，您有什么想问的吗？您看过我的回答了吗？ - Oleg

我觉得你的问题很有趣，所以我点了个赞并且提供了我的答案。 - Oleg

我还提交了我的jqgrid footer和您的snap，链接地址为https://dev59.com/NlnUa4cB1Zd3GeqPXRp0。 - imdadhusen

我不明白你的意思。#load_list 的原始位置不在分页器中，但是你可以使用 jQuery.prependTo 将页面上的任何元素移动到另一个位置。例如，我的演示 是否满足你的需求？ - Oleg

我不明白你的意思。你的网格中具体有哪些问题？ - Oleg

Answer 1

jqGrid是jQuery插件，而不是jQuery UI小部件。因此它不使用jQuery UI对话框。相反，它使用$.jgrid.createModal、$.jgrid.viewModal和$.jgrid.hideModal方法。在某些情况下，会使用简化版本$.jgrid.info_dialog。许多人（包括我）希望在下一个版本中，jqGrid会在内部使用更多的jQuery UI控件，并且可能会成为一个jQuery UI小部件，但现在如果您想创建一个jqGrid样式的对话框，您应该使用我上面列出的方法。

作为函数使用的示例，我建议使用以下示例，该示例创建与jqGrid使用delGridRow方法相同的对话框。我在演示中包含了“删除”导航按钮，以显示如果您首先使用“删除所选行”按钮创建对话框，然后再使用“删除”导航按钮，则jqGrid不会创建新的对话框。相反，将使用我们的自定义对话框。

相应的代码如下：

var grid = $("#list"),
    gID = grid[0].id, //grid[0].p.id,
    IDs = {
        themodal:'delmod'+gID,
        modalhead:'delhd'+gID,
        modalcontent:'delcnt'+gID,
        scrollelm:'DelTbl_'+gID
    },
    hideDialog = function() {
        $.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
    },
    rowId,
    createDeleteDialog = function() {
        var dlgContent =
            "<div id='"+IDs.scrollelm+"' class='formdata' style='width: 100%; overflow: auto; position: relative; height: auto;'>"+
                "<table class='DelTable'>"+
                    "<tbody>"+
                        "<tr id='DelError' style='display: none'>"+
                            "<td class='ui-state-error'></td>"+
                        "</tr>"+
                        "<tr id='DelData' style='display: none'>"+
                            "<td>"+rowId+"</td>"+ // it has not so much sense
                        "</tr>"+
                        "<tr>"+
                            "<td class='delmsg' style='white-space: pre;'>"+$.jgrid.del.msg+"</td>"+
                        "</tr>"+
                        "<tr>"+
                            "<td>&#160;</td>"+
                        "</tr>"+
                    "</tbody>"+
                "</table>"+
            "</div>"+
            "<table cellspacing='0' cellpadding='0' border='0' class='EditTable' id='"+IDs.scrollelm+"_2'>"+
                "<tbody>"+
                    "<tr>"+
                        "<td>"+
                            "<hr class='ui-widget-content' style='margin: 1px' />"+
                        "</td>"+
                    "</tr>"+
                    "<tr>"+
                        "<td class='DelButton EditButton'>"+
                            "<a href='javascript:void(0)' id='dData' class='fm-button ui-state-default ui-corner-all'>Delete</a>"+
                            "&#160;<a href='javascript:void(0)' id='eData' class='fm-button ui-state-default ui-corner-all'>Cancel</a>"+
                        "</td>"+
                    "</tr>"+
                "</tbody>"+
            "</table>";

        if ($('#'+IDs.themodal).length===0) {
            // dialog not yet exist. we need create it.
            $.jgrid.createModal(
                IDs,
                dlgContent,
                {
                    gbox: "#gbox_"+gID,
                    caption: $.jgrid.del.caption,
                    jqModal: true,
                    left: 12,
                    top: 44,
                    overlay: 10,
                    width: 240,
                    height: 'auto',
                    zIndex: 950,
                    drag: true,
                    resize: true,
                    closeOnEscape: true,
                    onClose: null
                },
                "#gview_"+gID,
                $("#gview_"+gID)[0]);
            $("#dData","#"+IDs.scrollelm+"_2").click(function(){
                // "Delete" button is clicked
                var rowId = grid.jqGrid('getGridParam', 'selrow');
                grid.jqGrid('delRowData',rowId);
                //$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
                hideDialog();
            });
            $("#eData", "#"+IDs.scrollelm+"_2").click(function(){
                // "Cancel" button is clicked
                //$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
                hideDialog();
                //return false;
            });
        }

        $.jgrid.viewModal("#"+IDs.themodal,{gbox:"#gbox_"+gID,jqm:true, overlay: 10, modal:false});
    };

grid.jqGrid({/*jqGrid options*/});

$("#delgridrow").click(function() {
    rowId = grid.jqGrid('getGridParam', 'selrow');
    if (rowId === null) {
        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+grid[0].p.id,jqm:true});
        $("#jqg_alrt").focus();
    } else {
        createDeleteDialog();
    }

    return false;
});

- Oleg

---

@imdadhusen：这是现实。我刚刚减少了jqGrid使用的代码。如果需要，您可以减少“dlgContent”的HTML代码。 - Oleg

顺便说一下，如果您使用$.jgrid.del.caption和$.jgrid.del.msg不直接包含在createDeleteDialog函数的参数中，您将拥有一个“MessageBox”函数，可以使用它。您可能只需要将调用$.jgrid.hideModal替换为调用$.jgrid.closeModal。 - Oleg

Answer 2

我也发现内置的jqGrid模态对话框难以实现。尝试调用createModal()及其所有参数太过复杂。我看到的解决方法也非常复杂。我决定通过重新编写HTML并显示它来绕过这个问题。

jqGrid已经在加载时为他们的模态弹出窗口编写了HTML。我劫持了它，编写了自己的'X'关闭链接监听器，然后，惊奇地发现，我拥有了一个完全皮肤化的对话框。我的不是模态的，但你可以通过修改解决方案的CSS轻松创建自己的模态对话框。一旦你理解如何操作HTML，你就可以添加任何元素/属性/类。关闭时只需删除你添加的内容即可。

var popup = function (msg, title) {
  if ($('#clonePopup').length == 0) {
    var popupClose = $('.ui-icon-closethick');
    popupClose.clone().attr('id', 'clonePopup').insertAfter(popupClose);
    popupClose.hide();
    $('#alertcnt>div').html(msg);
    $('#alerthd>span').html(title);
    $('#clonePopup').click(function (e) {
        $('#alertmod').hide();
        $('#clonePopup').remove();
        $('#alertcnt>div').html(' אנא, בחר שורה');
        $('#alerthd>span').html('אזהרה');
        popupClose.removeAttr('style');
    });
    $('#alertmod').show();
  }  
}};

popup('Row saved successfully','Success');

首先，我通过检查我的#clonePopup id是否已经存在来测试消息框是否已经显示。然后，我抓住X关闭链接的句柄，因为我要克隆它并隐藏原始链接。如果我使用原始链接，它将无法工作，因为jqGrid正在监听它，并且我还没有设置必要的参数。我创建一个克隆体并将其ID设置为“clonePopup”。然后，我隐藏原始链接。

$('#alertcnt>div') gets me the container for the title.
$('#alerthd>span') gets me the container for the message.
$('#alertmod') is then shown.

$('#clonePopup').click()  then resets the HTML to its original state to not interfere with jqGrid's normal operation. 

这可能不是一个完美的解决方案，但对某些人来说可能是。对我有用。让我省去了尝试弄清楚如何使用createModal()的麻烦！

这篇文章的主要观点不在于这个特定的解决方案是否适合您（希望它是），而是您可以通过重写他们的HTML来覆盖jqGrid的限制。

- Yitz Meirovich

Answer 3

更新之前的帖子...

最后我添加了一个模态接口，这样就不需要检查我的#clonePopoup了。我也在结尾处清理了模态。我使用Chrome中#alertmod之后发现了一个逗号来创建模态。然而，在IE中，由于某种原因，这个逗号并不存在。如果它还没有存在，我会创建它。

希望这是一个更完整的解决方案。

var popup = function (msg, title) {
    var modalcss = { position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', display: 'block', opacity: 0.4, filter: 'alpha(opacity=40)', 'background-color': '#000', 'text-align': 'center', 'z-index': 101 };
    var popupClose = $('.ui-icon-closethick');
    popupClose.clone().attr('id', 'clonePopup').insertAfter(popupClose);
    popupClose.hide();
  $('#alertcnt>div').html(msg);
    $('#alerthd>span').html(title);
    if ($('#tc_container').length) {
        $('#tc_container').css(modalcss);
    } else {
        $('<div>', { 'id': 'tc_container' }).css(modalcss).insertAfter($('#alertmod'));
    }

$('#clonePopup').click(function (e) {
    $('#alertmod').hide();
    $('#alertcnt>div').html(' אנא, בחר שורה');
    $('#alerthd>span').html('אזהרה');
    popupClose.removeAttr('style');
    $('#alertmod').css('display', '');
    $('#tc_container').attr('style', 'display:none;'); 
    $('#clonePopup').remove();
   });
   $('#alertmod').show();
};

popup('Row saved successfully','Success');

- Yitz Meirovich