javascript - jqGrid 在 Chrome/Chrome Frame 中无法正确渲染

Question

当前使用 Chrome v19.0.1084.46(官方版本 135956)beta-m jqGrid 4.3.2(最新版本)

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

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

• 宽度
• 自动宽度
• 高度
• shr​​inkToFit
• scrollOffset - 在这方面运气最好，但没有可重复的。

我还只保留了基本的网格 CSS，认为这可能是我制定的规则......但没有运气。

还有其他人经历过这种情况和/或找到解决方案吗？非常感谢您的帮助。

Answer 1

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

我建议更改the line jqGrid代码

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 中进行了测试。在所有网络浏览器中，演示都没有水平滚动条，如下所示:

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

更新:我向 trirand 发布了我的建议:the bug report .

更新2:确切地说，代码中有三个地方使用了相同的$.browser.webkit || $.browser.safari如上所述构造:inside setGridWidth , inside of getOffset , inside of calculation of the width的multiselect列，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. setGridWidth内

您可以下载 jquery.jqGrid.src 的修复版本完成所有修复here 。您可以在 jquery.jqGrid.src 的代码中进行相同的更改如果您必须使用旧版本的 jqGrid，请自行解决。要为生产创建最小化版本，您可以使用您熟悉的任何最小化器。例如，我使用 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 更小。即使您将注释 header 添加到文件中(请参阅 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。