JQGrid, cambia il colore di sfondo della riga in base alle condizioni

Question

Ho il seguente jqgrid che utilizza il tema ui jquery importato nella mia pagina 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 
     }); 

desidero cambiare il colore di tutte le righe che hanno un valore vero per il campo IsPaid. È possibile? se sì, come lo farei? Ho cercato la formattazione personalizzata, ma non sono sicuro se questo è l'approccio corretto, in quanto non riesco a trovare nulla sul cambiamento del colore dello sfondo.

Answer 1

uso funzione di formattazione:

come in questo post

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

Answer 2

Solo per riferimento di altri qui è il codice compilato. Ho anche scoperto che avevo bisogno di aggiungere un'altra condizione per cambiare il colore della riga. Avevo bisogno di cambiare il colore della riga solo quando il campo a pagamento è vero e quando lo stato è completo. Questo codice lo dimostra. Risolve anche il problema di perdere la formattazione quando la griglia viene ricaricata durante l'ordinamento delle colonne. Spero che questo aiuti qualcun'altro.

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

così la funzione formattatore aggiunge l'identificativo che deve essere modificato in un array se il valore pagato è vero, allora quando la griglia è completa cambia il css per ogni riga id, dopo che controlla il valore di il settimo td che è dove si trova il mio stato per assicurarsi che sia completo.

Answer 3

Questo mi ha indirizzato nella giusta direzione ma non ha funzionato abbastanza per me con il paging. Se aiuta qualcuno, quanto segue ha funzionato e non usa il formattatore colModel.

Avevo bisogno di applicare un colore rosso a singole celle con quantità in sospeso (nome: os) nel 9 ° td sulla mia griglia. Tipo di dati era JSON e ho usato la funzione loadComplete che ha la risposta dei dati come parametro:

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

sono liberato dei problemi di paging che ho avuto e funziona su di smistamento, ecc ..

Per inciso - I' Ho trovato la funzione loadComplete utile per aggiungere informazioni dinamiche come cambiare i testi delle didascalie per i risultati della ricerca - probabilmente ovvio a molti ma sono nuovo a json, jquery e jqgrid

Answer 4

Che dire di via Jquery Css.
Vedere il codice sotto per impostare le righe con stato Inattivo su rosso. Il nome della griglia è jqTable.

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

Answer 5

Per dipingere la griglia, utilizzare la funzione seguente. Per esempio: PintarRowGrilla('#gridPreSeleccion', 3, 9, '#8FD9F1'); 9 -> numero di colonne griglia:

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

Answer 6

ho provato questo e lavora per impostare il colore di sfondo per l'intera riga. Funziona anche con il cercapersone:

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

Answer 7

Ho utilizzato un semplice selettore JQuery e applicato i miei stili desiderati. Tutto ciò di cui hai bisogno è l'uid (rowid) della riga a cui desideri applicare gli stili.

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

Nel mio caso volevo cambiare il colore delle righe che non erano state salvate per passare a un colore rosso. Per rimuovere il colore basta eseguire quanto segue.

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

spero che questo aiuti qualcuno.

Answer 8

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