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.

推荐答案

As a follow-up:

这篇文章中之前的代码最终被放弃了,因为它不可靠.根据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>

Jquery相关问答推荐

将搜索面板和服务器端与POST AJAX请求一起使用时出现DataTables错误

bootstrap - Select Select 器不能在下拉菜单中 Select

如何向父元素添加类?

如何用 jQuery / AJAX 替换表格的行

DataTables - this.api 用于回调函数中的多个表

更改高亮 colored颜色

在 Bootstrap 3 中向工具提示添加换行符

jQuery 与 ExtJS

jQuery .live() 和 .on() 有什么区别

$.each(selector) 和 $(selector).each() 有什么区别

jQuery.extend 和 jQuery.fn.extend 的区别?

一组元素中具有最大高度的元素

更改占位符文本

虽然未定义变量 - 等待

在Javascript中判断isEmpty?

jQuery ajax 成功回调函数定义

如何使用jQuery触发类更改事件?

如何防止使用光标拖动 Select 文本/元素

删除所有以某个字符串开头的类

如何在 jquery 中获取 textarea 的值?