调整浏览器大小时调整jqGrid大小？
浏览器窗口resize时有没有办法调整jqGrid的大小？ 我已经尝试过这里描述的方法，但是这种技术在IE7中不起作用。
一段时间以来，一直在使用这个在生产没有任何抱怨（可能需要调整一下，看看你的网站上，例如，减去侧边栏的宽度等）
$(window).bind('resize', function() { $("#jqgrid").setGridWidth($(window).width()); }).trigger('resize'); 作为后续：
这篇文章中显示的以前的代码最终被放弃，因为它是不可靠的。 我正在使用下面的API函数来调整网格大小，正如jqGrid文档所build议的那样：
jQuery("#targetGrid").setGridWidth(width);
要进行实际的resize，实现以下逻辑的函数将绑定到窗口的resize事件：
-
使用其父级的clientWidth和（如果不可用）其offsetWidth属性计算网格的宽度。
-
执行完整性检查以确保宽度的变化超过x像素（解决一些特定于应用程序的问题）
-
最后，使用setGridWidth（）更改网格的宽度
以下是处理resize的示例代码：
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>
自动resize：
对于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的布局，所以我的解决scheme如下：
$(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" } });
//下面定义的其他网格…
从你的链接中的代码借用，你可以尝试这样的事情：
$(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％的宽度，虽然它应该会自动扩展，当它的容器扩展，除非有一些错综复杂的插件，你用我不知道。
主要答案为我工作，但使应用程序在IE中非常无响应，所以我用了一个计时器build议。 代码看起来像这样（ $(#contentColumn)是JQGrid所在的div）：
function resizeGrids() { var reportObjectsGrid = $("#ReportObjectsGrid"); reportObjectsGrid.setGridWidth($("#contentColumn").width()); }; var resizeTimer; $(window).bind('resize', function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeGrids, 60); });
你好堆栈溢出爱好者。 我喜欢大部分的答案，我甚至上了一对夫妇，但他们没有一个在IE 8上为我工作了一些奇怪的原因…然而，我遇到了这些链接…这家伙写了一个图书馆似乎工作。 把它包含在你的项目中，joinjQuery UI，把你的表和div的名字。
http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx
如果你：
- 有
shrinkToFit: false（平均固定宽度列） - 有
autowidth: true - 不关心stream体的高度
- 有水平滚动条
您可以使用以下样式制作具有stream体宽度的网格：
.ui-jqgrid { max-width: 100% !important; width: auto !important; } .ui-jqgrid-view, .ui-jqgrid-hdiv, .ui-jqgrid-bdiv { width: auto !important; }
这里是一个演示
autowidth: true
为我完美工作。 从这里学习。
这工作..
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? });
<script> $(document).ready(function(){ $(window).on('resize', function() { jQuery("#grid").setGridWidth($('#fill').width(), false); jQuery("#grid").setGridHeight($('#fill').height(),true); }).trigger('resize'); }); </script>
尝试这个：
width: null shrinkToFit: true
