我有一个jQueryUI对话框(#locDialog),里面有一个jqGrid($grid).当对话框打开时(最初,但只要打开就会调用它),我希望$grid调整大小为$locDialog的大小.当我最初这样做时,我在网格内部(不在对话框内)获得滚动条.
如果我调试代码,我看到$grid的宽度是677.所以,我再次调用setGridWidth()并检查宽度,现在我有659,这是18px少,这是滚动区域的大小为jqGrid(Dun-dun-dun ..)
当我重新对话时,我也调整了网格的大小,一切都很快乐 – 没有滚动条,除非必要.
我的对话框初始代码：
$locDialog = $('#location-dialog').dialog({
autoOpen: false,modal: true,position: ['center',100],width: 700,height:500,resizable: true,buttons: {
"Show Selected": function() {alert($('#grid').jqGrid('getGridParam','selarrrow'));},"OK": function() {$(this).dialog('close');},"Cancel": function() {$(this).dialog('close');}
},open: function(event,ui) {
$grid.setGridHeight($(this).height()-54);
// No idea why 54 is the magic number here
$grid.setGridWidth($(this).width(),true);
},close: function(event,ui) {
},resizeStop: function(event,ui) {
$grid.setGridWidth($locDialog.width(),true);
$grid.setGridHeight($locDialog.height()-54);
}
});
我很好奇,如果有人以前见过这个.真的,如果我最初有不必要的滚动条,那么它不是世界末日,但是当我最初调用setGridWidth时,它并没有考虑到18px的滚动区域.
至于神奇的数字54,这是我必须从对话框值的高度中减去的数字,以使网格呈现而没有不必要的滚动条.
我认为这可能是一个时间问题,尽管这没有多大意义.也许我应该在网格完全加载后调用一个事件.这可以确保它正确地计算其宽度.
解决方法
在某些情况下,jqGrid计算宽度有点不正确.大多数情况下我的网格宽度有问题,但在某些情况下IE6也有高度问题.所以我必须编写一个小函数来解决问题.
var fixGridWidth = function (grid) {
var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth;
var mainWidth = jQuery('#main').width();
var gridScrollWidth = grid[0].scrollWidth;
var htable = jQuery('table.ui-jqgrid-htable',grid[0].parentNode.parentNode.parentNode);
var scrollWidth = gridScrollWidth;
if (htable.length > 0) {
var hdivScrollWidth = htable[0].scrollWidth;
if ((gridScrollWidth < hdivScrollWidth))
scrollWidth = hdivScrollWidth; // max (gridScrollWidth,hdivScrollWidth)
}
if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth; // min (scrollWidth,mainWidth)
// if the grid has no data,gridScrollWidth can be less then hdiv[0].scrollWidth
if (newGridWidth != gviewScrollWidth)
grid.jqGrid("setGridWidth",newGridWidth);
}
};
var fixGridHeight = function (grid) {
var gviewNode = grid[0].parentNode.parentNode.parentNode;
//var gview = grid.parent().parent().parent();
//var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv");
var bdiv = jQuery(".ui-jqgrid-bdiv",gviewNode);
if (bdiv.length) {
var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight;
var height = grid.height();
if (delta !== 0 && height && (height-delta>0)) {
grid.setGridHeight(height-delta);
}
}
};
var fixGridSize = function (grid) {
this.fixGridWidth(grid);
this.fixGridHeight(grid);
};
在此代码中,“main”是父div的id,其中将创建网格.在代码I test(scrollWidth> mainWidth)中,“main”的宽度是否允许增加jqGrid宽度.
loadComplete: function() {
var gr = jQuery('#list');
fixGridSize(gr);
}
如果使用’columnChooser’,如果使用使用Query(‘#list’).jqGrid(‘columnChooser’);
(在这个例子中我也使用’gridResize’.)
