调整浏览器大小时调整jqGrid的大小？

Posted 2023-02-21

【中文标题】调整浏览器大小时调整jqGrid的大小？

【英文标题】：Resize jqGrid when browser is resized?

【发布时间】：2010-10-26 21:20:55

【问题描述】：

当浏览器窗口调整大小时，有什么方法可以调整jqGrid 的大小？我已经尝试过here 描述的方法，但该技术在 IE7 中不起作用。

【参考方案1】：

如果你：

有shrinkToFit: false（平均固定宽度列） 有autowidth: true 不关心流体高度 有水平滚动条

您可以使用以下样式制作具有流体宽度的网格：

.ui-jqgrid 
  max-width: 100% !important;
  width: auto !important;


.ui-jqgrid-view,
.ui-jqgrid-hdiv,
.ui-jqgrid-bdiv 
   width: auto !important;

Here is a demo

【参考方案2】：

这行得通..

var $targetGrid = $("#myGridId");
$(window).resize(function () 
    var jqGridWrapperId = "#gbox_" + $targetGrid.attr('id') //here be dragons, this is     generated by jqGrid.
    $targetGrid.setGridWidth($(jqGridWrapperId).parent().width()); //perhaps add padding calculation here?
);

【参考方案3】：

<script>
$(document).ready(function()    
$(window).on('resize', function() 
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
).trigger('resize');      
);
</script>

【参考方案4】：

作为后续：

本文中显示的先前代码最终被放弃，因为它不可靠。按照 jqGrid 文档的建议，我现在使用以下 API 函数来调整网格的大小：

jQuery("#targetGrid").setGridWidth(width);

要进行实际的调整大小，将实现以下逻辑的函数绑定到窗口的调整大小事件：

使用其父级的 clientWidth 和（如果不可用）其 offsetWidth 属性来计算网格的宽度。

执行完整性检查以确保宽度变化超过 x 像素（以解决一些特定于应用程序的问题）

最后，使用 setGridWidth() 改变网格的宽度

这是处理调整大小的示例代码：

jQuery(window).bind('resize', function() 

    // Get width of parent container
    var width = jQuery(targetContainer).attr('clientWidth');
    if (width == null || width < 1)
        // For IE, revert to offsetWidth if necessary
        width = jQuery(targetContainer).attr('offsetWidth');
    
    width = width - 2; // Fudge factor to prevent horizontal scrollbars
    if (width > 0 &&
        // Only resize if new width exceeds a minimal threshold
        // Fixes IE issue with in-place resizing when mousing-over frame bars
        Math.abs(width - jQuery(targetGrid).width()) > 5)
    
        jQuery(targetGrid).setGridWidth(width);
    

).trigger('resize');

以及示例标记：

<div id="grid_container">
    <table id="grid"></table>
    <div id="grid_pgr"></div>
</div>

【讨论】：

如果您需要支持 IE，您可能需要通过计时器限制调整大小的频率。

想详细说明一下？当在不改变网格宽度的情况下调用调整大小事件时，我在 IE 上遇到了问题，这导致了网格本身的奇怪行为。这就是代码在第 2 步中考虑阈值的原因。

如果我想更改 jqgrid 的添加/编辑表单的 css 怎么办？

【参考方案5】：

你好 Stack 溢出爱好者。我喜欢大多数答案，我什至投了几个票，但由于某种奇怪的原因，他们都没有在 IE 8 上为我工作……但我确实遇到了这些链接……这个人写了一个似乎工作。除了 jquery UI 之外，将它包含在您的项目中，输入您的表格名称和 div。

http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx

http://code.google.com/p/codeincubator/source/browse/#svn%2FSamples%2Fsteveharman%2FjQuery%2Fjquery.jqgrid.fluid%253Fstate%253Dclosed

【讨论】：

在有和没有兼容性视图的情况下，我在 IE8 中也遇到了一些奇怪的行为：/ 我的网格正在调整到应有大小的一半...感谢链接

【参考方案6】：

主要答案对我有用，但使该应用在 IE 中极不响应，因此我按照建议使用了计时器。代码看起来像这样（$(#contentColumn) 是 JQGrid 所在的 div）：

  function resizeGrids() 
    var reportObjectsGrid = $("#ReportObjectsGrid");
    reportObjectsGrid.setGridWidth($("#contentColumn").width());
;

var resizeTimer;

$(window).bind('resize', function () 
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeGrids, 60);
);

【讨论】：

让计时器正常工作似乎很棘手。你能看看我更新的答案，看看你是否还需要计时器？

刚刚比较了所有 3 个。你的绝对是对斯蒂芬斯解决方案的改进，但窗口的大小调整仍然很生涩。使用计时器，在事件触发之前调整大小是平滑的，因此需要一些摆弄才能获得正确的定时触发持续时间。计时器有点笨拙，但我认为它最终会给出最好的结果。

编辑：Stephens sln 在我的另一个页面上运行良好......这个页面只有在我添加了一堆其他 jQueryUI 控件后才开始出现问题。

这是一个非常愚蠢的问题。但是我是 Jquery 的一个完整的 NOOB，所以请非常原谅，但是我们将所有这些功能放在哪里？在 Jquery(document).ready(function() 内部还是我们要坚持下去？只是想知道 $(window) 和 width 来自哪里？

@DmainEvent，我将 $(window).bind 放在 $(Document).ready 中，并将 reszieTimer var 和 resizeGrids 函数放在 $(Document).ready 之外。 $(window) 是 jquery 内置的窗口元素，.width() 是 jquery 计算元素宽度的函数

【参考方案7】：

autowidth: true

非常适合我。从here学习。

【讨论】：

autowidth 在第一次加载网格时工作正常，但在调整浏览器大小时不会调整网格大小。你是如何处理这个问题的，或者这不是你的要求？

@Justin Ethier：你是对的。我希望它在第一次加载网格时设置，而不是在调整浏览器大小时设置。对不起，我误读了这个问题。我理解反对票。

【参考方案8】：

我使用 960.gs 进行布局，所以我的解决方案如下：

    $(window).bind(
        'resize',
        function() 
                    //  Grid ids we are using
            $("#demogr, #allergygr, #problemsgr, #diagnosesgr, #medicalhisgr").setGridWidth(
                    $(".grid_5").width());
            $("#clinteamgr, #procedgr").setGridWidth(
                    $(".grid_10").width());
        ).trigger('resize');
// Here we set a global options

jQuery.extend(jQuery.jgrid.defaults, 
    // altRows:true,
    autowidth : true,
    beforeSelectRow : function(rowid, e)  // disable row highlighting onclick
        return false;
    ,
    datatype : "jsonstring",
    datastr : grdata,  //  JSON object generated by another function
    gridview : false,
    height : '100%',
    hoverrows : false,
    loadonce : true,
    sortable : false,
    jsonReader : 
        repeatitems : false
    
);

// Demographics Grid

$("#demogr").jqGrid( 
    caption : "Demographics",
    colNames : [ 'Info', 'Data' ],
    colModel : [ 
        name : 'Info',
        width : "30%",
        sortable : false,
        jsonmap : 'ITEM'
    , 
        name : 'Description',
        width : "70%",
        sortable : false,
        jsonmap : 'DESCRIPTION'
     ],
    jsonReader : 
        root : "DEMOGRAPHICS",
        id : "DEMOID"
    
);

// 下面定义的其他网格...

【参考方案9】：

这似乎对我很有效

$(window).bind('resize', function() 
    jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
).trigger('resize');

【讨论】：

感谢您的解决方案，但它没有正常工作，就像它改变了整个div一样，但不要申请标题。 :(

为什么你的例子中有-30？

我不确定。那是5年前的事了:(

【参考方案10】：

在生产中使用它已有一段时间了，没有任何抱怨（可能需要进行一些调整才能在您的网站上看起来正确。例如，减去侧边栏的宽度等）

$(window).bind('resize', function() 
    $("#jqgrid").setGridWidth($(window).width());
).trigger('resize');

【讨论】：

在这种情况下也很有用：setGridWidth 的第二个参数是 'shrink'。 ***.com/questions/7745009/…

斯蒂芬，你看到jmav的解决方案了吗？这似乎是最好的，但我想看看你如何将它与这种方法进行对比

【参考方案11】：

自动调整大小：

对于 jQgrid 3.5+

        if (grid = $('.ui-jqgrid-btable:visible')) 
            grid.each(function(index) 
                gridId = $(this).attr('id');
                gridParentWidth = $('#gbox_' + gridId).parent().width();
                $('#' + gridId).setGridWidth(gridParentWidth);
            );
        

对于 jQgrid 3.4.x：

       if (typeof $('table.scroll').setGridWidth == 'function') 
            $('table.scroll').setGridWidth(100, true); //reset when grid is wider than container (div)
            if (gridObj) 

             else 
                $('#contentBox_content .grid_bdiv:reallyvisible').each(function(index) 
                    grid = $(this).children('table.scroll');
                    gridParentWidth = $(this).parent().width() – origami.grid.gridFromRight;
                    grid.setGridWidth(gridParentWidth, true);
                );
            
        

【讨论】：

好吧，我可以确认上面的 3.5+ 版本在 IE9 上与 jqGrid 4.4.1 配合得很好，但是在 FireFox 16 和 17 上，每次我调整浏览器宽度时，表格都会稍微变宽。

也许你的边框有问题，在 css 中定义 - 我做到了。

您可能希望在最近版本的 jqGrid 中将 true 作为 setGridWidth() 调用中的第二个参数传递。如果您不调整表格大小时不调整表格中的列大小。即$(this).setGridWidth(gridParentWidth, true);

【参考方案12】：

借用链接中的代码，您可以尝试以下操作：

$(window).bind('resize', function()  
    // resize the datagrid to fit the page properly:
    $('div.subject').children('div').each(function() 
        $(this).width('auto');
        $(this).find('table').width('100%');
    );
);

这样您就可以直接绑定到 window.onresize 事件，这实际上看起来就像您想要的问题。

如果您的网格设置为 100% 宽度，但它应该会在其容器展开时自动展开，除非您使用的插件有一些我不知道的复杂性。

【讨论】：

感谢您的提示！结果是我从 GridComplete 事件中调用了调整大小的代码——无论出于何种原因，这在 IE 中都不起作用。无论如何，我将调整大小代码提取到一个单独的函数中，并在调整大小函数和创建网格后调用它。再次感谢！

我相信在 IE 8 中调整窗口大小时这不起作用。但是，当您刷新页面时会这样做。