为什么JQuery模态对话框和JQGrid模态对话框看起来有所不同？

时间：2011-07-14 13:13:02

标签： jquery jqgrid modal-dialog

我已经使用Jquery模式对话框为Delete创建了JQGrid。 Jqgrid带有内联编辑和一个字段是必需的，如果我把它留空并且按下提交它将弹出消息请输入名字但问题是Inbuilt Popup消息和我的jquery模式对话框看起来太不同了。

内置JQGrid模式对话框：
enter image description here

JQuery模态对话
enter image description here

CODE： 

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模态对话框？

谢谢， Imdadhusen

3 个答案:

答案 0 :(得分：2)

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;
});

答案 1 :(得分：1)

我也发现内置的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正在监听它，我没有设置必要的参数。我创建一个克隆并给它一个'clonePopup'的ID。然后我隐藏原件。 

$('#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的限制。

答案 2 :(得分：1)

更新到我以前的帖子......

我最后添加了一个模态接口，无需检查我的#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');
相关问题
最新问题