css - new - El fondo jqGrid zebra/alt rows no funciona debido a la clase de tema UI

kendo ui grid local data

Question

No podemos hacer que las bandas de cebra funcionen en jqGrid.

Usamos altclass y altRows ; el problema es que parece que la clase ui-widget-content de JQuery UI tiene una configuración de background que está anulando la configuración de background nuestra clase alt. ¿Algunas ideas?

Actualización : ambas respuestas a continuación funcionan. Oleg es la solución más limpia de lejos.

Para que la solución de Oleg funcione, su clase altRows debe definirse después de incluir la clase JQuery UI CSS, ya que tanto la interfaz de usuario JQuery como la clase alt personalizada definen la propiedad de fondo y la última clase definida gana .

Answer 1

jqGrid utiliza la clase de IU de jQuery ''ui-priority-secondary'' como el valor predeterminado del parámetro altclass . La clase se describe en la documentación de jQuery UI como

Clase que se aplicará a un botón de prioridad 2 en situaciones donde se necesita la jerarquía de botones. Aplica texto de peso normal y ligera transparencia al elemento.

No es exactamente la descripción de las líneas de rayas de cebra, pero no hay tantas clases estándar que se puedan usar. Desafortunadamente, incluso las filas que tienen ''ui-priority-secondary'' no son tan diferentes de las filas impares en la mayoría de los temas. Para mejorar la visibilidad, uno tiene que definir la clase altclass manualmente.

Una de las maneras más nativas de hacer que las filas parezcan diferentes como las filas impares es el uso de diferentes colores de fondo. El problema es que la clase ui-widget-content usa una imagen de fondo definida con el estilo CSS de background , por lo que la configuración más nativa de background-color de background-color no funcionará. Para solucionar el problema, uno tiene que hacer uno de los siguientes: 1) eliminar ui-widget-content class 2) usar estilo CSS de background-color lugar de background-color 2) use background-image:none junto con el estilo background-color . La forma más sencilla de hacerlo es definir su AltRowClass personalizado como

.myAltRowClass { background: #DDDDDC; }

o

.myAltRowClass { background-color: #DDDDDC; background-image: none; }

y luego usar los altRows:true y altclass:''myAltRowClass'' de jqGrid.

Otra forma es hacer lo mismo sin los parámetros altRows y altclass :

loadComplete: function() {
    $("tr.jqgrow:odd").css("background", "#DDDDDC");
}

En el caso, tendrá algunas pequeñas desventajas al desplazarse o al seleccionar las líneas pares. El siguiente código funciona mejor, pero hace lo mismo que altRows:true y altclass:''myAltRowClass'' :

loadComplete: function() {
    $("tr.jqgrow:odd").addClass(''myAltRowClass'');
}

Debido a que el color de fondo y otros atributos de estilos CSS que puede establecer para las filas pares dependen del tema que utilice, por lo tanto, si planea usar ThemeRoller, deberá elegir altclass para cada tema, lo que le permitirá elegir .

ACTUALIZADO : Acabo de ver que olvidé incluir el enlace al archivo de demostración que demuestra lo que escribí en vivo. La demo está aquí .

Answer 2

aquí está mi solución:

altRows     : true,
altclass    : ''oddRow'',

gridComplete: function() {
    $(".jqgrow:odd").hover(
        function() { $(this).removeClass("oddRow");}, 
        function(event) { $(this).addClass("oddRow");}
    );
}, 

funcionó para mí y se puede usar con cualquier tema de la interfaz de usuario.

Answer 3

Agregué el siguiente CSS a un archivo suplementario para darle un estilo al alternador alternativo de fila y fila sin usar Javascript adicional:

table.ui-jqgrid-btable tr:nth-child(odd) td{
    background-color: #E7F0FD;
}
table.ui-jqgrid-btable tr:hover:nth-child(odd) td{
    background: url("images/ui-bg_glass_75_dadada_1x400.png") repeat-x scroll 50% 50% rgb(6, 41, 97);
}

Answer 4

Per Oleg .. en loadComplete:

$.each(grid.getDataIDs(),
    function(index, key){
        if(index % 2 !== 0) {
            var t = $("#" + key, grid);
            t.removeClass(''ui-widget-content'');
        }
    }
);

Y luego en la definición de la grilla:

altRows:true,
altclass:''myAltRowClass'',

Con `myAltRowClass '':

.myAltRowClass { background: #F8F8F8 ; border:1px solid #DDDDDD;  }