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

【问题标题】：jqgrid not loading properly under jquery-ui tabs if the tab is not active如果选项卡未处于活动状态，jqgrid 无法在 jquery-ui 选项卡下正确加载
【发布时间】：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

【问题讨论】：

标签： jquery jqgrid

【解决方案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>

对我有用

【讨论】：