为什么 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 });
    }

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

谢谢， 伊姆达胡森

Answer 1

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

作为使用函数的示例，我建议使用 the following example 创建与 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;
});

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 的限制。

Answer 3

更新我之前的帖子...

我最后添加了一个模态界面，无需检查我的#clonePopoup。我也在最后清理了模态。我使用在 Chrome 中的 #alertmod 之后找到的 a 创建模式。但是，在 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');