php - programar - Resalte la fila cuando la casilla de verificación sea verdadera

insertar checkbox en excel 2016

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 la respuesta una buena manera de cómo implementar el resaltado.

La versión 4.3.2 de jqGrid tiene una nueva función: rowattr llamada de rowattr (ver mi sugerencia original ), que se introdujo especialmente para casos como el suyo. Le permite resaltar algunas filas de cuadrícula durante el llenado de la cuadrícula. Para obtener la mejor ventaja de rendimiento, debe usar gridview: true además. Por cierto, te recomiendo que uses gridview: true en todos los jqGrids .

El uso de la devolución de llamada rowattr 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 CSS myAltRowClass debe definir el color de fondo de las filas resaltadas.

La demostración correspondiente que puedes encontrar aquí :

Porque en su demo solo necesita resaltar y no seleccionar las filas que no usé multiselect: true en mi demo. En caso de multiselect: true , funciona exactamente de la misma manera.

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

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

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

• a continuación, puede definir algunas variables que describen las propiedades comunes que utiliza 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 eso, puede usar myCheckboxTemplate y myTextareaTemplate dentro de colModel que se reducirá en su caso al 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},