【问题标题】:jqgrid frozen column issue with chrome browserchrome浏览器的jqgrid冻结列问题
【发布时间】:2012-10-09 10:48:53
【问题描述】:

您好,我在 jqgrid 冻结列演示中看到了 chrome(v22) 和 firefox 之间的对齐差异。任何机构都可以告诉我为什么会发生这种情况以及解决方法是什么。

如果您查看屏幕截图,您会看到客户端和金额列之间存在一些水平对齐差异。

你可以在下面的链接中看到同样的内容: http://www.trirand.com/blog/jqgrid/jqgrid.html

打开上面的链接并转到最后一部分,即冻结的 cols 组标题。然后在windows XP的chrome(v22)浏览器中选择frozen column demo或frozen column group header demo。

但在 windows XP 中的 firefox(v 15) 和 safari(v5) 中对齐是正确的

【问题讨论】:

  • @Oleg 如果你有时间可以看看这篇文章

标签: jquery-plugins jqgrid


【解决方案1】:

我不能建议你真正解决这个问题,但我决定写下我如何解释这个问题。简短的回答是:setFrozenColumns 方法在计算冻结 div 的top 位置时存在错误。应该改进代码。

有两个 div:一个用于冻结的标头(具有 frozen-div ui-jqgrid-hdiv 类的 div),另一个用于冻结的主体(具有 frozen-bdiv ui-jqgrid-bdiv 类的 div)。如果您从 the official jqGrid demo page 打开 "Frozen Cols.Group Header(new)" / "Frozen column with group header" 演示并检查不同 Web 浏览器中 top 属性的值,您会发现在某些浏览器中的值top 应该增加或减少到 1px 才能看到正确的视图。

例如,在 Firefox 16 中,潜水具有 top: 24px;top: 70px;,并且看起来一切正常。

在 IE9 中具有相同的值,但要正确查看网格,必须将值更改为 top: 25px;top: 71px;

以同样的方式,在 Chrome 22 中具有相同的值 top: 24px;top: 70px;。要解决此问题,可以将值更改为 top: 23px;top: 69px;

您可以使用 Chrome 的开发者工具(IE 也一样)来验证更改 top 属性是否可以解决问题:

更改后,演示的外观将至少达到 100%,但如果您将缩放更改为 200%,您会看到 originaltop: 24px;top: 70px; 是更好。

我想问题的真正解决并不容易。它在网格的冻结部分的行和非冻结部分的每一行上设置高度属性的方向。在the answer 中,您会找到方向的第一步。缺点是编辑后需要额外的代码来重新计算行的正确高度。

【讨论】:

  • 抱歉回复延迟和接受答案延迟
  • 作为解决上述问题的方法,我使用了以下行并在 gridcomplete 之后调用了此行,这解决了我的问题。 jq("#gview_"+gridId+" div.frozen-bdiv").css(jq("#gview_"+gridId+" div.ui-jqgrid-bdiv").position());
  • @usergigantic:感谢您提供的信息!我稍后会试试这个。您的代码对应于我引用的the answer 中的$(this.grid.fbDiv).css($(this.grid.bDiv).position()); 行。
【解决方案2】:

如果你增加/减少字体大小,在所有浏览器中,对齐有时是正确的,有时是错误的。确实,只有在 Chrome 中默认大小会出错,而所有其他(Firefox、Opera、Safari、Internet Explorer)都可以正常启动,但是当您更改大小时,所有这些都可以调整/错误调整。不仅是垂直对齐,其他东西也变得丑陋 - 比如冻结列和其他列之间的水平空间,甚至它的垂直大小(当你增加或减少太多时会变得很明显)。

检查 DOM,您会看到它实际上呈现了两个表 - 一个固定的,用于冻结列,一个可滚动的,用于其余的。它试图将它们放置成一个单一的一致的东西,但最终它主要是一个 hack。至于修复,不幸的是我不知道,但由于这是一个比“在 Chrome 上不起作用”更普遍的问题,我希望插件开发人员最终会修复它。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-19
    • 2011-06-02
    • 1970-01-01
    • 1970-01-01
    • 2016-04-17
    相关资源
    最近更新 更多