jqGrid zebra / alt行背景由于UI主题类不工作 [英] jqGrid zebra/alt rows background not working due to UI Theme class

问题描述

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

我们使用 altclass和altRows - 问题是出现在 ui-widget-content 类从JQuery UI有一个 / code>设置，覆盖了我们的altclass的后台设置。任何想法？

---

更新： Oleg是目前为止最清洁的解决方案。

对于Oleg的解决方案，您的altRows类必须在包含JQuery UI CSS类后定义为JQuery UI和自定义alt行类定义背景属性和上一级定义的胜利。 / p>

解决方案

jqGrid使用jQuery UI类'ui-priority-secondary'作为 / code>参数。类在 jQuery UI文档中被描述为

在需要按钮
层次结构的情况下，应用于priority-2
按钮的类。

这是正常的
重量文字和稍微透明的
元素。斑马条纹，但没有那么多标准类可以使用。不幸的是，甚至具有ui-priority-secondary的行看起来与大多数主题中的奇数行没有什么不同。因此为了提高可见性，需要手动地定义 altclass 类。





使偶数行看起来不同的最原始的方式，因为奇数行是使用不同的背景颜色。问题是 ui-widget-content 类使用由 background CSS风格定义的背景图片，所以最原始 background-color 的设置将不起作用。要解决这个问题，必须从事情中做一件事1）删除 ui-widget-content class 2）use background CSS样式而不是 background-color 2）使用 background-image：none > background-color 样式。最简单的方法是将您的自定义 AltRowClass 定义为

 。 myAltRowClass {background：#DDDDDC; } 
   

或

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

然后使用 altRows：true

另一种方法是做同样的没有 / strong> altRows 和 altclass 参数：

  loadComplete：function（）{
 $（tr.jqgrow：odd）。css（background，#DDDDDC）; 
} 
  

在这种情况下，在悬停或选择偶数行时会有一些小的缺点。下面的代码工作更好，但它做同样 altRows：true 和 altclass：'myAltRowClass' do： / p>

  loadComplete：function（）{
 $（tr.jqgrow：odd）。addClass（'myAltRowClass'） ; 
} 
  

因为背景颜色和其他CSS样式属性，您可以为偶数行依赖于您使用的主题，因此如果您计划使用ThemeRoller，您将必须为每个主题选择 altclass ，您将允许选择。 p>

UPDATED ：刚刚看到，我忘了包含演示文件的链接，演示了我写的活。演示为此处。

We cannot get zebra striping to work in jqGrid.

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?

---

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

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 use jQuery UI class 'ui-priority-secondary' as the default value of the altclass parameter. The class are described in jQuery UI documentation as

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.

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.

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; }

or

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

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

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

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:true and altclass:'myAltRowClass' do:

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 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.

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