jqGrid在Chrome / Chrome Frame中无法正确呈现 [英] jqGrid does not render correctly in Chrome/Chrome Frame

问题描述

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

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

我已经在jqGrid上使用以下属性来尝试并修复：

• code> width


• autowidth


• code> height


• shrinkToFit


• code> scrollOffset - 这是最好的运气，但没有重复。

've也剥离到基本的网格css只，认为这可能是一个规则，我把到位...没有运气。

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

解决方案

我今天更新了我的Chrome到版本19，已经转录了问题，并做了相应的快速&修正：

我建议您更改和 $。outerWidth 在一些地方的jqGrid。

UPDATED ：我将我的建议发布到trirand作为错误报告。

UPDATED 2 ：完全有三个地方在代码中使用同样 $。browser.webkit || $ .browser.safari 如上所述构造： setGridWidth ， getOffset ，在 multiselect 列的计算中。 3.2 / js / grid.base.js＃L3020rel =nofollow noreferrer> showHideCol 和 setGridWidth 。前三个地方使用 isSafari 变量。最后两个地方使用 $。browser.webkit || $ .browser.safari 。应该用在所有地方代替

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

到

 （$。browser.webkit || $ .browser.safari）&& parseFloat（$。browser.version）< 536.5 
  

isSafari （见我）的定义：

$ b c>

内的 setGridWidth

您可以下载固定版本的 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 。即使您在文件中添加了注释标头（请参阅修改的文件），该文件将仍然小于 jquery.jqGrid.min.js 的原始版本。 p>

对我的错误报告和改进有一个版本的修复其中方法 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）
。宽度（）; 
 $ testDiv.remove（）; 
 return testCell！== 5; 
} 
  

请参阅此处。如果你喜欢遵循的方式，你可以做到这一点。在所有 isSafari 或 $。的地方。browser.webkit || $ .browser.safari （在 showHideCol 和 setGridWidth ），

UPDATED 3 ：今天发布了jqGrid 4.3.3其中包含我上面描述的修复（ cellWidth 方法）。

UPDATED 4： Google Chrome 20使用的是WebKit 536.11。所以每个人不能使用最后版本的jqGrid与固定的宽度计算应该使用 parseFloat（$。browser.version）< 536.11 （或一些关闭）而不是在答案开头描述的 parseFloat（$。browser.version）< 536.5 。 Google Chrome 23 WebKit使用537.11。

Currently using Chrome v19.0.1084.46 (Official Build 135956) beta-m jqGrid 4.3.2 (latest release)

The problem is that no matter the size of my grid, columns, or containing div, a small fraction of my last column gets pushed beyond the edge of the grid, causing horizontal scroll bars to appear, which should not happen. See below:

I've been fiddling with the following attributes on jqGrid to try and fix this:

• width
• autowidth
• height
• shrinkToFit
• scrollOffset - Had the best luck with this one, but nothing repeatable.

I've also stripped down to the basic grid css only, thinking it might have been a rule I put in place...with no luck.

Has anyone else experienced this and/or found a solution to this? Help is much appreciated.

解决方案

I updated today my Chrome to version 19, have reproduced the problem and made the corresponding quick&dirty fix:

I suggest to change the line of jqGrid code

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

to the following

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

The demo use the fix. The fixed version of jquery.jqGrid.src.js which I used in the demo you can get here.

I tested it in 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. In all the web browsers the demo has no horizontal scrollbars and it looks as following:

In the future it would be better to change the calculation of width of the grid more deep to have no direct dependency from any version number or web browser. I hope it will be possible if one would use more jQuery methods $.width and $.outerWidth in some places of jqGrid. In any way I hope that the above described fix would be already helpful for many jqGrid users.

UPDATED: I posted my suggestion to trirand as the bug report.

UPDATED 2: To be exactly there are three places in the code where are used the same $.browser.webkit || $.browser.safari construct as described above: inside setGridWidth, inside of getOffset, inside of calculation of the width of multiselect column, inside showHideCol and inside setGridWidth. The first three places uses isSafari variable. The last two places uses $.browser.webkit || $.browser.safari directly. One should replace in all the places the code

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

to

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

So one should do this in three places:

1. at the definition of the isSafari (see me original post)
2. inside of showHideCol
3. inside of setGridWidth

You can download the fixed version of the jquery.jqGrid.src with all the fixes here. You can make the same changes in the code of jquery.jqGrid.src yourself if you have to use old version of jqGrid. To created minimized version for the production you can use any minimizer which you good know. I use for example Microsoft Ajax Minifier 4.0. Just install it and execute

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

As the result you will get jquery.jqGrid.min-fixed3.js which will be even smaller as original jquery.jqGrid.min.js. Even if you add the comment header to the file (see modified file) the file will be still smaller as original version of jquery.jqGrid.min.js.

After some iterations of my bug report and the improvements there are one more version of the fix where the method cellWidth was introduced:

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;
}

See here. If you prefer to follow the way you can do this also. In the case in all places where isSafari or $.browser.webkit || $.browser.safari (in showHideCol and setGridWidth) are used you can use $.jgrid.cellWidth() instead.

UPDATED 3: Today was published jqGrid 4.3.3 which contains the fix which I described above (the cellWidth method). So I recommend all to use the new version.

UPDATED 4: Google Chrome 20 uses WebKit 536.11. So everybody who can't use the last version of jqGrid with the fixed calculation of the width should use parseFloat($.browser.version)<536.11 (or some close) instead of parseFloat($.browser.version)<536.5 described at the beginning of the answer. Google Chrome 23 WebKit uses 537.11.

这篇关于jqGrid在Chrome / Chrome Frame中无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！