javascript - jqGrid - 表单编辑覆盖与主题不同

Question

对于那些在表单编辑中使用 jqGrid 的人来说，这里非常简单，使表单编辑对话框出现模态的 jqGrid 覆盖是使用 '.jqmOverlay' 而不是 jquery 的主题 '.ui-widget-overlay'。

我曾尝试在 afterShowForm 事件中删除 jqmOverlay 并将其替换为 ui-widget-overlay，但正确的覆盖 (ui-widget-overlay) 会出现一秒钟，然后恢复为不正确的 (jqmOverlay)。

除非我弄错了，否则似乎没有发生任何我可以尝试开火的后续事件。

如有任何帮助，我们将不胜感激。

afterShowForm: function (form)
    {
        var overlayDiv = $('.jqmOverlay');
        overlayDiv.removeAttr('class');
        overlayDiv.attr('class', 'ui-widget-overlay');
        //$('.jqmOverlay').attr('class', 'ui-widget-overlay');                       

    }

Answer 1

The form editing支持两种不同的覆盖:标准 'ui-widget-overlay'和来自 jqModal.js 的 jqModal .

如果你不想使用 jqModal您可以包含的插件 jqModal:false添加或编辑设置选项列表中的属性。在这种情况下，叠加层将如下所示:

<div style="display: block;" id="lui_list" class="ui-widget-overlay jqgrid-overlay"/>

(这里 war 使用了 <table> 元素有 id="list"的网格)

如果你想删除覆盖你可以隐藏它

afterShowForm:function(){
    $("#lui_"+grid[0].id).hide(); // hide #lui_list overlay
}

哪里grid定义为 var grid=$("list");

已更新:如果您愿意，可以像我之前描述的那样隐藏网格的叠加层，并创建您自己的具有“ui-widget-overlay”类的叠加层。我创建了 the demo ，它在我的测试中有效，没有你描述的问题。我使用了“编辑”对话框的以下选项:

recreateForm:true,
jqModal:false,
reloadAfterSubmit:false,
savekey: [true,13],
closeOnEscape:true,
closeAfterEdit:true,
afterShowForm:function(){
    $("#lui_"+grid[0].id).hide();
    $('body').prepend('<div class="ui-widget-overlay" id="My_list" style="left: 0px; top: 0px; width: 100%; height: 100%; position: fixed; z-index: 949; opacity: 0.3;"/>');
},
onClose:function(){
    $('#My_list').remove();
}

也许您应该更改 opacity 的值或 z-index在您的应用程序中更好地使用它。注意 z-index 的设置.如果您需要增加它，您可能需要使用 zIndex 的附加值编辑属性。