jqGrid zebra / righe alt sfondo non funziona a causa di interfaccia utente di classe a tema

Question

Non possiamo ottenere zebra striping a lavorare in jqGrid.

altclass e altRows - problema è sembra la classe ui-widget-content dal JQuery UI ha un impostazione background che è override impostazione background del nostro altclass. Tutte le idee?

---

Aggiorna : Entrambe le risposte qui sotto lavoro. Oleg di è la soluzione più pulita di gran lunga.

Per la soluzione di Oleg per il lavoro, la classe altRows deve essere definito dopo aver incluso la classe CSS JQuery UI sia come JQuery UI e l'usanza righe alt classe definire la proprietà di sfondo e il vittorie ultima classe definiti .

Answer 1

uso jqGrid classe jQuery UI 'ui-priority-secondaria' come valore di default del parametro altclass. La classe sono descritti nel jQuery UI documentazione come

  

Class da applicare ad una priorità-2   Pulsante in situazioni in cui il pulsante   gerarchia è necessario. Si applica normale   testo peso e leggera trasparenza   elemento.

È di causa non esattamente la descrizione di striatura zebra, ma non ci sono tanti classi standard che possono essere utilizzati. Purtroppo righe anche avere sguardi 'ui-priorità-secondario' non così diversi da righe dispari nella maggior parte dei temi. Quindi, per migliorare la visibilità una Sono d' definire la classe di altclass manualmente.

Uno dei modi più nativi per rendere righe anche visto diverse come le righe dispari è l'utilizzo di colore di sfondo diverso. Il problema è che la classe ui-widget-content utilizzare un'immagine di sfondo definita con stile background CSS, quindi l'impostazione più nativo di background-color non funziona. Per risolvere il problema si hanno a che fare uno dalle cose 1) Togliere ui-widget-content classe 2) di stile CSS uso background invece di background-color 2) utilizzo background-image:none insieme con lo stile background-color. Il modo più semplice per farlo è definire la vostra AltRowClass personalizzato come

.myAltRowClass { background: #DDDDDC; }

o

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

e quindi di utilizzare altRows:true e altclass:'myAltRowClass' parametri di jqGrid.

Un altro modo è quello di fare lo stesso senza e altRows altclass parametri:

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

Nel caso si vuole ha alcuni piccoli svantaggi in bilico o selezionare le linee pari. Il seguente codice funziona meglio, ma fare la stessa cosa altRows:true e altclass:'myAltRowClass' fare:

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

Di causa gli attributi di colore di sfondo e altri stili CSS che è possibile impostare per le righe anche sono dipenderà dal tema che si utilizza, quindi se avete intenzione di utilizzare ThemeRoller si dovrà scegliere altclass per ogni tema, che si vuole consentire di scegliere.

AGGIORNAMENTO : appena visto che ho dimenticato di includere il link al file demo che dimostrano quello che ho scritto dal vivo. La demo è qui .

Answer 2

Oleg .. in loadComplete:

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

E poi nella definizione della griglia:

altRows:true,
altclass:'myAltRowClass',

Con `myAltRowClass':

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

Answer 3

qui è la mia soluzione:

altRows     : true,
altclass    : 'oddRow',

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

ha funzionato per me e può essere utilizzato con qualsiasi tema ui.

Answer 4

ho aggiunto il seguente CSS in un file aggiuntivo per lo stile della fila si alternano e si fila hover senza utilizzare ulteriore Javascript:

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