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

在调整浏览器窗口的大小时，是否有任何方法可以调整浏览器窗口的大小？我已经尝试过所描述的方法，但该技术在IE7中不起作用。

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

$(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%宽度，但当其容器扩展时，它应该自动扩展，除非您正在使用的插件有一些我不知道的复杂之处。

作为后续：

这篇文章中显示的以前的代码最终被放弃了，因为它不可靠。根据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');

jQuery（window.bind（'resize'，function（））{
//获取父容器的宽度
var width=jQuery（targetContainer）.attr（'clientWidth'）；
如果（宽度==null | |宽度<1）{
//对于IE，如有必要，恢复为offsetWidth
宽度=jQuery（targetContainer）.attr（'offsetWidth'）；
}
宽度=宽度-2；//防止水平滚动条的模糊因子
如果（宽度>0&&
//仅当新宽度超过最小阈值时调整大小
//修复了当鼠标移动到框架条上时IE就地调整大小的问题
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>

自动调整大小：

对于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);
                });
            }
        }

---

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

---

这似乎对我很有效

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

---

我使用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"
    }
});

//下面定义的其他网格

autowidth: true

---

对我来说非常有效。从中学习。

主要答案对我来说很有用，但在IE中应用程序的响应非常慢，所以我按照建议使用了计时器。代码如下所示（$（#contentColumn）是JQGrid所在的div）：

---

大家好，堆栈溢出爱好者。我喜欢大多数答案，甚至还投了几票，但由于某些奇怪的原因，没有一个在IE8上为我工作。。。但我确实遇到了这些链接。。。这家伙写了一个图书馆，看起来很管用。将它包含在jQueryUI中的项目中，输入表和div的名称

$（文档）.ready（函数（）{
$（窗口）.on（'resize'，function（））{
jQuery（“#grid”）.setGridWidth（$（'#fill'）.width（），false）；
jQuery（“#grid”）.setGridHeight（$（'#fill'）.height（），true）；
}).trigger（'resize'）；
});

这很有效

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?
});

如果你：

• have

  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;
}

---

谢谢你的提示！原来我是从GridComplete事件调用resize代码的——无论出于何种原因，这在IE中都不起作用。无论如何，我将resize代码提取到一个单独的函数中，并在resize函数中和网格创建后调用它。再次感谢！我相信在IE8中调整窗口大小时，这不起作用。但当你刷新页面时，它就会出现。如果你需要支持IE，你可能想通过定时器来限制调整大小的频率。想详细说明一下吗？我在IE上遇到了一些问题，在没有改变网格宽度的情况下调用了resize事件，这导致了网格本身的奇怪行为。这就是代码在步骤2中考虑阈值的原因。如果我想更改jqgrid添加/编辑表单的css，该怎么办？

autowidth

在首次加载网格时工作正常，但在调整浏览器大小时不会调整网格大小。你是如何处理这个问题的，还是这不是你的要求？@Justin Ethier:你说得对。我希望它设置网格首次加载的时间，而不是浏览器调整大小的时间。对不起，我误读了这个问题。我理解否决票。看来要让计时器正常工作是很困难的。你能看看我更新的答案，看看你是否还需要计时器吗？只是比较了三个。与Stephens解决方案相比，您的解决方案无疑是一个改进，但窗口的大小调整仍然非常不平稳。使用计时器，在事件触发之前，调整大小是平滑的，因此需要进行一些调整才能获得正确的定时触发器持续时间。计时器有点笨拙，但我认为它最终会给出最好的结果。编辑：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函数，它计算我也得到的元素的宽度

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

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?
});

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

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