jqgrid出现在模态对话框中时出现免费的jqgrid 4.8覆盖问题 [英] free jqgrid 4.8 overlay issue when jqgrid inside modal dialog

问题描述

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

I use free jqgrid 4.8. I use the jqgrid inside a modal dialog. When I try to use the delete button of the pager, all the dialogs are disabled.

http://jsfiddle.net/9ezy09ep

$(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 () {}
    });
});

有什么想法吗?谢谢

推荐答案

我认为问题的根源是通过在jQuery UI对话框中使用jqModal来实现的. jqGrid是jQuery插件.因此，它不使用jQuery UI中的 only CSS .它不使用jQuery UI对话框.

I think that the origin of the problem by using jqModal inside of jQuery UI dialog. jqGrid is jQuery plugin. So it don't use only CSS from jQuery UI. It don't use jQuery UI Dialogs.

我建议您加入这一行

$.fn.jqm = false;

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

to switch off jqModal module and to use jQuery UI functionality. See http://jsfiddle.net/9ezy09ep/7/. I will examine the problem more detailed later to improve the code of free jqGrid for the described test case.

更新:我在免费的jqGrid中进行了一些其他修改，从而提供了替代解决方案.现在可以使用类似的代码

UPDATED: I made some additional modifications in free jqGrid, which allows alternative solution. One can now use the code like

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

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

to change the behavior of jqModal module. The next demo shows the results http://jsfiddle.net/OlegKi/9ezy09ep/9/

这篇关于jqgrid出现在模态对话框中时出现免费的jqgrid 4.8覆盖问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！