webentwicklung-frage-antwort-db.com.de

JQGrid, Zeilenhintergrundfarbe basierend auf Bedingung ändern

Ich habe das folgende Jqgrid, das das auf meine Masterseite importierte Jquery-Ui-Design verwendet.

  $("#shippingscheduletable").jqGrid({
            url: $("#shippingscheduleurl").attr('href'),
            datatype: 'json',
            mtype: 'GET',
            altRows: true,
            colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'IsPaid', 'Promo', 'Carrier', 'Int Notes', 'Ord Notes', 'Terms'],
            colModel: [
     { name: 'Company', index: 'id', width: 125, align: 'left' },
     { name: 'Model', index: 'Model', width: 50, align: 'left' },
     { name: 'Invoice', index: 'Invoice', width: 50, align: 'left' },
     { name: 'Date', index: 'OrderDate', width: 60, align: 'left' },
     { name: 'Po', index: 'PONum', width: 75, align: 'left' },
     { name: 'Serial', index: 'Serial', width: 50, align: 'left' },
     { name: 'Status', index: 'OrderStatus', width: 70, align: 'left' },
     { name: 'City', index: 'City', width: 100, align: 'left' },
     { name: 'State', index: 'State', width: 30, align: 'left' },
     { name: 'IsPaid', index: 'IsPaid', width: 30, align: 'left' },
     { name: 'Promo', index: 'Promo', width: 50, align: 'left' },
     { name: 'Carrier', index: 'Carrier', width: 80, align: 'left' },
     { name: 'InternalNotes', index: 'InternalNotes', width: 110, align: 'left' },
     { name: 'OrderNotes', index: 'OrderNotes', width: 110, align: 'left' },
     { name: 'Terms', index: 'Terms', width: 60, align: 'left' }
     ],
            pager: jQuery("#shippingschedulepager"),
            rowNum: 100,
            rowList: [100, 150, 200],
            sortname: 'Company',
            sortorder: "asc",
            viewrecords: true,
            height: '700px',
            multiselect: true
        });

Ich möchte die Zeilenfarbe für alle Zeilen ändern, die einen echten Wert für das IsPaid-Feld haben. Ist das möglich? Wenn ja, wie würde ich das tun? Ich habe nach benutzerdefinierten Formatierungen recherchiert, bin mir aber nicht sicher, ob dies der richtige Ansatz ist, da ich nichts über eine Änderung der Hintergrundfarbe finden kann.

25
twal

formatierungsfunktion verwenden:

wie in diesem Beitrag

http://www.trirand.net/forum/default.aspx?g=posts&m=2678

7
Haim Evgi

Nur als Referenz für andere ist hier der vollständige Code. Ich fand auch, dass ich eine weitere Bedingung hinzufügen musste, um die Farbe der Zeile zu ändern. Ich musste die Zeilenfarbe nur ändern, wenn das bezahlte Feld wahr ist und der Status abgeschlossen ist. Dieser Code zeigt das. Es wurde auch das Problem behoben, dass die Formatierung verloren ging, wenn das Raster beim Sortieren der Spalten neu geladen wurde. Ich hoffe das hilft jemand anderem.

    var rowsToColor = [];
    jQuery(function () {
        $("#shippingscheduletable").jqGrid({
            url: $("#shippingscheduleurl").attr('href'),
            datatype: 'json',
            mtype: 'GET',
            altRows: true,
            colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'Paid', 'Promo', 'Carrier', 'Int Notes', 'Ord Notes', 'Terms'],
            colModel: [
     { name: 'Company', index: 'id', width: 125, align: 'left' },
     { name: 'Model', index: 'Model', width: 50, align: 'left' },
     { name: 'Invoice', index: 'Invoice', width: 50, align: 'left' },
     { name: 'Date', index: 'OrderDate', width: 60, align: 'left' },
     { name: 'Po', index: 'PONum', width: 75, align: 'left' },
     { name: 'Serial', index: 'Serial', width: 50, align: 'left' },
     { name: 'Status', index: 'OrderStatus', width: 70, align: 'left' },
     { name: 'City', index: 'City', width: 100, align: 'left' },
     { name: 'State', index: 'State', width: 30, align: 'left' },
     { name: 'Paid', index: 'IsPaid', width: 30, align: 'left', formatter: rowColorFormatter },
     { name: 'Promo', index: 'Promo', width: 50, align: 'left' },
     { name: 'Carrier', index: 'Carrier', width: 80, align: 'left' },
     { name: 'InternalNotes', index: 'InternalNotes', width: 110, align: 'left' },
     { name: 'OrderNotes', index: 'OrderNotes', width: 110, align: 'left' },
     { name: 'Terms', index: 'Terms', width: 60, align: 'left' }
     ],
            pager: jQuery("#shippingschedulepager"),
            rowNum: 100,
            rowList: [100, 150, 200],
            sortname: 'Company',
            sortorder: "asc",
            viewrecords: true,
            height: '700px',
            multiselect: true,
            gridComplete: function () {
                for (var i = 0; i < rowsToColor.length; i++) {
                    var status = $("#" + rowsToColor[i]).find("td").eq(7).html();
                    if (status == "Complete") {
                        $("#" + rowsToColor[i]).find("td").css("background-color", "green");
                        $("#" + rowsToColor[i]).find("td").css("color", "silver");
                    }
                }
             }
        });
    });

    function rowColorFormatter(cellValue, options, rowObject) {
        if (cellValue == "True")
            rowsToColor[rowsToColor.length] = options.rowId;
        return cellValue;
    }

die Formatierungsfunktion fügt also die Zeilen-ID hinzu, die in einem Array geändert werden muss, wenn der bezahlte Wert true ist. Wenn das Raster vollständig ist, ändert es die CSS für jede Zeilen-ID Status wird gefunden, um sicherzustellen, dass er vollständig ist.

16
twal

Ich habe dies versucht und arbeitet, um die Hintergrundfarbe für die gesamte Zeile festzulegen. Funktioniert auch mit Paging:

gridComplete: function()
{
    var rows = $("#"+mygrid).getDataIDs(); 
    for (var i = 0; i < rows.length; i++)
    {
        var status = $("#"+mygrid).getCell(rows[i],"status");
        if(status == "Completed")
        {
            $("#"+mygrid).jqGrid('setRowData',rows[i],false, {  color:'white',weightfont:'bold',background:'blue'});            
        }
    }
}
11
Anushka

Dies wies mich in die richtige Richtung, funktionierte bei Paging jedoch nicht für mich. Wenn es jemandem hilft, hat das folgende funktioniert und verwendet nicht den colModel-Formatierer. 

Ich musste einzelne Zellen mit überragenden Mengen (Name: os) in der 9. Zeitspanne in meinem Raster mit einer roten Farbe versehen. Datentyp war Json und ich habe die Funktion loadComplete verwendet, die die Datenantwort als Parameter hat:

loadComplete: function(data) {
    $.each(data.rows,function(i,item){
        if(data.rows[i].os>0){
            $("#" + data.rows[i].id).find("td").eq(9).css("color", "red");
        }
    });
},

Die Paging-Probleme, die ich hatte, wurden entfernt und arbeiten beim Sortieren usw.

Nebenbei bemerkt, habe ich die loadComplete-Funktion für das Hinzufügen dynamischer Informationen wie das Ändern der Untertiteltexte für Suchergebnisse als nützlich erachtet - wahrscheinlich für viele offensichtlich, aber ich bin neu bei Json, Jquery und Jqgrid

4
annette

Was ist mit via Jquery Css.
Siehe Code unten, um Zeilen mit dem Status "Inaktiv" auf Rot zu setzen Der Name des Gitters ist jqTable.

setGridColors: function() {
    $('td[title="Inactive"]', '#jqTable').each(function(i) {
        $(this).parent().css('background', 'red');
    });
}
4
Yehuda

Verwenden Sie die folgende Funktion, um das Raster zu zeichnen. Zum Beispiel: PintarRowGrilla('#gridPreSeleccion', 3, 9, '#8FD9F1'); 9 -> Anzahl der Spalten Ihres Rasters:

function PintarRowGrilla(idGrilla, idrow, nrocolumnas, color)
{
    while(nrocolumnas > 0)
    {
        nrocolumnas--;
        jQuery(idGrilla).setCell(idrow, nrocolumnas, '', {
            'background-color': color
        });
    }
}

Ich habe den einfachen JQuery-Selector verwendet und meine gewünschten Stile angewendet.

if (!xCostCenter[i].saveSuccessful)
{  
    $("#row" + _updatedRowIDs[i] + "jqxgrid > div").css({ "background-color": "rgb(246, 119, 119)" });
}

In meinem Fall wollte ich die Farbe der nicht gespeicherten Zeilen ändern, um sie in eine rote Farbe zu ändern. Um die Farbe zu entfernen, führen Sie einfach folgendes aus.

$("#contenttablejqxgrid > div > div").css({ "background-color": "" });

hoffe das hilft jemandem. 

1
Rei
 loadComplete: function() {
    var ids = $(this).jqGrid("getDataIDs"), l = ids.length, i, rowid, status;
        for (i = 0; i < l; i++) {
        rowid = ids[i];
    // get data from some column "ColumnName"
        varColumnName= $(this).jqGrid("getCell", rowid, "ColumnName");
    // or get data from some 
    //var rowData = $(this).jqGrid("getRowData', rowid);

    // now you can set css on the row with some
        if (varColumnName=== condition) {
            $('#' + $.jgrid.jqID(rowid)).addClass('myAltRowClass');
         }
    }
},
0

Verwenden Sie das JQGrid-Zeilenereignis jqGridRowAttr, um die Formatierung festzulegen. Weitere Informationen finden Sie unter http://www.trirand.com/blog/?page_id=393/help/rowattr-triger-after-setrowdata .

Legen Sie zunächst Ihr benutzerdefiniertes CSS für die bedingte Inline-Formatierung oder Ihre CSS-Datei fest. Zum Beispiel (siehe Ergebnis in Chrome-Browser)

.bg-danger {
  background-color: #f2dede;
}
.bg-danger td{ background-color : #ff0000ad; }

Zeilenereignis direkt nach ColModel hinzufügen

rowattr: function (rd) {

                    if (rd.FileExists == 'no') // your condition here
                    {
                        return { "class": "bg-danger" };
                    }

                }
0
Muhammad Yaseen