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

Posted 2023-03-06

【中文标题】在 jQueryUI 对话框内的 jqGrid 上正确调用 setGridWidth

【英文标题】：Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog

【发布时间】：2011-02-10 18:40:27

【问题描述】：

我有一个 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，这是我必须从对话框值的高度中减去的数字，以使网格在没有不必要的滚动条的情况下呈现。

---

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

【参考方案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 的 id。在代码中我测试（scrollWidth > mainWidth）"main" 的宽度是否允许增加 jqGrid 宽度。

调用此函数的正确位置是loadComplete：

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

在"done"内部，如果你使用'columnChooser'，如果使用Query('#list').jqGrid('columnChooser');

（在这个例子中我也使用'gridResize'。）

【讨论】：

我一定会看看这个，奥列格 - 非常感谢代码。在这一点上，我并不太担心，因为问题仅在用户打开对话框时才会出现。一旦他们调整大小/重新加载，它就会自行修复。同样，可能是时间问题。再次感谢：D

@Oleg：你能看看类似的东西吗question

我知道这是一个旧答案，但是...我尝试使用此代码，但无法正常工作。我使用了@Oleg 的fixGridWidth 函数，是的，它调整了网格的大小。但是列的大小保持不变，因此网格的一半是空的，列不会调整大小。你也知道如何调整列的大小吗？

@RaunakGupta：对不起，我开发了替代 fork，我可以完全免费使用免费的 jqGrid。我无法提供对 Gurrido jqGrid JS 的任何支持。您可以尝试（至少是暂时的）将 jqGrid 文件的 URL 替换为 CDN 中的 URL（请参阅the wiki），并验证您的问题对于 jqGrid 的两个分支是否常见。在这种情况下，我可以尝试帮助您解决问题。演示的一个例子是jsfiddle.net/OlegKi/andm1299/26

@RaunakGupta：请参阅here 更多使用免费 jqGrid 的示例。