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


Answers:


69

现在已经在生产环境中使用了一段时间,没有任何抱怨(可能需要做一些调整才能在您的网站上看起来正确。例如,减去边栏的宽度,等等)

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

在这种情况下也非常有用:setGridWidth的第二个参数是'shrink'。 stackoverflow.com/questions/7745009/…–
吉姆(Jim)

斯蒂芬,您看到jmav的解决方案了吗?这似乎是最好的方法,但我想看看您如何与这种方法进行对比
IcedD​​ante 2015年

53

作为后续措施:

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

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

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

  • 使用其父级的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>

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

关心详细吗?当在不更改网格宽度的情况下调用resize事件时,我在IE上遇到问题,这导致了网格本身的异常行为。这就是为什么代码考虑到在步骤2中的阈值
贾斯汀·西尔

如果要更改jqgrid的添加/编辑形式的CSS怎么办?
巴维克·安巴尼

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

好吧,我可以确认上面的3.5+版本可以在IE9上的jqGrid 4.4.1上很好地工作,但是对于FireFox 16和17,每次我调整浏览器宽度时,表格的宽度都会稍微变宽。
MattSlay 2012年

也许您在CSS中定义的边框有问题-我做到了。
jmav 2012年

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

8

这似乎对我来说很好

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

感谢您的解决方案,但是它不能正常工作,就像它改变了整个div,但不申请标头。:(
Vikas Gupta

为什么您的示例中有-30个?
Vasil Popov 2015年

我不确定。它是5年前:(
达伦·卡托

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

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


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

这是一个演示


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%宽度,尽管它在容器扩展时会自动扩展,除非您正在使用的插件有一些我不知道的复杂之处。


谢谢你的提示!原来,我是从GridComplete事件中调用调整大小的代码-不管出于何种原因,这在IE中都不起作用。无论如何,我将调整大小的代码提取到一个单独的函数中,并在调整大小函数中和创建网格后都调用了它。再次感谢!
贾斯汀·埃斯蒂尔

我相信,在IE 8中调整窗口大小时,这不起作用。刷新页面时确实如此。
SoftwareSavant

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

使计时器正常工作似乎很棘手。能否请您看看我最新的答案,看看您是否还需要计时器?
贾斯汀·埃斯蒂尔

1
只是比较了所有三个。您的绝对肯定是对Stephens解决方案的改进,但是窗口大小的调整仍然相当麻烦。使用计时器,调整大小是平滑的,直到事件触发为止,因此需要花费一些时间才能使定时触发持续时间正确。计时器有点笨拙,但我认为它最终可以提供最佳结果。
摇摆

编辑:Stephens sln在我的另一页上工作正常...只有在我向其中添加了许多其他jQueryUI控件后,该页面才开始出现问题。
2011年

这是一个非常愚蠢的问题。但是我在Jquery上是一个完整的NOOB,所以请您原谅,但是我们将所有这些函数放在哪里?在Jquery(document).ready(function(){}里面还是我们要坚持下去?只是想知道,$(window)和width是从哪里来的?
SoftwareSavant

@DmainEvent,我将$(window).bind放在$(Document).ready中,并将reszieTimer var和resizeGrids函数放在$(Document).ready之外。$(window)是内置在jquery中的window元素,而.width()是一个计算元素宽度的jquery函数
woggles 2011年

3

你好堆栈溢出爱好者。我喜欢大多数答案,甚至投票赞成,但是由于某种奇怪的原因,它们都没有在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%253D关闭


在具有和没有兼容视图的情况下,我也在IE8中得到一些奇怪的行为:/我的网格正将大小调整为应有的一半大小……感谢链接
摇摆了2012年

1
autowidth: true

对我来说效果很好。从这里学到的。


2
autowidth第一次加载网格时工作正常,但在调整浏览器大小时不会调整网格大小。您如何处理该问题,或者这不是您的要求?
贾斯汀·埃斯蒂尔2010年

@贾斯汀·埃斯蒂尔:你是对的。我希望它在第一次加载网格时设置,而不是在调整浏览器大小时设置。对不起,我没看清楚问题。我理解不赞成投票。
understack

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

0
<script>
$(document).ready(function(){    
$(window).on('resize', function() {
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize');      
});
</script>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.