Question

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

Answer 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 和Cyan满足条件== 2 。

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

我这样做，效果很好。

运气！

Answer 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?

Answer 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";
       }
   }
});

jqGrid行交替背景

6 个答案: