如果选项卡未处于活动状态，jqgrid 无法在 jquery-ui 选项卡下正确加载

Posted 2023-05-08

【中文标题】如果选项卡未处于活动状态，jqgrid 无法在 jquery-ui 选项卡下正确加载

【英文标题】：jqgrid not loading properly under jquery-ui tabs if the tab is not active

【发布时间】：2012-03-07 12:58:25

【问题描述】：

我正在使用 jquery-ui 选项卡，我有 3 个选项卡。在每个选项卡中，我将有一个 jqgrid（具有冻结列功能），它将在选择该选项卡时加载。 Jqgrid 联系服务器以获取 colmodel 和数据。

当 jqgrid 服务器通信 ajax 调用正在进行时，如果我尝试导航到其他选项卡，则之前打开的选项卡中的网格无法正确加载（尤其是冻结列功能不起作用）。

我相信，当我导航到其他选项卡时，选项卡的内容会被隐藏，这是导致问题的原因。

有什么办法可以解决这个问题。 即使我导航到其他选项卡，jqgrid 也应该正确加载..

我已使用 oleg 提供的以下链接来实现冻结列功能。 http://www.ok-soft-gmbh.com/jqGrid/FrozenColumnsAndFilterToggle.htm

【参考方案1】：

我找到了可能对某人有所帮助的问题的解决方案.. 解决方案仅在 jquery ui-tabs 主页 (http://jqueryui.com/demos/tabs/) 上找到

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

.ui-tabs .ui-tabs-hide 
    position: absolute;
    left: -10000px;

【参考方案2】：

我正在使用这个脚本。试试这个：

$('.jquery_tabs').tabs(
    activate:function(event,ui)
        ui.newPanel.find('table.ui-jqgrid-btable').each(function()
            var $table=$(this);
            if($table.is(':visible') && $table.jqGrid('getGridParam','autowidth'))
                var $parent=$table.closest('.ui-jqgrid').parent();
                $table.jqGrid('setGridWidth',$parent.width());
            
        );
    
);

【参考方案3】：

如果我将 jqGrid 放在样式为“display: none”的 div 中，我也会遇到同样的问题从容器中读取。它可能无法从选项卡中读取高度和宽度数据。

尝试在可见的 DOM 元素中创建网格，然后使用 jQuery 将容器移动到选项卡中。

此外，如果您将选项卡排除在等式之外，它可能有助于您的调试。尝试在隐藏的 div 中创建 jqGrid，看看它的行为。

祝你好运

【参考方案4】：

回复可能为时已晚，但我遇到了同样的问题并最终解决了，我在加载网格之前先加载了选项卡，并使所有选项卡可见。参考下面的代码sn-p。

$(document).ready(function () 
    $("#tabs").tabs();
    BindAllData();
);

var BindAllData = function () 
    $.ajax(
        url: '../../Handler/GetAllBillingData.ashx',
        type: 'GET',
        success: function (data) 
            var parsedData = JSON.parse(data);
            $("div.ui-tabs-panel").show();
            // jqgrid binding logic.

        ,
        error: function (errorText) 
            alert("Wwoops something went wrong !");
        
    );

【参考方案5】：

只需添加：

<style>
        .ui-tabs .ui-tabs-hide 
            position: absolute;
            left: -10000px;
        
</style>

对我有用