Правильный вызов setGridWidth для jqGrid внутри диалогового окна jQueryUI

У меня есть диалог jQueryUI (#locDialog), в котором есть jqGrid ($grid). Когда открывается диалоговое окно (изначально, но оно вызывается всякий раз, когда открывается), я хочу, чтобы размер $grid изменился до размера $locDialog. Когда я делаю это изначально, я получаю полосы прокрутки внутри сетки (а не внутри диалогового окна).

Если я отлаживаю код, я вижу, что ширина $grid равна 677. Итак, я снова вызываю setGridWidth() и проверяю ширину, и теперь у меня 659, что на 18 пикселей меньше, что является размером области прокрутки для jqGrid (Dun -дун-дан ..)

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

Мой код инициализации диалога:

$locDialog = $('#location-dialog').dialog({
    autoOpen: false,
    modal: true,
    position: ['center', 100],
    width: 700,
    height:500,
    resizable: true,
    buttons: {
                "Show Selected": function() {alert($('#grid').jqGrid('getGridParam','selarrrow'));},
                "OK": function() {$(this).dialog('close');},
                "Cancel": function() {$(this).dialog('close');}
             },
    open: function(event, ui) {
        $grid.setGridHeight($(this).height()-54); 
          // No idea why 54 is the magic number here
        $grid.setGridWidth($(this).width(), true);
    },
    close: function(event, ui) {

    },
    resizeStop: function(event, ui) {
        $grid.setGridWidth($locDialog.width(), true);
        $grid.setGridHeight($locDialog.height()-54);
    }
});

Мне любопытно, видел ли кто-нибудь это раньше. На самом деле, это еще не конец света, если у меня изначально есть ненужные полосы прокрутки, но просто странно, что когда я сначала вызываю setGridWidth, он не принимает во внимание область прокрутки в 18 пикселей.

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


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


person Dan    schedule 21.04.2010    source источник


Ответы (1)


Бывают случаи, когда jqGrid вычисляет ширину немного некорректно. В основном у меня проблемы с шириной сетки, но в некоторых случаях в IE6 еще и с высотой. Поэтому мне пришлось написать небольшую функцию, чтобы исправить проблему.

var fixGridWidth = function (grid) {
    var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth;
    var mainWidth = jQuery('#main').width();
    var gridScrollWidth = grid[0].scrollWidth;
    var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode);
    var scrollWidth = gridScrollWidth;
    if (htable.length > 0) {
        var hdivScrollWidth = htable[0].scrollWidth;
        if ((gridScrollWidth < hdivScrollWidth))
            scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth)
    }
    if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
        var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth;  // min (scrollWidth, mainWidth)
        // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth
        if (newGridWidth != gviewScrollWidth)
            grid.jqGrid("setGridWidth", newGridWidth);
    }
};

var fixGridHeight = function (grid) {
    var gviewNode = grid[0].parentNode.parentNode.parentNode;
    //var gview = grid.parent().parent().parent();
    //var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv");
    var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode);
    if (bdiv.length) {
        var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight;
        var height = grid.height();
        if (delta !== 0 && height && (height-delta>0)) {
            grid.setGridHeight(height-delta);
        }
    }
};

var fixGridSize = function (grid) {
    this.fixGridWidth(grid);
    this.fixGridHeight(grid);
};

В этом коде "main" - это идентификатор родительского div, внутри которого будет создана сетка. В коде я проверяю (scrollWidth > mainWidth), позволяет ли ширина "main" увеличивать ширину jqGrid.

Правильное место для вызова этой функции находится внутри loadComplete:

loadComplete: function() {
    var gr = jQuery('#list');
    fixGridSize(gr);
}

и внутри "done", если вы используете 'columnChooser', если используете Query('#list').jqGrid('columnChooser');

(в этом примере я также использую 'gridResize'.)

person Oleg    schedule 23.04.2010
comment
Обязательно посмотрю, Олег - большое спасибо за код. На данный момент меня это не слишком беспокоит, поскольку проблема возникает только тогда, когда пользователь открывает диалоговое окно. Как только они изменят размер / перезагрузятся, он исправится сам. Опять же, скорее всего, проблема со сроками. Еще раз спасибо: D - person Dan; 26.04.2010
comment
@Oleg: Вы можете посмотреть что-нибудь похожее на вопрос - person ; 28.11.2011
comment
Я знаю, что это старый ответ, но ... Я пытался использовать этот код, но он не работает должным образом. Я использовал функцию @Oleg fixGridWidth, и да, она меняет размер сетки. Но столбцы остаются того же размера, поэтому половина сетки пуста, размер столбцов не изменяется. Вы тоже знаете, как изменять размер столбцов? - person Isthar; 18.09.2014
comment
@Isthar: Вам следует опубликовать новый вопрос, в котором вы подробно опишете, что вы делаете и какие у вас проблемы. - person Oleg; 18.09.2014
comment
@ Олег: ты можешь мне помочь в одном моменте. Я использовал тот же код. и я также вызываю fixGridSize(gr); в событии window.onresize, ширина автоматически рассчитывается так хорошо, но высота уменьшается, когда я делаю Zoom Out (т.е. на CTRL -). - person Raunak Gupta; 05.10.2016
comment
@RaunakGupta: Извините, но ответ написан примерно 6 лет назад. Проблема не существует в текущих версиях jqGrid. Я рекомендую вам попробовать текущий код бесплатного jqGrid - форка jqGrid, который я разрабатываю. . Если у вас все еще есть какие-либо проблемы, вы можете задать новый вопрос и включить демонстрацию, которая воспроизводит проблему. Вы также должны описать тестовый пример, включая информацию о веб-браузере, который вы используете в тестах. - person Oleg; 05.10.2016
comment
Спасибо @Oleg, за такой быстрый ответ, я использую последнюю коммерческую версию, я сделал исправление и меняю одну строку, когда она работает, кроме Zoom 50%. var height = 800;//grid.height(); - person Raunak Gupta; 05.10.2016
comment
@RaunakGupta: Извините, я разрабатываю альтернативный форк, который можно использовать бесплатно jqGrid совершенно бесплатно. Я не могу обеспечить поддержку Gurrido jqGrid JS. Вы можете попробовать (хотя бы временно) заменить URL-адреса файлов jqGrid на URL-адреса из CDN (см. вики) и проверьте, является ли ваша проблема общей для обеих ветвей jqGrid. В случае, если я могу попытаться помочь вам решить проблему. Пример демонстрации: jsfiddle.net/OlegKi/andm1299/26. - person Oleg; 05.10.2016
comment
@RaunakGupta: См. здесь еще несколько примеров использования бесплатного jqGrid. - person Oleg; 05.10.2016
comment
@Oleg: да, в твоем случае он работает нормально, я думаю, что я напортачил с моей стороны, я думаю, что добавил много ингредиентов из многих версий, и сегодня приложение было запущено; Итак, клиент попросил исправить, тогда я полностью перейду к вашему примеру. большое спасибо. - person Raunak Gupta; 05.10.2016