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

utiliser la fonction de formatage:

comme dans ce post

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

Juste pour la référence des autres, voici le code complété. J’ai également constaté que je devais append 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 grid était rechargée lors du sorting 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 grid 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.

J’ai essayé cela et travaille pour définir la couleur de fond 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'}); } } } 

Qu’en est-il de via Jquery Css.
Voir le code ci-dessous pour définir les lignes avec le statut Inactif en rouge. Le nom de la grid est jqTable .

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

Cela m’a orienté dans la bonne direction, mais n’a pas tout à fait fonctionné pour moi avec la pagination. Si cela aide quelqu’un, les éléments suivants fonctionnent et n’utilisent pas le formateur colModel.

J’avais besoin d’appliquer une couleur rouge à des cellules individuelles avec des quantités exceptionnelles (nom: os) au 9ème étage sur ma grid. 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é de mes problèmes de pagination et travaille sur le sorting, etc.

En passant – j’ai trouvé la fonction loadComplete utile pour l’ajout d’informations dynamics, 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

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

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

J’ai utilisé un simple sélecteur JQuery et appliqué mes styles souhaités. Tout ce dont vous avez besoin est l’uid (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.

  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 l’événement de ligne JQGrid jqGridRowAttr pour définir le formatage. Pour plus de détails, voir http://www.sortingrand.com/blog/?page_id=393/help/rowattr-sortingger-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" }; } }