jqgrid не загружается должным образом под вкладками jquery-ui, если вкладка не активна

Question

Я использую вкладки jquery-ui, и у меня есть 3 вкладки.в каждой вкладке у меня будет jqgrid (с функцией замораживания столбцов), который будет загружаться при выборе этой вкладки.Jqgrid связывается с сервером для извлечения colmodel и данных.

Во время вызова ajax связи с сервером jqgrid, если я пытаюсь перейти на другую вкладку, то сетка не загружается должным образом (особенно функция замораживания столбца не работает) в ранее открытой вкладке.

Я считаю, что, поскольку содержимое вкладки скрывается при переходе на другую вкладку, это вызывает проблему.

Есть ли какое-либо решение, от которого можно избавиться?Эта проблема.Несмотря на то, что я перехожу на другую вкладку, 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

Просто добавьте:

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

у меня работает

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

У меня та же проблема, если я помещаю jqGrid в div, стилизованный под «display: none», я подозреваю, что jqGrid имеет код, который масштабируется в соответствии с контейнером, в котором он находится, на основе свойств DOM читать из контейнера. Вероятно, он не может читать и данные высоты и ширины с вкладок.

Попробуйте создать сетки внутри видимого элемента DOM, а затем используйте jQuery для перемещения контейнеров на ваши вкладки.

Кроме того, это может помочь при отладке, если вы уберете вкладки из уравнения. Поэкспериментируйте с созданием jqGrid в скрытый div и посмотрите, как он себя ведет.

удачи