JQGrid Zebra/Alt行背景不适用于UI主题类

StackOverflow https://stackoverflow.com/questions/4369899

  •  09-10-2019
  •  | 
  •  

题

我们无法让斑马脱衣舞在JQGrid工作。

我们用 AltClass和Altrows - 问题是看起来 ui-widget-content jQuery UI的课程有一个 background 覆盖我们AltClass的设置 background 环境。有任何想法吗？

更新: ：下面的两个答案。 Oleg是迄今为止最干净的解决方案。

对于Oleg的工作解决方案，必须在将JQUERY UI CSS类作为jQuery UI和Custom Alt Rows Class（定义背景属性）和Custom Alt Rows类中定义您的Altrows类。 上课定义的胜利.

有帮助吗？

解决方案

jqgrid使用jQuery UI类'UI-Priority-Secardary'作为默认值 altclass 范围。班级描述 jQuery UI文档 作为

在需要按钮层次结构的情况下，将应用于Priority-2按钮。在元素上应用正常的重量文本和轻微的透明度。

这并不完全是斑马条纹的描述，但是没有太多可以使用的标准类。不幸的是，即使是“ UI-Priority-Secardary”的行看起来与大多数主题中的奇数行都没有太大不同。因此，要提高可见度 必须 定义课程 altclass 手动。

使行与奇数行不同的最新方法之一是使用不同的背景颜色。问题是 ui-widget-content 类使用定义的背景图像 background CSS样式，因此是最本地的设置 background-color 不管用。要解决问题，必须从事物中做一个问题1）删除 ui-widget-content 2）使用 background CSS样式而不是 background-color 2）使用 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 对于每个主题，您将允许选择。

更新: ：只是看到我忘了包括指向演示我创作的直播的演示文件的链接。演示是 这里.

其他提示

每 Oleg..在LoadComplete中：

$.each(grid.getDataIDs(),
    function(index, key){
        if(index % 2 !== 0) {
            var t = $("#" + key, grid);
            t.removeClass('ui-widget-content');
        }
    }
);

然后在网格定义中：

altRows:true,
altclass:'myAltRowClass',

与“ myaltrowclass”：

.myAltRowClass { background: #F8F8F8 ; border:1px solid #DDDDDD;  }

这是我的解决方案：

altRows     : true,
altclass    : 'oddRow',

gridComplete: function() {
    $(".jqgrow:odd").hover(
        function() { $(this).removeClass("oddRow");}, 
        function(event) { $(this).addClass("oddRow");}
    );
},

它对我有用，可以与任何UI主题一起使用。

我将以下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);
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top