JQGrid, changer la couleur de fond de ligne en fonction de la condition

Juste pour la référence des autres, voici le code complété. J'ai trouvé aussi j'ai besoin d'ajouter une autre condition pour changer la couleur de la ligne. J'avais besoin de changer la couleur de ligne uniquement lorsque la est vrai, et lorsque l'état est complet. Ce code le montre. Il a également corrigé le problème de perdre le formatage lorsque la grille est rechargée lors du tri des colonnes. J'espère que cela aide quelqu'un d'autre.

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

ainsi la fonction formatter ajoute le rowid qui doit être changé à un tableau si la valeur payée est true, alors quand la grille est complète il change le css pour chaque id de ligne, après qu'il vérifie la valeur du 7ème td qui est où mon statut est trouvé pour s'assurer qu'il est complet.

j'ai essayé ceci et fonctionne pour définir la couleur de fond pour la rangée entière. Fonctionne avec la pagination aussi:

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

Qu'en est-il via Jquery Css.

Voir le code ci-dessous pour définir les lignes avec le statut inactif à rouge. Nom de grille est jqTable.

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

ceci m'a indiqué la bonne direction mais n'a pas vraiment fonctionné pour moi avec la pagination. Si cela peut aider quelqu'un, ce qui suit a fonctionné et n'utilise pas le formatteur colModel.

j'ai besoin d'appliquer une couleur rouge des cellules individuelles avec des impayés (nom:os) dans le 9ème td sur ma grille. Datatype était json et j'ai utilisé la fonction loadComplete qui a la réponse des données comme paramètre:

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

se débarrasser de la pagination des problèmes que j'ai eu et fonctionne sur le tri etc..

comme mise de côté - j'ai trouvé la fonction loadComplete utile pour ajouter des informations dynamiques comme changer les textes de légende pour les résultats de recherche-probablement évident pour beaucoup mais je suis nouveau à json, jquery et jqgrid

pour peindre la grille, utilisez la fonction ci-dessous. Par exemple: PintarRowGrilla('#gridPreSeleccion', 3, 9, '#8FD9F1'); 9--> nombre de colonnes de la grille:

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

j'ai utilisé le simple sélecteur JQuery et appliqué mes styles désirés. Tous vous avez besoin est l'uid (rowid) de la ligne que vous souhaitez appliquer les styles.

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

Dans mon cas, je voulais changer la couleur des lignes qui n'ont pas été enregistrés à changer de couleur rouge. Pour supprimer la couleur exécutez simplement le suivant.

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

espérons que cela aide quelqu'un.

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

utilisez jqGrid row event jqGridRowAttr pour définir n'importe quel formatage. Pour plus de détails, voirhttp://www.trirand.com/blog/?page_id=393/help/rowattr-triger-after-setrowdata exemple les étapes à suivre pour définir background sont:

tout d'abord définir votre CSS personnalisé pour le formatage conditionnel en ligne ou votre fichier CSS. Par exemple (voir le résultat dans le navigateur google chrome)

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

ajouter l'événement de ligne juste après ColModel

rowattr: function (rd) {

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

                }