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了解决办法? 非常感谢帮助。

我今天更新了我的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 (在showHideColsetGridWidth )可以使用$.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。

奥列格的解决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

谢谢您的帮助!

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

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

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

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

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

请帮忙!

更新:我的问题是指几个月前在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将被忽略。

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

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

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

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

  return Math.round(testCell) !== 5