Evidenzia la riga quando la casella di controllo è vera

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

inserisci la descrizione dell'immagine qui

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 farlo? Qualcuno può aiutarmi?

    Ho descritto nella risposta in un modo valido come è ansible implementare l’evidenziazione.

    La versione 4.3.2 di jqGrid ha una nuova funzione – rowattr callback (vedi il mio suggerimento originale ), che è stata introdotta specialmente per casi come i tuoi. Permette di evidenziare alcune righe di griglia durante il riempimento della griglia. Per avere il miglior vantaggio in termini di prestazioni dovresti usare gridview: true più. Tra l’altro, ti consiglio di usare gridview: true in tutti i jqGrids .

    L’uso del callback rowattr è molto semplice:

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

    La class CSS myAltRowClass dovrebbe definire il colore di sfondo delle righe evidenziate.

    La demo corrispondente che puoi trovare qui :

    inserisci la descrizione dell'immagine qui

    Perché nella tua demo hai bisogno solo di evidenziare e non selezionare le righe che non ho usato il multiselect: true nella mia demo. In caso di multiselect: true funziona esattamente allo stesso modo.

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

    • puoi includere le impostazioni comuni o più utilizzate dalle definizioni di colonna in cmTemplete . Nel tuo caso potrebbe essere
     cmTemplate: {align: 'center', sortable: false, editable: true, width: 80} 
    • quindi è ansible definire alcune variabili che descrivono proprietà comuni che si utilizzano frequentemente 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"}}; 
    • dopodiché puoi usare myCheckboxTemplate e myTextareaTemplate all’interno di colModel che verrà ridotto 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},