由于 UI 主题类，jqGrid 斑马/alt 行背景无法正常工作 [英] jqGrid zebra/alt rows background not working due to UI Theme class

问题描述

我们无法让斑马条纹在 jqGrid 中工作.

We cannot get zebra striping to work in jqGrid.

我们使用 altclass 和 altRows - 问题是 ui-widget-contentJQuery UI 中的 类有一个 background 设置，它覆盖了我们的 altclass 的 background 设置.有什么想法吗?

We use altclass and altRows - issue is it appears the ui-widget-content class from the JQuery UI has a background setting which is overriding our altclass's background setting. Any ideas?

更新:以下两个答案都有效.Oleg's 是迄今为止最干净的解决方案.

Update: Both answers below work. Oleg's is the cleanest solution by far.

要使 Oleg 的解决方案正常工作，必须在包含 JQuery UI CSS 类之后定义 altRows 类，因为 JQuery UI 和自定义 alt 行类都定义了背景属性和 最后一个定义的类获胜.

For Oleg's solution to work, your altRows class has to be defined after including the JQuery UI CSS class as both the JQuery UI and the custom alt rows class define the background property and the last class defined wins.

推荐答案

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

jqGrid use jQuery UI class 'ui-priority-secondary' as the default value of the altclass parameter. The class are described in jQuery UI documentation as

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

Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element.

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

It is of cause not exactly the description of the zebra striping, but there are not so many standard classes which can be used. Unfortunately even rows having 'ui-priority-secondary' looks not so different from odd rows in the most themes. So to improve visibility one have to define the class altclass manually.

使偶数行看起来与奇数行不同的最原生方法之一是使用不同的背景颜色.问题是 ui-widget-content 类使用 background CSS 样式定义的背景图像，所以 background-color 的最原生设置不管用.要解决问题，必须从事情中做一件事 1)删除 ui-widget-content 类 2)使用 background CSS 样式而不是 background-color 2) 使用 background-image:none 和 background-color 样式.最简单的方法是将您的自定义 AltRowClass 定义为

One of the most native ways to make even rows seen different as the odd rows is the usage of different background color. The problem is that ui-widget-content class use an background image defined with background CSS style, so the most native setting of background-color will not work. To fix the problem one have to do one from the things 1) remove ui-widget-content class 2) use background CSS style instead of background-color 2) use background-image:none together with the background-color style. The simplest way to do this is define your custom AltRowClass as

.myAltRowClass { background: #DDDDDC; }

或

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

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

and then to use altRows:true and altclass:'myAltRowClass' parameters of jqGrid.

另一种方法是不使用 altRows 和altclass 参数:

Another way is to do the same without altRows and altclass parameters:

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

在这种情况下，您在悬停或选择偶数行时会有一些小缺点.以下代码效果更好，但与 altRows:true 和 altclass:'myAltRowClass' 的作用相同:

In the case you will has some small disadvantages in hovering or selecting the even lines. The following code works better, but it do the same what altRows:true and altclass:'myAltRowClass' do:

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

因为你可以为偶数行设置的背景颜色和其他 CSS 样式属性取决于你使用的主题，所以如果你打算使用 ThemeRoller 你将不得不选择 altclass对于每个主题，您都可以选择.

Of cause the background color and other CSS styles attributes which you can set for the even rows are depend from the theme which you use, so if you plan to use ThemeRoller you will have to choose altclass for every theme, which you will allow to choose.

更新:刚刚看到我忘记包含演示文件的链接，该文件演示了我现场编写的内容.演示在这里.

UPDATED: Just seen that I forgot to include the link to the demo file which demonstrate what I wrote live. The demo is here.

这篇关于由于 UI 主题类，jqGrid 斑马/alt 行背景无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！