Resalte la fila cuando la casilla de verificación sea verdadera

Question

Puede alguien ayudarme, tengo una jqgrid y quiero resaltar la fila si la casilla de verificación es verdadera, ¡¡¡gracias !!

esto es lo que quiero hacer en este proyecto ...

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

¿Cómo podría hacer esto? ¿Alguien me puede ayudar?

Answer 1

describí en the answer una buena manera de cómo puede implementar el resaltado.

La versión 4.3.2 de jqGrid tiene una nueva función - rowattr de devolución de llamada (consulte my original suggestion), que se presentó especialmente para casos como el suyo. Le permite resaltar algunas filas de la cuadrícula durante el llenado de la cuadrícula. Para obtener la mejor ventaja de rendimiento, también debe usar gridview: true. Por cierto, le recomiendo que use gridview: true en todos los jqGrids.

El uso de rowattr devolución de llamada es muy fácil:

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

La clase myAltRowClass CSS debe definir el color de fondo de las filas resaltadas.

La demostración correspondiente se puede encontrar here:

Debido a que en su demostración que necesita sólo resaltar y no seleccionar las filas que no utilicé multiselect: true en mi demo. En el caso de multiselect: true funciona exactamente de la misma manera.

Al final de mi respuesta, me gustaría recomendarle que use column templates. La característica hará que su código sea más corto, más legible y fácil de mantener. Lo que debe hacer es lo siguiente:

• puede incluir ajustes comunes o los más utilizados de las definiciones de columnas en cmTemplete. En su caso podría ser

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

• entonces usted puede definir algunas variables que describen las propiedades comunes que se utilizan con frecuencia en algunas columnas. Por ejemplo:

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

• después de que se puede utilizar myCheckboxTemplate y myTextareaTemplate interior de colModel que será reducida en su caso para la siguiente

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