jqGrid fila fondo alterno

Question

¿Cómo puedo insertar el color de fondo de fila alterna en jqGrid?

Answer 1

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

ContainerId es su ID de jqGrid. Llame a este método en el evento "gridComplete" de su jqGrid.

Answer 2

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

Answer 3

Mira el altRows y altclassoptions. ¡Cuidado con la capitalización típicamente inconsistente! Esto utiliza el tema jQuery UI si está utilizando jqGrid 3.5 o superior.

Answer 4

Para utilizar el tema de jQuery UI utilizar este código:

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

utilizo este código cuando realizo clasificación manual (arrastrar y soltar)

Answer 5

Hola primero define el css:

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

Luego, en 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'); 
    } 
} 
}, 

}); 

Así que caminar por las filas y aplicará el rojo para cumplir con la condición de que == 0 y cian que satisfacen la condición == 2.

Debe cambiar rowData.XXX == XX por nombre de columna y valor para verificar.

Lo tengo de esta manera y funciona perfectamente.

Suerte!

Answer 6

Función load loadComplete para cambiar el color de fondo de la fila en jqgrid.

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

para aplicar estilos al uso de fondo debajo de css.

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

O

Para cambiar la fuente fila de jqGrid ver haga clic a continuación enlace

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