当模态对话框中的 jqgrid 时，免费的 jqgrid 4.8 覆盖问题

Question

我使用免费的 jqgrid 4.8。我在模态对话框中使用 jqgrid。当我尝试使用寻呼机的删除按钮时，所有对话框都被禁用了。

$(function ()
{
    $("#Ecran").dialog(
    {
        dialogClass: 'Ecran',
        autoOpen: false,
        width: 500,
        height:400,
        modal: true,
        open: function (event, ui) {
            $("#jqGrid").jqGrid({
                url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'OrderID', name: 'OrderID', key: true, width: 75 },
                    { label: 'Customer ID', name: 'CustomerID', width: 150 },
                    { label: 'Order Date', name: 'OrderDate', width: 150 },
                    { label: 'Freight', name: 'Freight', width: 150 },
                    { label:'Ship Name', name: 'ShipName', width: 150 }
                ],
                viewrecords: true,
                width: 480,
                height: 250,
                rowNum: 20,
                pager: "#jqGridPager"
            });

            jQuery("#jqGrid").jqGrid('navGrid', '#jqGridPager', {
                del: true, add: false, edit: false,
                beforeRefresh: function () {},
                afterRefresh: function () {}},                  
                {}, // default settings for edit
                {}, // default settings for add
                {}, // delete
                {}, // search options
                {}
            );

        },
        close:function () {}
    });
});

有什么想法吗？谢谢

Answer 1

我认为问题的根源是在 jQuery UI 对话框中使用 jqModal。 jqGrid 是 jQuery 插件。所以它不使用 仅 CSS 来自 jQuery UI。它不使用 jQuery UI 对话框。

我建议你加入这行

$.fn.jqm = false;

关闭 jqModal 模块并使用 jQuery UI 功能。参见 http://jsfiddle.net/9ezy09ep/7/。稍后我将更详细地检查问题，以改进所描述的测试用例的免费 jqGrid 代码。

更新：我在免费的 jqGrid 中做了一些额外的修改，它允许替代解决方案。现在可以使用

这样的代码

$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, {toTop: true});

更改 jqModal 模块的行为。下一个演示显示结果 http://jsfiddle.net/OlegKi/9ezy09ep/9/

Answer 2

jqGrid 在创建模式对话框时应该使用 ui-dialog class。

您将不得不修改 jquery.jqGrid.min.js 文件。

根据版本 5.0.0，

只需将 ui-dialog class 添加到下一行，

modal: { modal: "ui-widget ui-widget-content ui-corner-all ",

例如

modal: { modal: "ui-widget ui-widget-content ui-corner-all ui-dialog",

根据免费的 jqGrid 版本,

将ui-dialog class添加到下一行，

 dialog: {
                ...
                window: "ui-widget ui-widget-content ui-corner-all ui-front",
                ...

例如

 dialog: {
                ...
                window: "ui-widget ui-widget-content ui-corner-all ui-front ui-dialog",
                ...

当模态对话框中的 jqgrid 时，免费的 jqgrid 4.8 覆盖问题

free jqgrid 4.8 overlay issue when jqgrid inside modal dialog

overlay

z-index

jqgrid

free-jqgrid