jqGrid行交替背景

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」事件中調用此方法。

來源

2009-11-22 08:36:25 Nrj

+0

的最佳解決方案，但如果奇/偶顏色可以從選擇這將是很好jQuery UI主題。 – 2009-11-22 15:55:39

-1

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

來源

2009-11-23 11:24:24 Graviton

+0

*方式*工作太多。該功能已經內置到網格中。沒有必要重塑它。 – 2009-11-23 22:22:04

9

看那altRows和altclassoptions。謹防通常不一致的大寫！如果您使用的是jqGrid 3.5或更高版本，這會使用jQuery UI主題。

來源

2009-11-23 22:30:35

2

要使用jQuery UI的主題使用以下代碼：

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

我使用這個代碼時，我執行手工分揀（拖動正壓降）

來源

2010-02-18 15:44:04

0

你好首先定義的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。

您應該更改rowData.XXX == XX按列名和值來檢查。

我有這種方式，它完美的作品。

好運！

來源

2012-10-09 22:27:55 Javier

0

調用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?

來源

2014-03-19 12:12:00 pudaykiran

jqGrid行交替背景

回答

相關問題