jqGrid Zebra / Alt Reihen Hintergrund arbeitet nicht aufgrund UI Theme Klasse
-
09-10-2019 - |
Frage
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 .
Lösung
jqGrid Verwendung jQuery UI-Klasse 'ui-Priorität-Sekundär' als Standardwert des altclass
Parameter. Die Klasse ist in jQuery UI Dokumentation als
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 .
Andere Tipps
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; }
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.
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);
}