在jQueryUI对话框内的jqGrid上正确调用setGridWidth [英] Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog
问题描述
我有一个jQueryUI对话框(#locDialog
),其中有一个jqGrid($grid
).当对话框打开时(最初,但每次打开时都会调用它),我希望$grid
调整为$locDialog
的大小.最初执行此操作时,滚动条会出现在网格内(而不是对话框内).
I have a jQueryUI dialog (#locDialog
) which has a jqGrid ($grid
) inside it. When the Dialog opens (initially, but it gets called whenever it opens), I want the $grid
to resize to the size of the $locDialog
. When I do this initially, I get scrollbars inside the grid (not inside the dialog).
如果我调试代码,我会看到$grid
的宽度是677.因此,我再次调用setGridWidth()
并检查宽度,现在我有659,即少了18px,即jqGrid的滚动区域(Dun-dun-dun ..)
If I debug the code, I see the width of the $grid
is 677. So, I call setGridWidth()
again and check the width and now I have 659, which is 18px less, which is the size of the scroll area for the jqGrid (Dun-dun-dun..)
当我调整对话框的大小时,我也调整了网格的大小,一切都变得很愉快-没有滚动条,除非有必要.
When I rezie the dialog, I resize the grid as well, and everything is happy - no scrollbars, except where necessary.
我的对话框初始化代码:
My dialog init code:
$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的滚动区域.
I am curious if anyone has seen this before. Really, it isn't the end of the world if I initially have unnecessary scrollbars at first, but it is just odd that when I call setGridWidth initially, it doesn't take into account the scroll area of 18px.
就神奇数字54而言,这就是我必须从对话框值的高度中减去的数字,才能使网格呈现出来而没有不必要的滚动条.
As far as the magical number 54, that is the number I had to subtract from the height of the dialog value to get the grid to render without unnecessary scrollbars.
我认为这可能是时间问题,尽管这没有多大意义.网格完全加载后,也许我应该调用一个事件.这样可以确保它正确计算宽度.
I think it may be a timing issue, though this doesn't make a lot of sense. Perhaps I should call an event once the grid is completely loaded. This may ensure it calculates its width correctly.
推荐答案
在某些情况下,jqGrid计算宽度有些不正确.通常,我在网格宽度方面存在问题,但是在某些情况下,在IE6上也存在高度问题.因此,我必须编写一个小的函数来解决该问题.
There are some cases, where jqGrid calculate the width a little incorrect. Mostly I have problems with grid width, but in some cases on IE6 also with the height. So I have to write a small function to fix the problem.
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.在代码中,我测试了scrollWidth > mainWidth
的宽度是否允许增加jqGrid宽度.
In this code "main"
is the id of parent div inside of which the grid will be created. In the code I test (scrollWidth > mainWidth
) whether the width of "main"
allow increasing of jqGrid width.
调用此函数的正确位置是在loadComplete
内部:
Correct place to call this function is inside of loadComplete
:
loadComplete: function() {
var gr = jQuery('#list');
fixGridSize(gr);
}
和"done"
内部,如果使用'columnChooser'
,则使用Query('#list').jqGrid('columnChooser');
and inside of "done"
, if you use 'columnChooser'
if use use Query('#list').jqGrid('columnChooser');
(在此示例中,我也使用'gridResize'
.)
(in this example I use also 'gridResize'
.)
这篇关于在jQueryUI对话框内的jqGrid上正确调用setGridWidth的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!