Evidenzia fila quando la casella è vera

Question

Qualcuno può aiutarmi, ho un jqgrid e voglio evidenziare la riga se la casella è vera, grazie !!

questo è quello che voglio fare in questo progetto ...

function loadjqGrid(jsonGridData){ 
    var xaxis=1300 
    var yaxis = $(document).height(); 
    yaxis = yaxis-500; 
    getGrids();  
    $("#maingrid").jqGrid({ 
     url:'models/mod.quoservicetypedetails.php?ACTION=view', 
     mtype: 'POST', 
     datatype: 'xml', 
     colNames:getColumnNames(jsonGridData), 
     colModel :[ 
      {name:'TypeID', index:'TypeID', width:350,hidden:true, align:'center',sortable:false,editable:true, 
      edittype:"select",editoptions:{value:getTypeID()},editrules: { edithidden: true}}, 
      {name:'Order1', index:'Order1', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},     
      {name:'Order2', index:'Order2', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'Order3', index:'Order3', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},      
      {name:'Description', index:'Description', width:140, align:'center',sortable:false,editable:true, 
      edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},      
      {name:'Notes', index:'Notes', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'Measure', index:'Measure', width:80, align:'center',sortable:false,editable:true, edittype:"textarea", editoptions:{size:"30",maxlength:"30"}},     
      {name:'UnitPrice', index:'UnitPrice', width:100, align:'center',sortable:false,editable:false,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'Remarks', index:'Remarks', width:140, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'UnitCost', index:'UnitCost', width:100, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},  
      {name:'Service', index:'Service', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      //If the GroupHeader is true the row background is yellow 
      {name:'GroupHeader', index:'GroupHeader', width:100, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
      {name:'IsGroup', index:'IsGroup', width:80, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
     ], 
     viewrecords: true, 
     rowNum:20, 
     sortname: 'id', 
     viewrecords: true, 
     sortorder: "desc", 
     height: yaxis, 
     pager : '#gridpager', 
     recordtext: "View {0} - {1} of {2}", 
     emptyrecords: "No records to view", 
     loadtext: "Loading...", 
     pgtext : "Page {0} of {1}",   
     height: yaxis, 
     width: xaxis, 
     shrinkToFit: false, 
     multiselect: true, 
     editurl:'models/mod.quoservicetypedetails.php?ACTION=edit' 
    }); 
} 

Come potrei fare questo? Qualcuno può aiutarmi?

Answer 1

Ho descritto in the answer un buon modo come è possibile implementare l'evidenziazione.

La versione 4.3.2 di jqGrid ha una nuova funzione - rowattr callback (vedere my original suggestion), che è stata introdotta in particolare per casi come i vostri. Permette di evidenziare alcune righe di griglia durante il riempimento dello della griglia. Per ottenere il miglior vantaggio in termini di prestazioni, è necessario utilizzare anche gridview: true. A proposito, ti consiglio di usare gridview: true in tutti i jqGrids.

L'utilizzo di rowattr callback è molto semplice:

gridview: true, 
rowattr: function (rd) { 
    if (rd.GroupHeader === "1") { // verify that the testing is correct in your case 
     return {"class": "myAltRowClass"}; 
    } 
} 

Il CSS classe myAltRowClass dovrebbe definire il colore delle righe evidenziate sfondo.

Il corrispondente demo si possono trovare here:

Perché nel vostro demo è necessario solo evidenziare e non selezionare le righe non ho usato multiselect: true nel mio demo. In caso di multiselect: true funziona esattamente allo stesso modo.

Alla fine della mia risposta mi piacerebbe raccomandarvi di usare column templates. La funzione renderà il tuo codice più breve, più leggibile e di facile manutenzione. Quello che devi fare è il seguente:

• è possibile includere le impostazioni comuni o utilizzate più frequentemente dalle definizioni di colonna in cmTemplete. Nel tuo caso potrebbe essere

cmTemplate: {align: 'center', sortable: false, editable: true, width: 80} 

• allora si può definire alcune variabili che descrivono le proprietà comuni che si utilizzano di frequente in alcune colonne. Per esempio:

var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select', 
     editoptions: {value: "1:0"}}, 
    myTextareaTemplate = {edittype: "textarea", 
     editoptions: {size: "30", maxlength: "30"}}; 

• dopo che è possibile utilizzare myCheckboxTemplate e myTextareaTemplate interno colModel che ridotta nel tuo caso al seguente

colModel: [ 
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select", 
     editoptions: {value: getTypeID()}, editrules: { edithidden: true}}, 
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate}, 
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate}, 
    {name: 'Order3', index: 'Order3', template: myTextareaTemplate}, 
    {name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate}, 
    {name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate}, 
    {name: 'Measure', index: 'Measure', template: myTextareaTemplate}, 
    {name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate}, 
    {name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate}, 
    {name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate}, 
    {name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate}, 
    //If the GroupHeader is true the row background is yellow 
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate}, 
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate} 
], 
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},