Chrome / Chrome Frame中jqGrid无法正确显示

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

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

我已经摆弄jqGrid上的以下属性来尝试和解决这个问题：

• width
• autowidth
• height
• shrinkToFit
• scrollOffset – 有这个最好的运气，但没有可重复的。

我也已经剥离了基本的网格CSS，认为这可能是一个规则，我已经到位…没有运气。

有没有其他人经历过这个和/或find了解决办法？ 非常感谢帮助。

Answer 1

我今天更新了我的Chrome版本19，已经转载了这个问题，并作出了相应的快速和肮脏的修复：

我build议改变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可以在这里获得。

我testing了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浏览器中，演示没有水平滚动条，如下所示：

将来最好将网格宽度的计算更深入一些，以免与任何版本号或网页浏览器有直接的依赖关系。 我希望能够在jqGrid的某些地方使用更多的jQuery方法$ .width和$ .outerWidth。 以任何方式，我希望上面描述的修复对许多jqGrid用户已经有所帮助。

更新 ：我张贴我的build议，作为bug报告 。

更新2 ：准确地说，有三个地方在代码中使用相同的$.browser.webkit || $.browser.safari $.browser.webkit || $.browser.safari构造如上所述： 在setGridWidth里面 ， 在getOffset 里面，计算 multiselect列的宽度 ， 在showHideCol 里面和setGridWidth里面 。 前三个地方使用的isSafarivariables。 最后两个地方使用$.browser.webkit || $.browser.safari $.browser.webkit || $.browser.safari直接。 应该在所有的地方代替代码

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

至

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

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

1. 在isSafari的定义（见我原来的post）
2. 在showHideCol里面
3. 在setGridWidth

您可以在这里下载所有修复程序的固定版本的jquery.jqGrid.src 。 如果您必须使用旧版本的jqGrid，您可以自己对jquery.jqGrid.src的代码进行相同的更改。 要为生产创build最小化版本，您可以使用任何你知道的最小化器。 我使用例如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 。 即使将注释标题添加到文件中（请参阅修改后的文件 ），该文件仍然会更小，为原始版本的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; } 

看到这里 。 如果你喜欢按照你的方式，也可以这样做。 在所有地方isSafari或$.browser.webkit || $.browser.safari $.browser.webkit || $.browser.safari （在showHideCol和setGridWidth ）可以使用$.jgrid.cellWidth()来代替。

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

更新4： Google Chrome 20使用WebKit 536.11。 所以每个不能使用jqGrid的最后一个版本的固定宽度的计算应该使用parseFloat($.browser.version)<536.11 （或一些closures）而不是parseFloat($.browser.version)<536.5答案的开始。 Google Chrome 23 WebKit使用537.11。

Answer 2

奥列格的解决scheme为我工作。

我刚刚编辑了最小版本

第49行：

取代：

？！米= b.browser.webkit || b.browser.safari 0：1

有：

M =（b.browser.webkit || b.browser.safari）&& parseFloat（b.browser.version）<536.5？0：！1

谢谢您的帮助！

Answer 3

奥列格的回答是正确的。 但是，如果您使用的是旧版本的jqGrid，并且想要应用这些修补程序，则直接从Github上的差异中进行更改可能会更容易。 我已经使用jqGrid 4.0.0成功地testing过了，所以推测它可以在任何4.x系列上运行。

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

• 8c56dc8
• b50b55f
• cf26b2c
• 8d7eff0
• 46a14ce

看起来好像很多变化，但是当你看到实际的代码时，变化将会非常快。 只有几条源代码行受到影响。

Answer 4

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由于数字与文本比较导致修补程序不能运作？

请帮忙！

Answer 5

更新：我的问题是指几个月前在Firefox中发生的类似问题，我build议希望它能在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，并调整列的宽度，则相邻列（右侧）将resize，以便保持整个网格宽度（例如，将第2列的宽度减less30px将增加第3列的大小） 30像素）。 在这种情况下，没有水平滚动条。 注意：这个选项与shrinkToFit选项不兼容，即如果shrinkToFit设置为false，forceFit将被忽略。

Answer 6

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

这意味着，jqGrid会错误地计算表的宽度，只是它的内容区域的宽度。 所以删除边框和填充也应该解决这个问题，但是你可能不想这样做。

Answer 7

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

Answer 8

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

  return Math.round(testCell) !== 5