在jQueryUI对话框内的jqGrid上正确调用setGridWidth
我有一个jQueryUI对话框（ #locDialog ），里面有一个jqGrid（ $grid ）。 当对话框打开时（最初，但只要打开就会调用它），我希望$gridresize为$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 ：
loadComplete: function() { var gr = jQuery('#list'); fixGridSize(gr); }
如果使用'columnChooser'如果使用使用Query('#list').jqGrid('columnChooser');
（在这个例子中我也使用'gridResize' 。）