CSS 由于 UI 主题类，jqGrid zebra/alt 行背景不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4369899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid zebra/alt rows background not working due to UI Theme class
提问by Marcus Leon
We cannot get zebra striping to work in jqGrid.
我们无法在 jqGrid 中使用斑马条纹。
We use altclass and altRows- issue is it appears the ui-widget-contentclass from the JQuery UI has a backgroundsetting which is overriding our altclass's backgroundsetting. Any ideas?
我们使用altclass 和 altRows- 问题是ui-widget-content来自 JQuery UI的类似乎有一个background覆盖我们 altclassbackground设置的设置。有任何想法吗？
Update: Both answers below work. Oleg's is the cleanest solution by far.
更新：下面的两个答案都有效。Oleg's 是迄今为止最干净的解决方案。
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.
为了使 Oleg 的解决方案起作用，您的 altRows 类必须在包含 JQuery UI CSS 类之后定义，因为 JQuery UI 和自定义 alt 行类都定义了 background 属性，并且最后一个定义的类 wins。
回答by Oleg
jqGrid use jQuery UI class 'ui-priority-secondary' as the default value of the altclassparameter. The class are described in jQuery UI documentationas
jqGrid 使用 jQuery UI 类 'ui-priority-secondary' 作为altclass参数的默认值。该类在jQuery UI 文档中被描述为
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.
在需要按钮层次结构的情况下应用于优先级 2 按钮的类。对元素应用正常粗细的文本和轻微的透明度。
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 todefine the class altclassmanually.
原因不完全是斑马条纹的描述，但是可以使用的标准类并不多。不幸的是，即使是具有 'ui-priority-secondary' 的行看起来与大多数主题中的奇数行也没有太大区别。因此，为了提高可见性，必须altclass手动定义类。
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-contentclass use an background image defined with backgroundCSS style, so the most native setting of background-colorwill not work. To fix the problem one have to do one from the things 1) remove ui-widget-contentclass 2) use backgroundCSS style instead of background-color2) use background-image:nonetogether with the background-colorstyle. The simplest way to do this is define your custom AltRowClassas
使偶数行与奇数行不同的最原生方法之一是使用不同的背景颜色。问题是ui-widget-content该类使用用backgroundCSS 样式定义的背景图像，因此最原生的设置background-color将不起作用。要解决这个问题，必须从以下方面做一件事：1) 删除ui-widget-content类 2) 使用backgroundCSS 样式而不是background-color2)background-image:none与background-color样式一起使用。最简单的方法是将您的自定义定义AltRowClass为
.myAltRowClass { background: #DDDDDC; }
or
或者
.myAltRowClass { background-color: #DDDDDC; background-image: none; }
and then to use altRows:trueand altclass:'myAltRowClass'parameters of jqGrid.
然后使用jqGrid的altRows:true和altclass:'myAltRowClass'参数。
Another way is to do the same withoutaltRowsand altclassparameters:
另一种方法是在没有altRows和altclass参数的情况下做同样的事情：
loadComplete: function() {
$("tr.jqgrow:odd").css("background", "#DDDDDC");
}
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:trueand altclass:'myAltRowClass'do:
在这种情况下，您在悬停或选择偶数行时会有一些小缺点。下面的代码工作得更好，但它做同样的东西altRows:true和altclass:'myAltRowClass'做的事：
loadComplete: function() {
$("tr.jqgrow:odd").addClass('myAltRowClass');
}
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 altclassfor every theme, which you will allow to choose.
当然，您可以为偶数行设置的背景颜色和其他 CSS 样式属性取决于您使用的主题，因此如果您打算使用 ThemeRoller，则必须altclass为每个主题进行选择，您将允许选择。
UPDATED: Just seen that I forgot to include the link to the demo file which demonstrate what I wrote live. The demo is here.
更新：刚刚看到我忘记包含演示文件的链接，该链接演示了我实时编写的内容。演示在这里。
回答by Marcus Leon
Per Oleg.. in loadComplete:
每个Oleg.. 在 loadComplete 中：
$.each(grid.getDataIDs(),
function(index, key){
if(index % 2 !== 0) {
var t = $("#" + key, grid);
t.removeClass('ui-widget-content');
}
}
);
And then in the grid definition:
然后在网格定义中：
altRows:true,
altclass:'myAltRowClass',
With `myAltRowClass':
使用“myAltRowClass”：
.myAltRowClass { background: #F8F8F8 ; border:1px solid #DDDDDD; }
回答by thanat
here is my solution:
这是我的解决方案：
altRows : true,
altclass : 'oddRow',
gridComplete: function() {
$(".jqgrow:odd").hover(
function() { $(this).removeClass("oddRow");},
function(event) { $(this).addClass("oddRow");}
);
},
it worked for me and can be used with any ui theme.
它对我有用，可以与任何 ui 主题一起使用。
回答by Chris G
I added the following CSS to a supplementary file to style the alternate row and row hover without using additional Javascript:
我将以下 CSS 添加到补充文件中，以在不使用额外 Javascript 的情况下设置交替行和行悬停的样式：
table.ui-jqgrid-btable tr:nth-child(odd) td{
background-color: #E7F0FD;
}
table.ui-jqgrid-btable tr:hover:nth-child(odd) td{
background: url("images/ui-bg_glass_75_dadada_1x400.png") repeat-x scroll 50% 50% rgb(6, 41, 97);
}
