在 jQueryUI 对话框内的 jqGrid 上正确调用 setGridWidth

我有一个 jQueryUI 对话框（#locDialog）其中有一个 jqGrid （$grid） 在里面。当对话框打开时（最初，但每当打开时都会调用它），我想要$grid调整大小到$locDialog。当我最初执行此操作时，我会在网格内（而不是在对话框内）看到滚动条。

如果我调试代码，我会看到$grid是 677。所以，我打电话setGridWidth()再次检查宽度，现在我有 659，少了 18px，这是 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，这是我必须从对话框值的高度中减去的数字，才能使网格渲染而没有不必要的滚动条。

我认为这可能是一个时间问题，尽管这没有多大意义。也许我应该在网格完全加载后调用一个事件。这可以确保它正确计算其宽度。

在某些情况下，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 的 id，将在其中创建网格。在我测试的代码中（scrollWidth > mainWidth) 是否宽度"main"允许增加 jqGrid 宽度。

调用该函数的正确位置是在loadComplete:

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

和里面的"done"，如果你使用'columnChooser'如果使用使用Query('#list').jqGrid('columnChooser');

（在这个例子中我也使用'gridResize'.)