Chrome / Chrome Frame中jqGrid无法正确显示
目前使用Chrome v19.0.1084.46(官方Build 135956)beta-m jqGrid 4.3.2(最新版本)
问题是无论我的网格,列或包含div的大小,我的最后一列的一小部分被推到网格的边缘之外,导致水平滚动条出现,这不应该发生。 见下文:
我已经摆弄jqGrid上的以下属性来尝试和解决这个问题:
width
-
autowidth
-
height
-
shrinkToFit
-
scrollOffset
– 有这个最好的运气,但没有可重复的。
我也已经剥离了基本的网格CSS,认为这可能是一个规则,我已经到位…没有运气。
有没有其他人经历过这个和/或find了解决办法? 非常感谢帮助。
我今天更新了我的Chrome版本19,已经转载了这个问题,并作出了相应的快速和肮脏的修复:
我build议改变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.src.js
可以在这里获得。
我testing了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浏览器中,演示没有水平滚动条,如下所示:
将来最好将网格宽度的计算更深入一些,以免与任何版本号或网页浏览器有直接的依赖关系。 我希望能够在jqGrid的某些地方使用更多的jQuery方法$ .width和$ .outerWidth。 以任何方式,我希望上面描述的修复对许多jqGrid用户已经有所帮助。
更新 :我张贴我的build议,作为bug报告 。
更新2 :准确地说,有三个地方在代码中使用相同的$.browser.webkit || $.browser.safari
$.browser.webkit || $.browser.safari
构造如上所述: 在setGridWidth里面 , 在getOffset 里面,计算 multiselect
列的宽度 , 在showHideCol 里面和setGridWidth里面 。 前三个地方使用的isSafari
variables。 最后两个地方使用$.browser.webkit || $.browser.safari
$.browser.webkit || $.browser.safari
直接。 应该在所有的地方代替代码
$.browser.webkit||$.browser.safari
至
($.browser.webkit || $.browser.safari) && parseFloat($.browser.version)<536.5
所以应该在三个地方做到这一点:
- 在
isSafari
的定义(见我原来的post) - 在
showHideCol
里面 - 在
setGridWidth
您可以在这里下载所有修复程序的固定版本的jquery.jqGrid.src
。 如果您必须使用旧版本的jqGrid,您可以自己对jquery.jqGrid.src
的代码进行相同的更改。 要为生产创build最小化版本,您可以使用任何你知道的最小化器。 我使用例如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") .width(); $testDiv.remove(); return testCell !== 5; }
看到这里 。 如果你喜欢按照你的方式,也可以这样做。 在所有地方isSafari
或$.browser.webkit || $.browser.safari
$.browser.webkit || $.browser.safari
(在showHideCol
和setGridWidth
)可以使用$.jgrid.cellWidth()
来代替。
更新3 :今天发布了jqGrid 4.3.3,其中包含我上面描述的修复( cellWidth
方法)。 所以我build议所有使用新版本。
更新4: Google Chrome 20使用WebKit 536.11。 所以每个不能使用jqGrid的最后一个版本的固定宽度的计算应该使用parseFloat($.browser.version)<536.11
(或一些closures)而不是parseFloat($.browser.version)<536.5
答案的开始。 Google Chrome 23 WebKit使用537.11。
奥列格的解决scheme为我工作。
我刚刚编辑了最小版本
第49行:
取代:
?!米= b.browser.webkit || b.browser.safari 0:1
有:
M =(b.browser.webkit || b.browser.safari)&& parseFloat(b.browser.version)<536.5?0:!1
谢谢您的帮助!
奥列格的回答是正确的。 但是,如果您使用的是旧版本的jqGrid,并且想要应用这些修补程序,则直接从Github上的差异中进行更改可能会更容易。 我已经使用jqGrid 4.0.0成功地testing过了,所以推测它可以在任何4.x系列上运行。
从第一个差异开始,并按顺序应用每个差异。 这将添加cellWidth
函数,并对jquery.jqGrid.src.js文件进行所有必要的更改。 那么如果你想创build一个缩小版本,你可以使用Google闭包编译器:
- 8c56dc8
- b50b55f
- cf26b2c
- 8d7eff0
- 46a14ce
看起来好像很多变化,但是当你看到实际的代码时,变化将会非常快。 只有几条源代码行受到影响。
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由于数字与文本比较导致修补程序不能运作?
请帮忙!
更新:我的问题是指几个月前在Firefox中发生的类似问题,我build议希望它能在Chrome 19上运行,但是现在Oleg的答案是正确的。
几个月前我有一个类似的问题与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' }); } }
力量适合
如果设置为true,并调整列的宽度,则相邻列(右侧)将resize,以便保持整个网格宽度(例如,将第2列的宽度减less30px将增加第3列的大小) 30像素)。 在这种情况下,没有水平滚动条。 注意:这个选项与shrinkToFit选项不兼容,即如果shrinkToFit设置为false,forceFit将被忽略。
只是想指出,这可能是由于webkit 问题78412终于得到解决。 本质上它不会考虑边界,并且我相信填充以及在计算具有固定布局的表格的宽度时也是如此。
这意味着,jqGrid会错误地计算表的宽度,只是它的内容区域的宽度。 所以删除边框和填充也应该解决这个问题,但是你可能不想这样做。
我们使用jgGrid 4.3.3和cellWidth
没有解决问题…为了解决这个问题,我添加了行return parseInt(testCell) !== 5;
而是return testCell !== 5;
在cellWidth
方法中。 也许这不是最好的解决scheme,但它适用于我们:)
在jQGrid 4.5.2和Chrome 59.0.3071.115中,我将grid.base.js中的cellWidth函数改为:
return Math.round(testCell) !== 5
- 有没有一种方法可以使用Google Chrome开发者工具来过滤networking请求?
- 如何在“–allow-file-access-from-files”模式下使用Chrome启动HTML?
- 在Chrome / Mac上强制DOM重绘/刷新
- 通过chrome扩展将file upload为表单数据
- 为什么Chrome控制台中的{} + {}不再是NaN?
- 不安全的JavaScript尝试访问Google Chrome中的框架
- 在Chrome中的Javascript执行跟踪 – 如何?
- 使用JavaScript / JQuery将HTML表格数据导出到Excel在Chrome浏览器中无法正常工作
- 启用浏览器表单自动填充