jqGrid Zebra / Alt Reihen Hintergrund arbeitet nicht aufgrund UI Theme Klasse

Question

Wir können nicht Zebra Striping zur Arbeit in jqGrid erhalten.

Wir verwenden altclass und altRows - Ausgabe ist es, die ui-widget-content Klasse von der JQuery UI erscheint hat eine background Einstellung, die unsere altclass der background Einstellung wird überschrieben. Irgendwelche Ideen?

---

Aktualisieren : Beiden Antworten unten arbeiten. Oleg ist die sauberste Lösung bei weitem.

Für Olegs Lösung zu arbeiten, hat Ihre altRows Klasse nach einschließlich der JQuery UI CSS-Klasse, da sowohl der JQuery UI und die benutzerdefinierten alt Reihen Klasse definiert die Hintergrundeigenschaft und die letzte Klasse definiert gewinnt .

Answer 1

jqGrid Verwendung jQuery UI-Klasse 'ui-Priorität-Sekundär' als Standardwert des altclass Parameter. Die Klasse ist in jQuery UI Dokumentation als

beschrieben

Klasse bis zu einer Priorität-2 angewandt werden Schaltfläche in Situationen, in denen Schaltfläche Hierarchie erforderlich. gilt Normal Gewicht Text und geringe Transparenz Element.

Es ist Ursache nicht genau die Beschreibung des Zebra-Striping, aber es gibt nicht so viele Standardklassen, die verwendet werden können. Leider mit geraden Reihen ‚ui-Priorität-sekundäre‘ Aussehen nicht so verschieden von ungeraden Zeilen in den meisten Themen. So Sicht ein verbessern wird zu definiert die Klasse altclass manuell.

Eine der nativen Möglichkeiten, um sogar Reihen zu machen gesehen unterschiedlich wie die ungeraden Zeilen ist die Verwendung von anderen Hintergrundfarbe. Das Problem ist, dass ui-widget-content Klasse ein Hintergrundbild mit background CSS Stil definiert verwenden, so dass die meisten nativen Einstellung von background-color wird nicht funktionieren. Um das Problem zu beheben, eine zu tun hat, eine von den Dingen, 1) entfernen ui-widget-content Klasse 2) Verwendung background CSS-Stil statt background-color 2) Verwendung background-image:none zusammen mit dem background-color Stil. Der einfachste Weg, dies zu tun, ist Ihren benutzerdefinierten AltRowClass definieren

.myAltRowClass { background: #DDDDDC; }

oder

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

und dann zur Verwendung altRows:true und altclass:'myAltRowClass' Parameter jqGrid.

Eine andere Möglichkeit ist die gleiche ohne altRows und altclass Parameter zu tun:

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

Im Fall werden Sie hat einige kleine Nachteile in schweben oder die geraden Linien wählen. Der folgende Code funktioniert besser, aber es das gleiche tun, was altRows:true und altclass:'myAltRowClass' tun:

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

Von der Ursache der Hintergrundfarbe und andere CSS-Stile Attribute, die Sie für die geraden Zeilen festlegen sind abhängig vom Thema, das Sie verwenden, wenn Sie also planen Themeroller verwenden Sie altclass für jedes Thema zu wählen haben, denen Sie erlauben zu wählen.

AKTUALISIERT : Gerade gesehen, dass ich den Link zu der Demo-Datei nicht mit einberechnet, die zeigen, was ich geschrieben habe zu Hause ist. Die Demo ist hier .

Answer 2

Oleg .. in Loadcomplete:

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

Und dann in der Tabelle Definition:

altRows:true,
altclass:'myAltRowClass',

Mit `myAltRowClass':

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

Answer 3

Hier ist meine Lösung:

altRows     : true,
altclass    : 'oddRow',

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

es für mich gearbeitet und kann mit jedem ui Thema verwendet werden.

Answer 4

Ich habe die folgende CSS auf eine Zusatzdatei Stil die zweite Zeile und Zeile schwebt ohne zusätzliche Javascript zu verwenden:

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