81

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

4

12 回答 12

69

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

$(window).bind('resize', function() {
    $("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');
于 2009-10-27T19:20:26.047 回答
53

作为后续：

这篇文章中显示的之前的代码最终被放弃了，因为它不可靠。根据 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>
于 2009-10-15T21:12:18.367 回答
36

自动调整大小：

对于 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);
                });
            }
        }
于 2009-10-22T21:54:22.930 回答
8

这似乎对我很有效

$(window).bind('resize', function() {
    jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');
于 2010-09-29T22:07:58.553 回答
7

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

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

于 2010-11-11T21:23:56.447 回答
5

如果你：

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

这是一个演示

于 2015-02-09T12:58:49.660 回答
4

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

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

于 2009-05-17T19:18:12.013 回答
3

主要答案对我有用，但使应用程序在 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);
});
于 2011-04-05T14:06:54.730 回答
3

你好 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%253Dclose

于 2011-08-26T13:01:05.640 回答
1 
autowidth: true

非常适合我。从这里学到的。

于 2010-12-04T11:13:27.747 回答
1

这有效..

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?
});
于 2013-09-03T12:30:24.190 回答
0 
<script>
$(document).ready(function(){    
$(window).on('resize', function() {
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize');      
});
</script>
于 2013-05-09T07:19:25.520 回答