Question

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

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

我相信每当我导航到其他标签时，标签的内容都会隐藏，这就会导致问题。

有没有解决方案摆脱这个问题。即使我导航到其他选项卡，jqgrid也应正确加载..

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

Answer 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;
}

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

Answer 3

如果我把一个jqGrid放在一个用“display：none”设置的div中，我有同样的问题我怀疑jqGrid的代码根据它能够的DOM属性将其自身的大小调整到它所在的容器从容器中读取。它可能无法从选项卡中读取高度和宽度数据。

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

此外，如果您将标签排除在等式之外，它可能对您的调试有所帮助。尝试将jqGrid创建为隐藏的div，并查看其行为。

祝你好运

Answer 4

回复可能为时已晚，但我遇到了同样的问题并最终解决了问题，我在加载网格之前首先加载了标签，并使所有选项卡都显示为true。请参阅以下代码段以供参考。

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

Answer 5

只需添加：

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

它对我有用

如果选项卡未激活，则jqgrid在jquery-ui选项卡下无法正确加载

5 个答案: