jqGrid行交替背景答案

【问题标题】：jqGrid row alternating backgroundjqGrid行交替背景
【发布时间】：2009-11-22 07:46:06
【问题描述】：

如何在jqGrid 中插入交替行背景颜色？

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

查看altRows 和altclass options。注意通常不一致的大小写！如果您使用的是 jqGrid 3.5 或更高版本，这确实会使用 jQuery UI 主题。

【讨论】：

【解决方案2】：

要使用 jQuery UI 主题，请使用以下代码：

$('#'+gridName+' tr:nth-child(even)').removeClass("ui-priority-secondary");
$('#'+gridName+' tr:nth-child(odd)').addClass("ui-priority-secondary");

我在执行手动排序（拖放）时使用此代码

【讨论】：

【解决方案3】：

function applyZebra(containerId) {
    $('#' + containerId + ' tr:nth-child(even)').addClass("jqgrow evenTableRow");
    $('#' + containerId + ' tr:nth-child(odd)').addClass("jqgrow oddTableRow");
}

ContainerId 是您的 jqGrid ID。在 jqGrid 的“gridComplete”事件上调用此方法。

【讨论】：

很好的解决方案，但如果可以从 jQuery UI 主题中选择偶数/奇数颜色，那就太好了。

【解决方案4】：

Hello首先定义了css：

<style type="text/css"> 
......
.Color_Red { background:red; }
.Color_Cyan { background:cyan; } 
......

然后在 jqGrid ...

$("#list2").jqGrid({
........
loadComplete: function() {
  var rowIDs = jQuery("#list2").getDataIDs(); 
  for (var i=0;i<rowIDs.length;i=i+1){ 
    rowData=jQuery("#list2").getRowData(rowIDs[i]);
    var trElement = jQuery("#"+ rowIDs[i],jQuery('#list2'));

// Red       
    if (rowData.Estado == 0) {
        trElement.removeClass('ui-widget-content');
        trElement.addClass('Color_Red');
    }

// Cyan        
    if (rowData.Estado == 2) {
        trElement.removeClass('ui-widget-content');
        trElement.addClass('Color_Cyan');
    }
}
},

});

因此，我们遍历行并应用 RED 来满足 == 0 的条件和满足 条件 == 2 的 Cyan。

您应该按列名称和值更改 rowData.XXX == XX 以进行检查。

我有这种方法，而且效果很好。

好运！

【讨论】：

【解决方案5】：

调用 loadComplete 函数改变 jqgrid 中行的背景颜色。

loadComplete : function() {
    $("tr.jqgrow:odd").addClass('myAltRowClassEven');
    $("tr.jqgrow:even").addClass('myAltRowClassOdd');
},

用于将样式应用于css下面的背景。

<style type="text/css">
.myAltRowClassEven { background: #E0E0E0; border-color: #79B7E7; }
.myAltRowClassOdd { background: orange; }
</style>

或者

要更改 jqgrid 中的行字体，请单击下面的链接

How can I change Background colour and Font of any row in JQGrid?

【讨论】：

【解决方案6】：

Here's how you do it:

$("#myGrid").jqGrid({
   ...
   gridComplete: function() {
       var _rows = $(".jqgrow");
       for (var i = 0; i < _rows.length; i += 2) {
           _rows[i].attributes["class"].value += " alt";
       }
   }
});

【讨论】：

方式工作太多了。此功能已内置到网格中。无需重新发明。