jqGrid cebra / alt filas fondo no funciona debido a la clase del tema de interfaz de usuario

Question

No se puede obtener rayas de cebra para trabajar en jqGrid.

altclass y altRows - cuestión es que aparece la clase ui-widget-content de la interfaz de usuario jQuery tiene una background configuración que se ajuste anulando background de nuestra altclass. Algunas ideas?

---

Actualizar : Ambas respuestas a continuación el trabajo. Oleg es la solución más limpia, con mucho.

Para la solución de Oleg al trabajo, la clase altRows tiene que ser definido después de incluir la clase CSS jQuery UI ya que tanto el jQuery UI y la costumbre de clase filas alt definir la propiedad de fondo y el victorias última clase definidos .com / preguntas / 3066356 / basados-on-the-orden definido por múltiples-CSS-clases-propiedades superpuestas.

Answer 1

uso jqGrid clase jQuery UI 'ui-prioridad-secundaria' como el valor por defecto del parámetro altclass. La clase se describen en jQuery UI como

Clase que debe aplicarse a una prioridad-2 botón en situaciones donde el botón jerarquía se necesita. Se aplica la normalidad texto de peso ligero y la transparencia de elemento.

Es de causa no es exactamente la descripción de la creación de bandas de cebra, pero no hay tantas clases estándar que se pueden utilizar. Desafortunadamente filas incluso tener 'ui prioridad secundaria' apariencia no tan diferentes de las filas impares en la mayoría de los temas. Por lo tanto para mejorar la visión en Have a definir la clase altclass manualmente.

Una de las formas más naturales para hacer filas pares visto diferentes como las filas impares es el uso de diferente color de fondo. El problema es que la clase ui-widget-content usar una imagen de fondo con el estilo definido background CSS, por lo que el entorno más natural de background-color no funcionará. Para solucionar el problema uno que hacer una de las cosas 1) Retire la clase ui-widget-content 2) el uso de estilos CSS en lugar de background background-color 2) el uso background-image:none junto con el estilo background-color. La forma más sencilla de hacer esto es definir su AltRowClass personalizado como

.myAltRowClass { background: #DDDDDC; }

o

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

y luego a uso altRows:true y altclass:'myAltRowClass' parámetros de jqGrid.

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

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

En el caso de que se cuenta con algunos pequeños inconvenientes en cierne o la selección de las líneas pares. El código siguiente funciona mejor, pero es lo mismo lo que altRows:true y altclass:'myAltRowClass' hacer:

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

De la causa de los atributos de color de fondo y otros estilos CSS que se pueden establecer para las filas pares son dependerá del tema que se utiliza, por lo que si va a utilizar ThemeRoller tendrá que elegir altclass para cada tema, que se quiere permitir que elegir.

ACTUALIZADO : acabamos de ver que se me olvidó incluir el enlace al archivo de demostración que demuestran lo que escribí en vivo. La demostración es aquí .

Answer 2

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 retícula:

altRows:true,
altclass:'myAltRowClass',

Con `myAltRowClass':

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

Answer 3

aquí está mi solución:

altRows     : true,
altclass    : 'oddRow',

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

que trabajó para mí y se puede utilizar con cualquier tema de la interfaz de usuario.

Answer 4

añade el siguiente CSS en un archivo complementario al estilo de la fila y la fila se alternan vuelo estacionario 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);
}