Question

我正在使用jqGrid并出现水平滚动条。我怎样才能阻止这种情况发生？

jqGrid with scrollbar

Answer 1

有时由于不同的问题，网格大小计算错误，并且有一个水平滚动条。问题主要基于

继承到jqGrid而不更改jqGrid的cellLayout参数的CSS中的一些更改
不同浏览器中CSS样式的不同继承实现
jqGrid宽度计算算法中的错误。在使用数据填充网格后，网格大小将无法正确调整。

在我的ASP.NET MVC项目中，我主要将网格列的宽度减少到需要的5个像素，并且总网格宽度应该增加到5 * colNumbers。

网格宽度错误的问题难以调试和修复。所以前段时间我写了一个实用的解决方法，我在第一次回答Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog时提出了建议。解决方法的想法是将网格的大小与将要滚动的网格部分的scrollWidth属性进行比较。如果存在滚动条并且网格的大小小于包含网格的页面元素的大小，那么我们只增加网格宽度并且滚动条消失。

例如，我们有以下带有jqGrid表的HTML片段

<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 get th and thead using Jquery和jqGrid footer cells “inherits” CSS from cells in the main grid的旧答案中描述了此结构的大部分内容。

尝试使用此方法。它不会搜索滚动问题的原因，但它可以解决水平滚动的最大问题。

Answer 2

如果您仍然无法使用和，如果您更改了css，请尝试

    'cellLayout' =>  21,

Answer 3

我尝试了很多修复水平滚动条问题的解决方案，但并没有完全成功。最适合我的最佳和最简单的解决方案（在所有浏览器上测试）：

loadComplete: function(data) {
   fixGridWidth($("#grid"));
}

function fixGridWidth(grid) {
    grid.setGridWidth($(window).width());
}

如何防止滚动条在jqGrid中显示？

3 个答案: