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

问题描述

目前使用 Chrome v19.0.1084.46 (Official Build 135956) beta-mjqGrid 4.3.2(最新版本)

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

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

• 宽度
• 自动加宽
• 高度
• shr​​inkToFit
• scrollOffset - 祝你好运，但没有什么可重复的.

我也只简化了基本的网格 css，认为这可能是我制定的规则......没有运气.

有没有其他人遇到过这种情况和/或找到了解决方案?非常感谢帮助.

解决方案

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

我建议更改 和 $.outerWidth 在 jqGrid 的某些地方.无论如何，我希望上述修复程序已经对许多 jqGrid 用户有所帮助.

更新:我向 trirand 发布了我的建议 错误报告.

更新 2:确切地说，代码中有三个地方使用了相同的 $.browser.webkit ||$.browser.safari 构造如上所述:setGridWidth 内，内的getOffset，里面的计算multiselect 列的宽度，里面 showHideCol 和 在 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 的固定版本以及所有修复这里.如果你必须使用旧版本的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 的原始版本.

经过我的 错误报告 和改进 还有一个修复版本，其中引入了 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();返回 testCell !== 5;}

请参阅此处.如果您更喜欢遵循这种方式，也可以这样做.在 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.

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 框架中无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！