Javascript jqGrid无法在Chrome/Chrome框架中正确渲染

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

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

我在jqGrid上修改了以下属性，试图修复此问题：

• 宽度

• autowidth

• 高度

• shrinkToFit

• scrollOffset

  -这一次运气最好，但没有可重复的内容

我也只剥离了基本的网格css，认为这可能是我制定的一条规则……运气不好

---

是否有其他人经历过这种情况和/或找到了解决方案？非常感谢您的帮助。

更新：我的anwswer提到了几个月前在Firefox中发生的类似问题，我建议希望它能适用于Chrome 19，但目前Oleg的答案是正确的

几个月前，我在FF上遇到了类似的问题，我正在使用ForceFit选项，该选项应完全禁用HSCROL，但正如您所提到的，我仍然会得到它，因此我只是为我的ForceFit网格禁用了HSCROL。几次更新后的FF，它确实停止了发生，目前我的所有网格在Chrome18中都很好，所以希望当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并调整列的宽度，则相邻列（右侧）将调整大小，以保持总网格宽度（例如，将列2的宽度减小30px将使列3的大小增大30px）。在这种情况下，没有水平阴囊。注意：此选项与shrinkToFit选项不兼容-即，如果shrinkToFit设置为false，则forceFit将被忽略。

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

我建议更改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.min.js

。即使将注释头添加到文件中（请参阅），该文件仍会比原始版本的

jquery.jqGrid.min.js

小

在my的一些迭代之后，又有一个版本的补丁引入了方法

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

cellWidth:function（）{
var$testDiv=$（“”），
testCell=$testDiv.appendTo（“正文”）
.查找（“td”）
.width（）；
$testDiv.remove（）；
返回testCell！==5；
}

看。如果你更愿意遵循这种方式，你也可以这样做。在所有使用

isSafari

或

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

（在

showHideCol

和

setGridWidth

中）的地方，您可以使用

$.jgrid.cellWidth（）

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

---

更新4:谷歌Chrome 20使用WebKit 536.11。因此，所有不能使用带有固定宽度计算的jqGrid最后版本的人都应该使用

parseFloat（$.browser.version）Oleg的解决方案对我有效

我刚刚编辑了min版本

第49行：

取代：

m=b.browser.webkit | | b.browser.safari？！0:!一,

与：

m=（b.browser.webkit | | b.browser.safari）和&parseFloat（b.browser.version）Oleg的答案是正确的。但是，如果您使用的是较旧版本的jqGrid，并且希望应用这些修复程序，那么直接从Github上的diff进行更改可能会更容易。我已经使用jqGrid 4.0.0成功地测试了这一点，因此它可能适用于任何4.x系列

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








看起来有很多变化，但是当你看实际的代码时，变化会非常快。只有少数源代码行受到影响。
只是想指出，这可能是由于webkit最终得到解决。基本上，在计算具有固定布局的表的宽度时，它不会考虑边框，我也相信填充

这意味着jqGrid将不正确地计算表的宽度，因为它只计算其内容区域的宽度。因此，删除边框和填充也可以解决问题，但您可能不想这样做。
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，因为数字与文本比较导致补丁无法运行

请帮忙
 我们使用jgGrid 4.3.3，而
cellWidth
没有解决这个问题……为了解决这个问题，我添加了
return parseInt（testCell）！=5;而不是
返回testCell！==5;在
单元格宽度
方法中。也许这不是最好的解决方案，但它对我们很有效：）
在jQGrid 4.5.2和Chrome 59.0.3071.115中，我将grid.base.js中的cellWidth函数更改为：

 return Math.round(testCell) !== 5

不幸的是，它似乎不起作用。演示功能成功地删除了滚动条，但无论
shrinkToFit
的状态如何，内容仍会溢出网格区域。这是不幸的，因为如果Chrome 19发布时这个问题仍然存在，我将与您同舟共济。您能否确认网格在演示页面上是否存在此问题
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;
}

User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 Safari/536.11

 return Math.round(testCell) !== 5