Wie kann ich die Hintergrundfarbe einer Zelle in eine jqgrid für einen benutzerdefinierten Formatierer?

Ändern kann ich die Farbe für den text dadurch in jqgrid benutzerdefinierten Formatierer:

function YNFormatter(cellvalue, options, rowObject)
{
    var color = (cellvalue == "Y") ? "green" : "red";
    var cellHtml = "<span style='color:" + color + "' originalValue='" +
                                cellvalue + "'>" + cellvalue + "</span>";

    return cellHtml;
 }

will ich aber jetzt ändern Hintergrundfarbe der gesamten Zelle (statt der text-Farbe).

Ist das möglich?

  • Überprüfen Sie aktualisierte Antwort.
  • ich fügte hinzu, ein weiterer Kommentar
  • Man sollte Sie nur verwenden 'background-color' statt 'color' aus und legen Sie zusätzliche Stil 'background-image':'none' zu entfernen, das Bild im hintergrund stammt noch aus der jQuery-UI-Klasse "ui-widget-content'. Wenn Sie möchten, zusätzlich die standard-Farbe für den Schwebeflug oder/und die ausgewählten Zeilen, die Sie verwenden können, Technik, die ich beschrieben in stackoverflow.com/questions/4956949/...
  • hintergrund-Farbe ist nur für die Spannweite (und nicht die ganze TD-Zelle)
  • In deiner Frage hast du geschrieben, dass Sie wollen/müssen, verwenden Sie einen benutzerdefinierten Formatierer. Der text zurückgegeben, indem die benutzerdefinierte formatter-platziert werden in den <td> Zelle. So in der Art du hast keine chance, zu ändern, die <td> selbst. Maximale, was Sie tun können, ist, platzieren Sie jedes element wie <span> haben könnte, die gesamte Größe des <td> (abhängig von der verwendeten CSS). In dem Fall ist der hintergrund der <span> sehen sein wird, für die der Benutzer genau wie der hintergrund der Zellen. Verwenden von benutzerdefinierten formatter können Sie nicht mehr tun.
  • Alle klar Mach ich und schrieb meine Antwort.
  • vielen Dank für das Beispiel (und Ihre Geduld).. in der Tat sehr hilfreich

InformationsquelleAutor leora | 2010-07-14
  1. 20

    Wenn Sie möchten, verwenden <span> - element in der benutzerdefinierten Zelle formatter können Sie die Rückgabe von benutzerdefinierten formatter -

    return '<span class="cellWithoutBackground" style="background-color:' +
       color + ';">' + cellvalue + '</span>';

    wo der Stil der span.cellWithoutBackground können Sie definieren, wie zum Beispiel das folgende

    span.cellWithoutBackground
{
    display:block;
    background-image:none;
    margin-right:-2px;
    margin-left:-2px;
    height:14px;
    padding:4px;
}

    Wie es funktioniert, sehen Sie live -hier:
    Wie kann ich die Hintergrundfarbe einer Zelle in eine jqgrid für einen benutzerdefinierten Formatierer?

    AKTUALISIERT: Die Antwort ist alt. Die beste Praxis wäre, die Nutzung cellattr Rückruf in colModel anstelle der Verwendung von benutzerdefinierten Formatierungen. Ändern der Hintergrundfarbe der Zelle ist im Allgemeinen einfach zuweisen style oder class - Attribut, um die Zellen der Spalte (<td> Elemente). Die cellattr callback definiert in der Spalte colModel ermöglicht, genau dies zu tun. Kann man ja immer noch vordefinierte Formatierungen wie formatter: "checkbox", formatter: "currency", formatter: "date" und so weiter, aber trotzdem ändern Sie die Hintergrundfarbe in der Spalte. In der gleichen Weise die rowattr Rückruf, die definiert werden kann als das jqGrid-option (außerhalb der bestimmten Spalte colModel), ermöglicht das zuweisen Stil/Klasse für die gesamte Zeile (<tr> Elemente).

    Mehr Informationen über cellattr finden hier und hier, zum Beispiel. Eine andere Antwort erklärt rowattr.

    InformationsquelleAutor Oleg
  2. 1

    Hier ist was ich getan habe:

    jQuery("#grid_id").jqGrid({
    ...
       colModel: [
          ...
          {name:'price', index:'price', width:60, align:"center", editable: true, formatter:myFmatter},
          ...
       ],
        afterInsertRow: function(rowId, data)
        {
            $("#grid_id").setCell(rowId, 'price', '', {'background-color':'#' + data.colorHEX});
        }
...
});
    InformationsquelleAutor ccwasden
  3. 0

    Hier

    $("#cell").setCell(Row , Column, Value, { background: '#888888'});

    Eigentlich brauchst du nicht einmal für einen benutzerdefinierten Formatierer, wenn Sie nur beabsichtigen, es zu tun für die Einstellung der Farben.
    Sie können sogar festlegen, color-Wert, der von hier aus wie,

    var color = (Value == "Y") ? "green" : "red";
$("#cell").setCell(Row , Column, Value, { background: '#888888', color: color});

    Happy Coding.

    • sagen Sie, dass diese Zeile in meiner benutzerdefinierte formatter-code-Funktion?
    • eigentlich will ich es tun, wie eine benutzerdefinierte formatter-da habe ich einige bedingte Logik basiert auf anderen Daten Eigenschaften. Auch,wo sind Sie erste Zeile, Spalte und Wert aus ?
    • Sie sollten nicht verwenden, die benutzerdefinierte formatter. Stattdessen können Sie ändern Sie die Hintergrundfarbe von einigen Zellen in loadComplete Veranstaltung. Erhalten Sie die ids der geladenen Daten mit Bezug auf getDataIDs - Methode, dann erhält die Zelle Daten in einer Schleife mit getCell es zu prüfen, und ändern Sie den Stil der Zelle mit setCell mit leerer string als Daten-parameter (siehe trirand.com/jqgridwiki/doku.php?id=wiki:methods für weitere details). Sie können auch 'formatter:die checkbox" zusätzlich.
    • warum würde ich nicht verwenden, ein Kunde formatter?
    • Sie können jede jqGrid-Funktionen, die Sie mögen. Verwendung der benutzerdefinierten Formatierung ist im Allgemeinen zu produzieren einen HTML-code für eine Zelle. Um den hintergrund Farbe ist es genug, nur setzen eine CSS-Klasse auf die Zelle. Ich würde definieren Sie in CSS zwei Klassen "redBackground" und "greenBackground" und legen Sie auf die Zelle, die nur eine von den Klassen. Als Formatierung verwende ich 'formatter:checkbox'. Sie können tun, was Sie bevorzugen.
    • ich Tue dies, in Kombination mit anderen text-Formatierung auf die Zelle, so bin ich bereits über eine benutzerdefinierte formatter. deswegen habe ich gehofft, es wurde eine zusätzliche Zeile, die mir erlaubt, die Hintergrundfarbe in diesem benutzerdefinierten formatter-Funktion

    InformationsquelleAutor simplyharsh
Schreibe einen Kommentar