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

2022-01-18 00:00:00 resize grid jquery javascript jqgrid

当浏览器窗口调整大小时，有没有办法调整 jqGrid 的大小?我已经尝试过描述的方法 here 但该技术在 IE7 中不起作用.

Is there any way to resize a jqGrid when the browser window is resized? I have tried the method described here but that technique does not work in IE7.

推荐答案

作为后续:

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

The previous code shown in this post was eventually abandoned because it was unreliable. I am now using the following API function to resize the grid, as recommended by the jqGrid documentation:

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

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

To do the actual resizing, a function implementing the following logic is bound to the window's resize event:

  • 使用其父级的 clientWidth 和(如果不可用)它的 offsetWidth 属性来计算网格的宽度.

  • Calculate the width of the grid using its parent's clientWidth and (if that is not available) its offsetWidth attribute.

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

Perform a sanity check to make sure width has changed more than x pixels (to work around some application-specific problems)

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

Finally, use setGridWidth() to change the grid's width

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

Here is example code to handle resizing:

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>

相关文章