jQuery 在 jQueryUI 对话框内的 jqGrid 上正确调用 setGridWidth
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2686043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog
提问by Dan
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 $gridto resize to the size of the $locDialog. When I do this initially, I get scrollbars inside the grid (not inside the dialog).
我有一个 jQueryUI 对话框 ( #locDialog)，里面有一个 jqGrid ( $grid)。当对话框打开时（最初，但每次打开时都会调用它），我希望将$grid调整为$locDialog. 当我最初这样做时，我会在网格内（而不是在对话框内）获得滚动条。
If I debug the code, I see the width of the $gridis 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..)
如果我调试代码，我看到的宽度$grid是 677。所以，我setGridWidth()再次调用并检查宽度，现在我有 659，少 18px，这是 jqGrid (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);
}
});
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.
我很好奇是否有人以前见过这个。真的，如果我一开始有不必要的滚动条，这并不是世界末日，但奇怪的是，当我最初调用 setGridWidth 时，它没有考虑 18px 的滚动区域。
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.
至于神奇的数字 54，这是我必须从对话框值的高度中减去的数字，以使网格在没有不必要的滚动条的情况下呈现。
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.
我认为这可能是一个时间问题，尽管这没有多大意义。也许我应该在网格完全加载后调用一个事件。这可以确保它正确计算其宽度。
回答by Oleg
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.
在某些情况下，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);
};
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.
在此代码中"main"是将在其中创建网格的父 div 的 id。在代码中我测试 ( scrollWidth > mainWidth) 的宽度是否"main"允许增加 jqGrid 宽度。
Correct place to call this function is inside of loadComplete:
调用此函数的正确位置是在以下位置loadComplete：
loadComplete: function() {
var gr = jQuery('#list');
fixGridSize(gr);
}
and inside of "done", if you use 'columnChooser'if use use Query('#list').jqGrid('columnChooser');
和里面"done"，如果你使用'columnChooser'如果使用使用Query('#list').jqGrid('columnChooser');
(in this example I use also 'gridResize'.)
（在这个例子中，我也使用'gridResize'.）
