Правильно звоня setGridWidth на jqGrid в jQueryUI Диалоговом окне
У меня есть jQueryUI диалоговое окно (#locDialog) который имеет jqGrid ($grid) в нем. Когда Диалоговое окно открывается (первоначально, но это называют каждый раз, когда это открывается), я хочу $grid изменить размер к размеру $locDialog. Когда я делаю это первоначально, я получаю полосы прокрутки в сетке (не в диалоговом окне).
Если я отлаживаю код, я вижу ширину $grid 677. Так, я звоню setGridWidth() снова и проверка ширина и теперь я имею 659, который составляет на 18 пкс меньше, который является размером области прокрутки для jqGrid (Dun-dun-dun..)
Когда я rezie диалоговое окно, я изменяю размер сетки также, и все счастливо - никакие полосы прокрутки, кроме в случае необходимости.
Мое диалоговое окно init код:
$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 первоначально, он не принимает во внимание область прокрутки 18 пкс.
До волшебного номера 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' .)