Иногда из-за разных проблем размер сетки будет неверно рассчитан, и у одной будет горизонтальная полоса прокрутки. Проблема в основном основана на
- некоторые изменения в CSS, которые унаследованы от jqGrid без изменения параметра
cellLayout в jqGrid
- различная реализация наследования стилей CSS в разных браузерах
- ошибки в алгоритме расчета ширины jqGrid. Размер сетки будет некорректно отрегулирован после заполнения сетки данными.
В моих проектах ASP.NET MVC в основном ширина столбцов сетки была на 5 пикселей меньше необходимой, и общая ширина сетки должна быть увеличена до 5 * colNumbers.
Проблемы с неправильной шириной сетки трудно отладить и исправить. Поэтому некоторое время назад я написал практический обходной путь, который я впервые предложил в своем ответе Правильный вызов setGridWidth для jqGrid в диалоге jQueryUI . Идея обходного решения заключается в сравнении размера сетки со свойством scrollWidth той части сетки, которая будет прокручиваться. Если полоса прокрутки существует и размер сетки меньше, чем размер элемента страницы, который содержит сетку, то мы просто увеличиваем ширину сетки и полоса прокрутки исчезает.
Например, у нас есть следующий фрагмент HTML с таблицей jqGrid
<div id="main">
<table id="grid"><tr><td/></tr></table>
<div id="pager"/>
</div>
тогда схема, как вы можете исправить проблему горизонтальной прокрутки, может быть следующей:
jQuery(document).ready(function () {
var fixGridWidth = function (grid, mainBlockSelector) {
// fix wrong width calculation 5 pixel per column
//var gview = jQuery("#gview_" + grid[0].id); // like "#gview_grid"
//var gview = grid.parent().parent().parent();
var gviewDomElement = grid[0].parentNode.parentNode.parentNode;
var gviewScrollWidth = gviewDomElement.scrollWidth;
var mainWidth = jQuery(mainBlockSelector).width();
var gridScrollWidth = grid[0].scrollWidth;
var htable = jQuery('table.ui-jqgrid-htable', gviewDomElement);
var scrollWidth = gridScrollWidth;
if (htable.length > 0) {
var hdivScrollWidth = htable[0].scrollWidth;
if ((gridScrollWidth < hdivScrollWidth)) {
// max (gridScrollWidth, hdivScrollWidth)
scrollWidth = hdivScrollWidth;
}
}
if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
// min (scrollWidth, mainWidth)
var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth;
// if the grid has no data, gridScrollWidth can be less
// then hdiv[0].scrollWidth
if (newGridWidth != gviewScrollWidth) {
grid.jqGrid("setGridWidth", newGridWidth);
}
}
};
var grid = jQuery("#grid");
grid.jqGrid({
// ... all like allways
loadComplete: function(data) {
// do all what you need and then at the end fix the wigth:
fixGridWidth(grid,"#main");
},
// ... other jqGrid options
};
});
В начале кода я использую структуру сетки, которая состоит из различных элементов div и таблиц поверх основной таблицы сетки с данными. Эту структуру вы можете увидеть с помощью инструментов разработчика IE8 или Chrome, Firebug других инструментов. Большую часть этой структуры я описываю в своих старых ответах на другие вопросы jqGrid и т. Д. Использование ячеек нижнего колонтитула Jquery и «наследует» CSS от ячеек в основной сетке .
Попробуйте использовать этот подход. Он не ищет причину проблемы с прокруткой, но, тем не менее, может решить большинство проблем с горизонтальной прокруткой.