52

目前使用 Chrome v19.0.1084.46 (Official Build 135956) beta-m jqGrid 4.3.2 (最新版本)

问题是，无论我的网格、列或包含 div 的大小，我最后一列的一小部分被推到网格边缘之外，导致出现水平滚动条，这是不应该发生的。见下文：

网格

我一直在摆弄 jqGrid 上的以下属性来尝试解决这个问题：

  • width
  • autowidth
  • height
  • shrinkToFit
  • scrollOffset- 这一次运气最好，但没有什么可重复的。

我也只精简到基本的网格 css，认为这可能是我制定的规则......没有运气。

有没有其他人经历过这个和/或找到解决这个问题的方法？非常感谢您的帮助。

4

8 回答 8

64

我今天将我的 Chrome 更新到版本 19，重现了该问题并进行了相应的快速修复：

我建议更改jqGrid 代码行

isSafari = $.browser.webkit || $.browser.safari ? true : false;

到以下

isSafari = ($.browser.webkit || $.browser.safari) &&
    parseFloat($.browser.version)<536.5 ? true : false; // Chrome < version 19

该演示使用该修复程序。我在演示中使用的固定版本jquery.jqGrid.src.js你可以在这里找到。

我在 IE9 (v9.0.8112.16421)、IE8 (8.0.6001.18702CO)、Chrome 18.0.125.168、Chrome 19.0.1084.46、Safari 5.1.7 (7534.57.2)、Firefox 12、Opera 11.62 中对其进行了测试。在所有 Web 浏览器中，演示都没有水平滚动条，如下所示：

在此处输入图像描述

将来最好将网格宽度的计算更改得更深，使其不直接依赖于任何版本号或 Web 浏览器。我希望在jqGrid的某些地方使用更多的 jQuery 方法$.width和$.outerWidth是可能的。无论如何，我希望上述修复已经对许多 jqGrid 用户有所帮助。

更新：我将我的建议作为错误报告发布给 trirand 。

更新2：确切地说，代码中有三个地方使用了与$.browser.webkit || $.browser.safari上述相同的构造：在 setGridWidth内部、在 getOffset内部、在计算列宽度内部multiselect、在 showHideCol 内部和在 setGridWidth 内部。前三个地方使用isSafari变量。最后两个地方$.browser.webkit || $.browser.safari直接使用。应该在所有地方替换代码

$.browser.webkit||$.browser.safari

到

($.browser.webkit || $.browser.safari) && parseFloat($.browser.version)<536.5

所以应该在三个地方做到这一点：

  1. 在isSafari（见我原来的帖子）的定义
  2. 代替showHideCol
  3. 代替setGridWidth

您可以在此处jquery.jqGrid.src下载包含所有修复程序的固定版本。如果您必须使用旧版本的 jqGrid，您可以对自己的代码进行相同的更改。要为生产创建最小化版本，您可以使用您熟知的任何最小化器。例如，我使用 Microsoft Ajax Minifier 4.0。只需安装并执行jquery.jqGrid.src

AjaxMin.exe jquery.jqGrid.src-fixed3.js -o jquery.jqGrid.min-fixed3.js

结果你会得到jquery.jqGrid.min-fixed3.js，它会比 original 更小jquery.jqGrid.min.js。即使您将注释标题添加到文件中（请参阅修改后的文件），该文件仍将比原始版本的jquery.jqGrid.min.js.

在我的错误报告和改进的一些迭代之后，还有一个cellWidth引入该方法的修复版本：

cellWidth : function () {
    var $testDiv = $("<div class='ui-jqgrid' style='left:10000px'><table class='ui-jqgrid-btable' style='width:5px;'><tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>"),
        testCell = $testDiv.appendTo("body")
            .find("td")
            .width();
        $testDiv.remove();
        return testCell !== 5;
}

见这里。如果您更喜欢遵循这种方式，您也可以这样做。在所有使用isSafarior $.browser.webkit || $.browser.safari(in showHideColand setGridWidth) 的地方，您都可以使用$.jgrid.cellWidth()。

更新 3：今天发布了 jqGrid 4.3.3，其中包含我上面描述的修复（cellWidth方法）。所以我建议大家使用新版本。

更新 4： Google Chrome 20 使用 WebKit 536.11。因此，不能使用宽度固定计算的 jqGrid 最新版本的每个人都应该使用parseFloat($.browser.version)<536.11（或接近）而不是parseFloat($.browser.version)<536.5在答案开头描述。Google Chrome 23 WebKit 使用 537.11。

于 2012-05-16T15:40:15.070 回答
3

奥列格的解决方案对我有用。

我刚刚编辑了最小版本

第 49 行：

替换：

m=b.browser.webkit||b.browser.safari?!0:!1

和：

m=(b.browser.webkit||b.browser.safari)&&parseFloat(b.browser.version)<536.5?!0:!1

谢谢您的帮助！

于 2012-05-16T18:15:28.057 回答
3

奥列格的回答是正确的。但是，如果您使用的是旧版本的 jqGrid 并希望应用这些修复，则直接从 Github 上的差异中获取更改可能更容易。我已经使用 jqGrid 4.0.0 成功地对此进行了测试，所以它可能适用于任何 4.x 系列。

只需从第一个差异开始并按顺序应用它们。这将添加cellWidth函数并对 jquery.jqGrid.src.js 文件进行所有必要的更改。然后，如果要创建缩小版本，可以使用 Google 闭包编译器：

看起来有很多变化，但是当您查看实际代码时，变化会很快发生。只有少数源代码行受到影响。

于 2012-05-18T13:42:30.760 回答
3

Chrome beta 20.0.1132.11 已经发布，报告如下：

User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 Safari/536.11

我猜 536.11 评估为 < 536.5，因为数字与文本比较导致补丁无法运行？

请帮忙！

于 2012-05-24T10:16:28.017 回答
1

更新：我的回答是指几个月前在 Firefox 中发生的类似问题，我建议希望它适用于 Chrome 19，但目前 Oleg 的回答是正确的方法。

几个月前我在 FF 上遇到了类似的问题，我正在使用 ForceFit 选项，它应该完全禁用 HScroll，但就像你提到的那样，我仍然会得到它，所以我只是为我的 forcefit 网格禁用了 HScroll。FF 之后的一些更新，它确实停止了，目前我所有的网格在 Chrome 18 中都很好，所以希望在 19 发布时它不会成​​为问题。

//remove HScroll
function jqGridDisableHScroll(gridid) {
    //if columns are force fit all columns will always fit on screen.
    if ($('#' + gridid).jqGrid('getGridParam', 'forceFit')) {
        var gridview = $('#gview_' + gridid);
        $('.ui-jqgrid-bdiv', gridview).css({ 'overflow-x': 'hidden' });
    }
}

强制配合

如果设置为 true 并调整列的宽度，则相邻列（右侧）将调整大小以保持整体网格宽度（例如，将第 2 列的宽度减少 30px 将使第 3 列的大小增加30 像素）。在这种情况下，没有水平滚动条。注意：此选项与 shrinkToFit 选项不兼容 - 即，如果将 shrinkToFit 设置为 false，则忽略 forceFit。

于 2012-05-14T18:31:32.050 回答
1

只是想指出这可能是由于 webkit问题 78412最终得到解决。在计算具有固定布局的表格的宽度时，基本上它不会考虑边界，并且我相信填充也是如此。

这意味着 jqGrid 会错误地将表格的宽度计算为仅其内容区域的宽度。因此删除边框和填充也应该可以解决问题，但您可能不想这样做。

于 2012-05-22T03:25:37.067 回答
1

我们使用 jgGrid 4.3.3 并cellWidth没有解决问题...为了解决它，我在方法return parseInt(testCell) !== 5;中添加了该行。也许这不是最好的解决方案，但它对我们有用:)return testCell !== 5;cellWidth

于 2012-08-20T15:45:05.647 回答
0

在带有 Chrome 59.0.3071.115 的 jQGrid 4.5.2 中，我将 grid.base.js 中的 cellWidth 函数更改为：

 return Math.round(testCell) !== 5
于 2017-08-08T13:03:32.400 回答