12

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

我们使用altclass 和 altRowsui-widget-content - 问题是JQuery UI 中的类似乎有一个background设置覆盖了我们的 altclass 的background设置。有任何想法吗？

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

为了使 Oleg 的解决方案起作用，必须在包含 JQuery UI CSS 类之后定义 altRows 类，因为 JQuery UI 和自定义 alt rows 类都定义了 background 属性，最后一个类定义了 wins。

4

4 回答 4

30

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

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

另一种方法是在没有 altRows和altclass参数的情况下执行相同的操作：

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

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

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

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

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

于 2010-12-07T22:05:13.100 回答
3

每个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;  }
于 2010-12-06T19:47:35.670 回答
1

这是我的解决方案：

altRows     : true,
altclass    : 'oddRow',

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

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

于 2011-09-30T10:49:32.260 回答
1

我在补充文件中添加了以下 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);
}
于 2013-05-02T19:35:16.453 回答