gpt4 book ai didi

jquery - 在 jQueryUI 对话框内的 jqGrid 上正确调用 setGridWidth

转载 作者:行者123 更新时间:2023-12-03 22:36:44 26 4
gpt4 key购买 nike

我有一个 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。在代码中,我测试(scrollWidth > mainWidth)“main”的宽度是否允许增加jqGrid宽度。

调用此函数的正确位置是在 loadComplete 内部:

loadComplete: function() {
var gr = jQuery('#list');
fixGridSize(gr);
}

并且在“done”内部,如果使用'columnChooser',如果使用Query('#list').jqGrid('columnChooser') ;

(在此示例中,我还使用 'gridResize'。)

关于jquery - 在 jQueryUI 对话框内的 jqGrid 上正确调用 setGridWidth,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2686043/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com