Answers:
现在已经在生产环境中使用了一段时间,没有任何抱怨(可能需要做一些调整才能在您的网站上看起来正确。例如,减去边栏的宽度,等等)
$(window).bind('resize', function() {
$("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');
作为后续措施:
这篇文章中显示的先前代码最终被放弃,因为它不可靠。我现在按照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>
自动调整大小:
对于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);
});
}
}
$(this).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"
}
});
//下面定义的其他网格...
从链接中的代码中借用,您可以尝试如下操作:
$(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中极为无响应,因此我按照建议使用了计时器。代码看起来像这样($(#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上为我工作...但是我确实碰到了这些链接...这个人写的一个图书馆似乎工作。将其包含在您的项目中以加入jquery UI,并添加表名和div。
http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx
autowidth: true
对我来说效果很好。从这里学到的。
autowidth
第一次加载网格时工作正常,但在调整浏览器大小时不会调整网格大小。您如何处理该问题,或者这不是您的要求?