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 来自 jqModal.js .

如果您不想使用 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 的附加值编辑属性。