jqGrid无法在Chrome / Chrome浏览器中正确呈现

时间：2012-05-14 17:58:29

标签： javascript jquery css google-chrome jqgrid

目前使用的是Chrome v19.0.1084.46（官方版本135956）beta-m jqGrid 4.3.2（最新版本）

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

grid

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

  • width
  • autowidth
  • height
  • shrinkToFit
  • scrollOffset - 祝你好运，但没有任何可重复的。

我也只是剥离了基本网格css，认为这可能是我实施的规则......没有运气。

有没有其他人经历过这个和/或找到了解决方案？非常感谢帮助。

8 个答案:

答案 0 :(得分：63)

我今天更新了我的Chrome到版本19，已经重现了问题并做了相应的快速和彻底修复：

我建议更改jqGrid代码的the line 

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

以下

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

The demo使用此修复程序。我在演示中使用的jquery.jqGrid.src.js的固定版本可以获得here。

我在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浏览器中，演示没有水平滚动条，它看起来如下：

enter image description here

将来最好更深入地更改网格宽度的计算，以便不与任何版本号或Web浏览器直接相关。我希望如果在jqGrid的某些地方使用更多jQuery方法$.width和$.outerWidth，那将是可能的。无论如何，我希望上面提到的修复对许多jqGrid用户已经有用了。

更新：我将我的建议发布到trirand为the bug report。

更新2 ：确切地说，代码中有三个位置使用了与上述相同的$.browser.webkit || $.browser.safari构造：inside setGridWidth，inside of getOffset， multiselect列的inside of calculation of the width，inside showHideCol和inside setGridWidth。前三个位置使用isSafari变量。最后两个地方直接使用$.browser.webkit || $.browser.safari。一个人应该替换所有地方的 代码

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

到

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

所以应该在三个地方：

中执行此操作
  1. 在isSafari的定义中（见我原帖）
  2. 在showHideCol
    3. 内
  3. 在setGridWidth
    4. 内

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

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

    结果，您将获得jquery.jqGrid.min-fixed3.js，它将比原始jquery.jqGrid.min.js更小。即使您将评论标题添加到文件中（请参阅modified file），该文件仍会比jquery.jqGrid.min.js的原始版本更小。

    在我bug report和the improvements的一些迭代之后，还有一个版本的修补程序，其中引入了方法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;
}

    见here。如果你更喜欢按照你的方式做到这一点。对于使用isSafari或$.browser.webkit || $.browser.safari（在showHideCol和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。

答案 1 :(得分：3)

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

我刚刚编辑了最小版本

第49行：

取代：

？！

M = b.browser.webkit || b.browser.safari 0：1

使用：

M =（b.browser.webkit || b.browser.safari）及;＆安培; parseFloat（b.browser.version）LT; 536.5？0：！1

感谢您的帮助！

答案 2 :(得分：3)

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

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

似乎有很多变化，但是当你看到实际的代码时，变化会非常快。只有少数源线受到影响。

答案 3 :(得分：3)

Chrome测试版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正在评估为＆lt; 536.5由于数字与文本比较导致补丁无法运行？

请帮忙！

答案 4 :(得分：1)

更新：我的anwswer指的是几个月前在Firefox中发生的类似问题，我建议希望它适用于Chrome 19，但目前Oleg的答案是正确的方法。< / p> 几个月前我和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栏30px）。在这种情况下，没有水平滚动条。注意：此选项与shrinkToFit选项不兼容 - 即如果shrinkToFit设置为false，则忽略forceFit。

答案 5 :(得分：1)

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

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

答案 6 :(得分：1)

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

答案 7 :(得分：0)

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

 return Math.round(testCell) !== 5
相关问题
最新问题