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

Question

浏览器窗口调整大小时，有什么方法可以调整jqGrid的大小吗？我已经尝试了描述here的方法，但该技术在IE7中不起作用。

Answer 1

作为后续：

在这篇文章中显示的前面的代码被最终放弃，因为它是不可靠的。我现在用下面的API函数来调整网格的大小，所推荐的jqGrid文档：

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> 

Answer 2

从代码借用你的链接，你可以尝试这样的事：

$(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％，但它的容器展开时它应该会自动展开，除非您使用的插件有些复杂，我不知道。

Answer 3

自动调整：

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

Answer 4

在生产一段时间使用这个现在已经没有任何投诉（可能需要调整一下，以便在您的网站上进行调整..例如，减去边栏的宽度等）

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

Answer 5

这似乎是

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

Answer 6

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

//其他网格。 ..

Answer 7

autowidth: true 

对我来说非常合适。从here了解到。

Answer 8

主要答案为我工作，但使应用程序在IE中非常无响应，所以我用计时器建议。代码看起来是这样的（$(#contentColumn)是，jqGrid的坐在格）：

function resizeGrids() { 
    var reportObjectsGrid = $("#ReportObjectsGrid"); 
    reportObjectsGrid.setGridWidth($("#contentColumn").width()); 
}; 

var resizeTimer; 

$(window).bind('resize', function() { 
    clearTimeout(resizeTimer); 
    resizeTimer = setTimeout(resizeGrids, 60); 
}); 

Answer 9

您好堆栈溢出爱好者。我喜欢大部分的答案，我甚至投了一对夫妇，但他们没有一个在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%253Dclosed

Answer 10

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

Answer 11

该工程..

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

Answer 12

试试这个：

width: null 
shrinkToFit: true 

Answer 13

如果您：

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

Here is a demo