jqGrid无法在Chrome/Chrome浏览器中正确呈现

Iro*_*fin 51 javascript css jquery google-chrome jqgrid

目前正在使用Chrome v19.0.1084.46(官方构建135956)beta-m jqGrid 4.3.2(最新版本)

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

格

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

  • width
  • autowidth
  • height
  • shrinkToFit
  • scrollOffset - 祝你好运,但没有什么可重复的.

我也只是剥离了基本网格css,认为这可能是我实施的规则......没有运气.

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

Ole*_*leg 63

我今天更新了我的Chrome到版本19,重现了问题并做了相应的快速和脏修复:

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

isSafari = $.browser.webkit || $.browser.safari ? true : false;
Run Code Online (Sandbox Code Playgroud)

以下

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

该演示使用该修复程序.jquery.jqGrid.src.js我在演示中使用的固定版本可以在这里找到.

我在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浏览器中,演示没有水平滚动条,它看起来如下所示:

在此输入图像描述

将来最好更深入地更改网格宽度的计算,以便与任何版本号或Web浏览器没有直接依赖关系.我希望如果在jqGrid的某些地方使用更多jQuery方法$ .width$ .outerWidth,那将是可能的.无论如何,我希望上面提到的修复对许多jqGrid用户已经有用了.

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

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

$.browser.webkit||$.browser.safari
Run Code Online (Sandbox Code Playgroud)

($.browser.webkit || $.browser.safari) && parseFloat($.browser.version)<536.5
Run Code Online (Sandbox Code Playgroud)

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

  1. 在定义中isSafari(见我原帖)
  2. 代替 showHideCol
  3. 代替 setGridWidth

您可以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
Run Code Online (Sandbox Code Playgroud)

结果你会得到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;
}
Run Code Online (Sandbox Code Playgroud)

看到这里.如果你更喜欢按照你的方式做到这一点.在所有使用isSafari$.browser.webkit || $.browser.safari(showHideColsetGridWidth)的地方,您可以使用$.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.

  • @ user648929:我无法调试图片!要在你的情况下进行新的修复,我需要有*重现问题的演示*.您应该发布**JavaScript代码**来重现问题. (2认同)