Правильный вызов setGridWidth для jqGrid в диалоге jQueryUI
У меня есть диалог 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, то это число, которое мне пришлось вычесть из высоты диалогового значения, чтобы сетка отображалась без ненужных полос прокрутки.
Я думаю, что это может быть проблема времени, хотя это не имеет большого смысла. Возможно, мне следует вызвать событие, когда сетка полностью загружена. Это может гарантировать, что он вычисляет свою ширину правильно.
1 ответ
В некоторых случаях 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, внутри которого будет создана сетка. В коде я тестирую (scrollWidth > mainWidth
) ли ширина "main"
разрешить увеличение ширины jqGrid.
Правильное место для вызова этой функции находится внутри loadComplete
:
loadComplete: function() {
var gr = jQuery('#list');
fixGridSize(gr);
}
и внутри "done"
, если вы используете 'columnChooser'
если использовать Query('#list').jqGrid('columnChooser');
(в этом примере я использую также 'gridResize'
.)