Ausgewählte Zeile Hintergrundfarbe

Question

Ich benutze jqgrid mit jquery-ui 'Glätte' Thema, leider mit diesem Thema die ausgewählte Zeile Hintergrundfarbe ist zu hell, ich versuche, die Hintergrundfarbe zu ändern, um es sichtbar zu machen. Ich habe versucht, ui-state-highlight in css (mit! Wichtig override) zu ändern, aber das funktioniert nicht. Gibt es eine CSS-Möglichkeit, dies zu tun, oder ist ein jqgrid-benutzerdefinierter Formatierer der richtige Weg?

Answer 1

Die Klasse ui-state-highlight verwendet das CSS-Attribut background. So ein kleiner Trick ist, background anstelle von background-color zu verwenden, um das Hintergrundbild zu entfernen. Zum Beispiel

.ui-state-highlight { background: yellow !important; } 

siehe live here.

AKTUALISIERT: Es ist nicht notwendig, !important zu verwenden. Es ist genug, um eine spezifischere Regel wie

.ui-jqgrid-btable .ui-state-highlight { background: yellow; } 

oder

.ui-jqgrid .ui-state-highlight { background: yellow; } 

Answer 2

Angenommen angeben, wenn wir eine Farbe für die ausgewählten Zeilenzellen und verbleibenden Zeilen Zellen andere Farbe möchten,

In Das folgende Beispiel Markierte Daten in Zeilenzellen werden in gelber Farbe angezeigt und die Daten in den verbleibenden Zeilenzellen sind in blauer Farbe.

Angenommen, wir haben zwei Klassen mit den Namen "holdRow" für blauen Hintergrund und "HighlightHoldRow" für gelben Hintergrund Mit dem folgenden Code "RowSelect" ist die Methode, die während der Zeilenauswahl aufgerufen wird:

Betrachten Sie den folgenden Code

.holdRow td { 
font-weight : bold !important; 
color: Blue !important; 
    } 

    .higLightholdRow td { 
font-weight : bold !important; 
color: Yellow !important; 

}

var LastRowId = ""; 
    function RowSelect(id) { 
if (Flag == "TRUE") { 
    var grid = $('#gvName); 
    if (LastRowId != "" && LastRowId != undefined && LastRowId != id) { 
     tr = grid[0].rows.namedItem(LastRowId); 
     $(tr).removeClass("higLightholdRow"); 
     $(tr).addClass("holdRow"); 
     LastRowId = ""; 
    } 
    tr = grid[0].rows.namedItem(id); 
    $(tr).removeClass("holdRow"); 
    $(tr).addClass("higLightholdRow"); 
    LastRowId = id; 
    } 

}

Während Trirand Grid-Erklärung können wir diese Client-Side-Event rufen Sie die f mit letzte loc.

ClientSideEvents-RowSelect="RowSelect" 

Die RowSelect Methode wird bei der Auswahl einer Zeile aufgerufen, und ausgewählte Zeile wird gelb Farbe als Hintergrund haben und restlichen Zeilen blaue Farbe als Hintergrund haben

Answer 3

jQuery('#jqGrid').find('.ui-state-highlight').css('background', 'skyblue'); 

Sie mögen diese hinzufügen können in Ihre jquery Datei