web-dev-qa-db-fra.com

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

J'ai le jqgrid suivant qui utilise le thème jquery ui importé dans ma page maître.

  $("#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 de la ligne pour toutes les lignes qui ont une valeur vraie pour le champ IsPaid. Est-ce possible? Si oui, comment ferais-je cela? 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 sur le changement de couleur de l'arrière-plan.

jqueryasp.net-mvcjqgrid
25
twal

utiliser la fonction de formatage:

comme dans ce post

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

7
Haim Evgi

Juste pour la référence des autres, voici le code complété. J'ai également constaté que je devais ajouter une autre condition pour modifier la couleur de la ligne. J'avais besoin de changer la couleur de la ligne uniquement lorsque le champ payé est vrai et lorsque l'état est terminé. Ce code montre que. Cela corrigeait également le problème de perte de mise en forme lorsque la grille était rechargée lors du tri des colonnes. J'espère que ça aidera 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;
    }

donc la fonction de formatage ajoute le rowid qui doit être changé en un tableau si la valeur payée est true, puis quand la grille est complète, elle change le css pour chaque id de ligne, après avoir vérifié la valeur du 7e td qui est où le statut est trouvé pour s'assurer qu'il est complet.

16
twal

J'ai essayé cela et travaille pour définir la couleur d'arrière-plan pour la ligne entière. Fonctionne également avec la pagination:

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

Cela m'a orienté dans la bonne direction mais n'a pas vraiment fonctionné pour moi avec la pagination. Si cela aide quelqu'un, ce qui suit fonctionne et n'utilise pas le formateur colModel. 

J'avais besoin d'appliquer une couleur rouge à des cellules individuelles avec des quantités exceptionnelles (nom: os) dans le 9ème td de ma grille. Le type de données était json et j'ai utilisé la fonction loadComplete qui a pour paramètre la réponse aux données:

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

Je me suis débarrassé des problèmes de pagination que j'ai eu et travaille sur le tri, etc.

En passant - j’ai trouvé la fonction loadComplete utile pour ajouter des informations dynamiques, telles que la modification du texte des légendes pour les résultats de recherche - une évidence pour beaucoup, mais je suis novice dans json, jquery et jqgrid

4
annette

Qu'en est-il de via Jquery Css.
Voir le code ci-dessous pour définir en rouge les lignes dont l'état est inactif Le nom de la grille est jqTable.

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

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

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

J'ai utilisé un simple sélecteur JQuery et appliqué les styles que je souhaitais ... Tout ce dont vous avez besoin est l'identifiant de ligne (rowid) de la ligne à laquelle 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'étaient pas enregistrées pour passer à une couleur rouge. Pour supprimer la couleur, exécutez ce qui suit.

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

espérons que cela aide quelqu'un. 

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
Sebastian Cardoza

Utilisez l'événement de ligne JQGrid jqGridRowAttr pour définir tout formatage. Pour plus de détails, voir http://www.trirand.com/blog/?page_id=393/help/rowattr-triger-after-setrowdata Voici des exemples d'étapes permettant de définir l'arrière-plan:

Commencez par définir votre CSS personnalisé pour la mise en forme conditionnelle en ligne ou votre fichier CSS. Par exemple (voir le résultat dans le navigateur chrome)

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

Ajouter un événement de ligne juste après ColModel

rowattr: function (rd) {

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

                }
0
Muhammad Yaseen