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

Question

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

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

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

---

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

Answer 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'.)