Color de fondo de la fila seleccionada

Question

Estoy usando jqgrid con el tema de jquery-ui 'suavidad', desafortunadamente con este tema el color de fondo de la fila seleccionada es demasiado claro, estoy tratando de cambiar el color de fondo para hacerlo más visible. He intentado cambiar ui-state-highlight en css (con! Override importante) pero esto no funciona. ¿Hay alguna forma de CSS para hacer esto o quizás un formateador personalizado jqgrid es el camino a seguir?

Answer 1

La clase ui-state-highlight utiliza el atributo CSS background. Entonces, un pequeño truco es usar background en lugar de background-color para eliminar la imagen de fondo. Por ejemplo

.ui-state-highlight { background: yellow !important; } 

ver en vivo here.

ACTUALIZADO: No es necesario utilizar !important. Es suficiente para especificar un regla más específico como

.ui-jqgrid-btable .ui-state-highlight { background: yellow; } 

o

.ui-jqgrid .ui-state-highlight { background: yellow; } 

Answer 2

Supongamos que si queremos un color para las células de filas seleccionadas y restantes células filas con color diferente,

En el siguiente ejemplo Los datos de las celdas de filas resaltadas serán de color amarillo y los datos de las celdas de las filas restantes serán de color azul

Supongamos que tenemos dos clases con nombres "holdRow" para fondo azul y "HighlightHoldRow" para fondo de color amarillo y luego Al usar el código siguiente "RowSelect" es el método invocado durante la selección de fila,

Considere el siguiente código

.holdRow td { 
font-weight : bold !important; 
color: Blue !important; 
    } 

    .higLightholdRow td { 
font-weight : bold !important; 
color: Yellow !important; 

}

var LastRowId = ""; 
    function RowSelect(id) { 
if (Flag == "TRUE") { 
    var grid = $('#gvName); 
    if (LastRowId != "" && LastRowId != undefined && LastRowId != id) { 
     tr = grid[0].rows.namedItem(LastRowId); 
     $(tr).removeClass("higLightholdRow"); 
     $(tr).addClass("holdRow"); 
     LastRowId = ""; 
    } 
    tr = grid[0].rows.namedItem(id); 
    $(tr).removeClass("holdRow"); 
    $(tr).addClass("higLightholdRow"); 
    LastRowId = id; 
    } 

}

Durante Trirand Declaración de cuadrícula podemos llamar a este evento del lado del cliente utilizando la f Siguiendo loc.

ClientSideEvents-RowSelect="RowSelect" 

El método RowSelect es invocado durante la selección de una fila y fila seleccionada tendrá color amarillo como fondo y las filas restantes tendrá el color azul como fondo

Answer 3

jQuery('#jqGrid').find('.ui-state-highlight').css('background', 'skyblue'); 

Puede agregar como este en su archivo jquery