由于UI Theme类,jqGrid zebra/alt行背景无法正常工作

Question

我们不能让斑马条纹在jqGrid中工作.

我们使用altclass和altRows - 问题是看来ui-widget-contentJQuery UI 中的类有一个background覆盖我们altclass background设置的设置.有任何想法吗？

---

更新:以下两个答案都有效.到目前为止,Oleg是最干净的解决方案.

对于Oleg的解决方案,必须在包含JQuery UI CSS类之后定义altRows类,因为JQuery UI和自定义alt行类都定义了background属性和最后定义的类类wins.

Answer 1

jqGrid使用jQuery UI类'ui-priority-secondary'作为altclass参数的默认值.该类在jQuery UI文档中描述为

在需要按钮层次结构的情况下应用于优先级为2的按钮的类.对元素应用正常权重文本和轻微透明度.

原因并不完全是斑马条纹的描述,但没有那么多标准类可以使用.不幸的是,即使是具有'ui-priority-secondary'的行看起来与大多数主题中的奇数行也没有那么不同.因此,为了提高可见性,必须altclass手动定义类.

使偶数行看起来与奇数行不同的最原生的方法之一是使用不同的背景颜色.问题是ui-widget-content该类使用backgroundCSS样式定义的背景图像,因此最原始的设置background-color将不起作用.要解决问题,必须从事物中做一个1)删除ui-widget-content类2)使用backgroundCSS样式而不是background-color2)background-image:none与background-color样式一起使用.最简单的方法是将自定义定义AltRowClass为

.myAltRowClass { background: #DDDDDC; }

要么

.myAltRowClass { background-color: #DDDDDC; background-image: none; }

然后使用altRows:true和altclass:'myAltRowClass'jqGrid的参数.

另一种方法是做同样的不 altRows和altclass参数:

loadComplete: function() {
    $("tr.jqgrow:odd").css("background", "#DDDDDC");
}

在这种情况下,您在悬停或选择偶数行时会有一些小的缺点.下面的代码工作得更好,但它做同样的东西altRows:true和altclass:'myAltRowClass'做的事:

loadComplete: function() {
    $("tr.jqgrow:odd").addClass('myAltRowClass');
}

因为您可以为偶数行设置的背景颜色和其他CSS样式属性取决于您使用的主题,因此如果您打算使用ThemeRoller,则必须altclass为每个主题选择,您可以选择.

更新:刚看到我忘了包含演示文件的链接,它演示了我写的内容.演示就在这里.