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

Question

我使用免费的 jqgrid 4.12 并在模态对话框中使用 jqgrid。当我 select 一行并单击编辑按钮时，出现编辑对话框但我无法填写该字段（它似乎被冻结）。

你能帮帮我吗？

function OuvrirEcran()
{
    $("#Ecran").dialog("open");
};

$(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, editable:true },
                    { 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: true}
            );

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

$(document).ready(function () {
   OuvrirEcran();
});

Answer 1

问题的原因是 the lines 代码 jQuery UI 内部方法 _allowInteraction of jQuery UI 对话框：

_allowInteraction: function( event ) {
    if ( $( event.target ).closest( ".ui-dialog" ).length ) {
        return true;
    }
    ...
}

它阻止任何 jQuery UI 对话框之外的交互。

我将在免费的 jqGrid 代码中包含以下 hack：我将添加行

if ($(h.w[0].ownerDocument).data("ui-dialog-overlays")) {
    h.w.addClass("ui-dialog"); // hack to allow input inside of jQuery UI modal
}

在the line

之后

h.w.css("z-index", z);

个 $.jqm.open()。我的测试表明它解决了问题。

我现在对免费的 jqGrid 代码进行了一些其他更改。因此，稍后我将 post 修复我上面描述的问题。您已经可以使用 jquery.jqgrid.4.12.1-jquerui-modal-fix.src.js. You can test it on the demo http://jsfiddle.net/OlegKi/9ezy09ep/142/ 给它发短信了。请在 JSFiddle 中使用 http 而不是 https 协议，因为我在不支持 https 的服务器上进行了修复。

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.12 覆盖问题

free jqgrid 4.12 overlay issue when jqgrid inside modal dialog

dialog

modal-dialog

jqgrid

free-jqgrid