Javascript jqGrid 在 Chrome/Chrome 框架中无法正确呈现

jqGrid does not render correctly in Chrome/Chrome Frame

提问by IronicMuffin

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

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

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:

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

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

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

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

• width
• autowidth
• height
• shrinkToFit
• scrollOffset- 最好的运气，但没有什么可重复的。

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.

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

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

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

回答by Oleg

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

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

I suggest to change the lineof jqGrid code

我建议改变线路的jqGrid的代码

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 demouse the fix. The fixed version of jquery.jqGrid.src.jswhich I used in the demo you can get here.

演示使用修复程序。jquery.jqGrid.src.js我在演示中使用的固定版本，您可以在此处获取。

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:

我在 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), .1216 .Firefox .1162 在所有 Web 浏览器中，演示都没有水平滚动条，如下所示：

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 $.widthand $.outerWidthin some places of jqGrid. In any way I hope that the above described fix would be already helpful for many jqGrid users.

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

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

更新：我将我的建议作为错误报告发布给 trirand 。

UPDATED 2: To be exactly there are three places in the code where are used the same $.browser.webkit || $.browser.safariconstruct as described above: inside setGridWidth, inside of getOffset, inside of calculation of the widthof multiselectcolumn, inside showHideColand inside setGridWidth. The first three places uses isSafarivariable. The last two places uses $.browser.webkit || $.browser.safaridirectly. One should replace in all the placesthe code

更新2：为了刚好有在代码三个地方使用相同的$.browser.webkit || $.browser.safari构建体如上述：内部setGridWidth，的getOffset的内部，宽度的计算的内部的multiselect柱，内部showHideCol和内部setGridWidth。前三个地方使用isSafari变量。后两个地方$.browser.webkit || $.browser.safari直接使用。应该在所有地方替换代码

$.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

1. 在isSafari（见我原帖）的定义
2. 代替 showHideCol
3. 代替 setGridWidth

You can download the fixed version of the jquery.jqGrid.srcwith all the fixes here. You can make the same changes in the code of jquery.jqGrid.srcyourself 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

您可以jquery.jqGrid.src在此处下载包含所有修复程序的固定版本。jquery.jqGrid.src如果您必须使用旧版本的 jqGrid，您可以在自己的代码中进行相同的更改。要为生产创建最小化版本，您可以使用任何您熟悉的最小化程序。我使用例如 Microsoft Ajax Minifier 4.0。只需安装并执行

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

As the result you will get jquery.jqGrid.min-fixed3.jswhich 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.

结果你会得到jquery.jqGrid.min-fixed3.js，它会比原来的更小jquery.jqGrid.min.js。即使您将注释标题添加到文件中（请参阅修改后的文件），该文件仍将比jquery.jqGrid.min.js.

After some iterations of my bug reportand the improvementsthere are one more version of the fix where the method cellWidthwas introduced:

在对我的错误报告和改进进行了一些迭代之后，还有一个版本的修复程序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;
}

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

见这里。如果您更喜欢遵循这种方式，也可以这样做。在所有使用isSafarior $.browser.webkit || $.browser.safari(in showHideColand setGridWidth) 的地方，您都可以$.jgrid.cellWidth()改用。

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

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

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.5described at the beginning of the answer. Google Chrome 23 WebKit uses 537.11.

更新 4：Google Chrome 20 使用 WebKit 536.11。因此，不能使用具有固定宽度计算的最新版本的 jqGrid 的每个人都应该使用parseFloat($.browser.version)<536.11（或接近）而不是parseFloat($.browser.version)<536.5答案开头的描述。Google Chrome 23 WebKit 使用 537.11。

回答by johnmac

Chrome beta 20.0.1132.11 is out and reports the following:

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

I am guessing 536.11 is evaluating as < 536.5 due to numeric vs text comparison causing the patch not to be operative?

我猜 536.11 评估为 < 536.5 由于数字与文本比较导致补丁不起作用？

Please help!

请帮忙！

回答by user1399332

Oleg's solution worked for me.

奥列格的解决方案对我有用。

I just edited the min version

我刚刚编辑了最小版本

line 49:

第 49 行：

replaced:

替换：

m=b.browser.webkit||b.browser.safari?!0:!1

m=b.browser.webkit||b.browser.safari?!0:!1

with:

和：

m=(b.browser.webkit||b.browser.safari)&&parseFloat(b.browser.version)<536.5?!0:!1

m=(b.browser.webkit||b.browser.safari)&&parseFloat(b.browser.version)<536.5?!0:!1

Thanks for the help!

谢谢您的帮助！

回答by Justin Ethier

Oleg's answer is correct. However, if you are using an older version of jqGrid and want to apply these fixes, it may be easier to take the changes directly from the diffs on Github. I have tested this successfully using jqGrid 4.0.0, so presumably it will work on any of the 4.x series.

奥列格的回答是正确的。但是，如果您使用旧版本的 jqGrid 并希望应用这些修复程序，则直接从 Github 上的差异中获取更改可能更容易。我已经使用 jqGrid 4.0.0 成功地测试了这个，所以大概它可以在任何 4.x 系列上工作。

Just start with the first diff and apply each of them in order. This will add the cellWidthfunction and make all of the necessary changes across the jquery.jqGrid.src.js file. Then you can use the Google closure compiler if you want to create a minified version:

只需从第一个差异开始并按顺序应用它们。这将添加cellWidth函数并在 jquery.jqGrid.src.js 文件中进行所有必要的更改。然后，如果您想创建缩小版本，则可以使用 Google 闭包编译器：

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

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

It seems like a lot of changes, but when you look at the actual code the changes will go very quickly. Only a few source lines are affected.

看起来有很多变化，但是当您查看实际代码时，这些变化会很快发生。只有少数源代码行受到影响。

回答by Nadir Muzaffar

Just wanted to point out that this is likely due to webkit issue 78412finally being resolved. Essentially it would not account for borders, and I believe the padding as well, when calculating the width of tables with a fixed layout.

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

This meant that jqGrid would incorrectly calculate the width of the table as only the width of its content area. So removing the borders and padding should also solve the problem, but you probably wouldn't want to do that.

这意味着 jqGrid 会错误地将表格的宽度计算为其内容区域的宽度。因此删除边框和填充也应该可以解决问题，但您可能不想这样做。

回答by Alex Dn

We use jgGrid 4.3.3 and cellWidthdidn't solve the issue...in order to solve it, I added the line return parseInt(testCell) !== 5;instead return testCell !== 5;in cellWidthmethod. Maybe it's not the best solution, but it works for us :)

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

回答by DisplayName

Update:My anwswer refers to a similar issue that happened in Firefox a few months ago and I suggested in hopes that it would work for Chrome 19, but currently Oleg's answer is the correct approach.

更新：我的回答指的是几个月前在 Firefox 中发生的类似问题，我建议希望它适用于 Chrome 19，但目前 Oleg 的答案是正确的方法。

I had a similar issue a few months ago with FF and I was using the ForceFit option which should disable the HScroll entirely but like you mentioned I would still get it so I just disabled the HScroll for my forcefit grids. A few updates later of FF, it did stop happening, and currently all of my grids are fine in Chrome 18 so hopefully it will not be an issue when 19 is released.

几个月前我在 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' });
    }
}

Force Fit

力配合

If set to true, and resizing the width of a column, the adjacent column (to the right) will resize so that the overall grid width is maintained (e.g., reducing the width of column 2 by 30px will increase the size of column 3 by 30px). In this case there is no horizontal scrolbar. Note: this option is not compatible with shrinkToFit option - i.e if shrinkToFit is set to false, forceFit is ignored.

如果设置为 true，并调整列的宽度，则相邻列（右侧）将调整大小以保持整个网格宽度（例如，将第 2 列的宽度减少 30px 将增加第 3 列的大小30 像素）。在这种情况下，没有水平滚动条。注意：此选项与shrinkToFit 选项不兼容——即如果shrinkToFit 设置为false，则忽略forceFit。

回答by alsco77

In jQGrid 4.5.2 with Chrome 59.0.3071.115 I changed the cellWidth function in grid.base.js to:

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

 return Math.round(testCell) !== 5