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

j'ai le jqgrid suivant qui utilise le thème jQuery ui importé sur ma page principale.

  $("#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
        });

je voudrais changer la couleur des lignes pour toutes les lignes qui ont une valeur vraie pour le champ IsPaid. Est-ce possible? si oui, comment puis-je faire? J'ai fait des recherches sur le formatage personnalisé, mais je ne suis pas sûr que ce soit la bonne approche, car je ne trouve rien à propos de changer la couleur du fond.

24
demandé sur Nikhil Patel 2010-10-11 20:37:52

9 réponses

utilisation du module de formatage de la fonction :

comme dans ce post

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

7
répondu Haim Evgi 2010-10-11 16:48:06

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.

16
répondu twal 2010-10-11 17:58:31

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'});            
        }
    }
}
11
répondu Anushka 2013-05-21 05:52:38

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');
    });
}
4
répondu Yehuda 2013-05-21 05:56:07

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

4
répondu annette 2013-05-21 05:57:26

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
        });
    }
}
1
répondu Erick S. Escalante Olano 2013-05-21 05:55:20

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.

1
répondu Rei 2014-04-30 22:52:28
 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
répondu Sebastian Cardoza 2015-01-16 15:28:40

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

                }
0
répondu Muhammad Yaseen 2018-05-09 05:50:07