jqGrid - Checkbox change event and cell value update

Question

I have the following table declaration:

$("#lotesAsignados").jqGrid({
        datatype: "local",
        height: 200,
        colNames: ["LOTE","recepcionId","FECHA REC.","P. BRUTO","TIPO MAT.","PESADA VACIADA","CARGUIO MAQUINA","EMBOLSADA ARRUMADA","SOLO COMUNEADA","SOLO VACIADA","SOLO PESADA","SOLO EMBOLSADA","COSTO MANIPULEO"],
        colModel:[ {name:'lote',index:'lote', width:70},
            {name:'recepcionId',index:'recepcionId', width:5, hidden: true},
            {name:'fechaDeRecepcion',index:'fechaDeRecepcion', width:70},
            {name:'pesoBruto',index:'pesoBruto', width:60},
            {name:'tipoDeMaterial',index:'tipoDeMaterial', width:80},
            {name:'pesadaVaciada',index:'pesadaVaciada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'carguioMaquina',index:'carguioMaquina', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'embolsadaArrumada',index:'embolsadaArrumada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'soloComuneada',index:'soloComuneada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'soloVaciada',index:'soloVaciada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'soloPesada',index:'soloPesada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'soloEmbolsada',index:'soloEmbolsada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'costoManipuleo',index:'costoManipuleo', width:80} ],
        onSelectRow: function(id){
        },
        multiselect: false,
        caption: "LOTES A PAGAR"
    });

There are some hidden fields in my view to contain parameters to make a calculation according to the formula:

costoManipuleo = pesadaVaciada + carguioMaquina + embolsadaArrumada + soloComuneada + soloVaciada + soloPesada + soloEmbolsada

Given the values (just and example):

pesadaVaciada = 10
carguioMaquina = 15
embolsadaArrumada = 10
soloComuneada = 5
soloVaciada = 10
soloPesada = 20
soloEmbolsada = 10

And the rendered table:

For LOTE: PX-CM070199, if pesadaVaciada, soloComuneada and soloEmbolsada checkboxes are selected then costoManipuleo cell must contain 25.

For LOTE: PX-CM070200, if all checkboxes are selected then costoManipuleo cell must contain 70.

I've tried modifying this and this solutions to my needs but I'm clueless. I don't know how to identify which checkbox was clicked and it gets harder for me when I see that the rendered HTML code for a checkbox is something like this:

<input value="no" offval="no" type="checkbox">

score 0 · Answer 1 · answered Aug 20 '15 at 23:03

This jqGrid declaration solved my problem:

$("#lotesAsignados").jqGrid({
        datatype: "local",
        height: 200,
        colNames: ["LOTE","recepcionId","FECHA REC.","P. BRUTO","TIPO MAT.","PESADA VACIADA","CARGUIO MAQUINA","EMBOLSADA ARRUMADA","SOLO COMUNEADA","SOLO VACIADA","SOLO PESADA","SOLO EMBOLSADA","COSTO MANIPULEO"],
        colModel:[ {name:'lote',index:'lote', width:70},
            {name:'recepcionId',index:'recepcionId', width:5, hidden: true},
            {name:'fechaDeRecepcion',index:'fechaDeRecepcion', width:70},
            {name:'pesoBruto',index:'pesoBruto', width:60},
            {name:'tipoDeMaterial',index:'tipoDeMaterial', width:80},
            {name:'pesadaVaciada',index:'pesadaVaciada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'carguioMaquina',index:'carguioMaquina', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'embolsadaArrumada',index:'embolsadaArrumada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'soloComuneada',index:'soloComuneada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'soloVaciada',index:'soloVaciada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'soloPesada',index:'soloPesada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'soloEmbolsada',index:'soloEmbolsada', width:70, edittype:"checkbox",editoptions: {value:"Si:No"},editable: true,formatter: "checkbox", formatoptions: {disabled : false} },
            {name:'costoManipuleo',index:'costoManipuleo', width:80} ],
        beforeSelectRow: function (rowid, e) {
            var $target = $(e.target), $td = $target.closest("td"),
                iCol = $.jgrid.getCellIndex($td[0]),
                colModel = $(this).jqGrid("getGridParam", "colModel");
            if (iCol >= 0 && $target.is(":checkbox")) {
                alert("checkbox is " +
                    ($target.is(":checked")? "checked" : "unchecked") +
                    " in the column \"" + colModel[iCol].name +
                    "\" in the row with rowid=\"" + rowid + "\"");
                var rowData = $('#lotesAsignados').jqGrid('getRowData', rowid);
                var _costoManipuleo=parseFloat(rowData.costoManipuleo);
                var _pesadaVaciada=0;
                var _carguioMaquina=0;
                var _embolsadaArrumada=0;
                var _soloComuneada=0;
                var _soloVaciada=0;
                var _soloPesada=0;
                var _soloEmbolsada=0;

                switch(colModel[iCol].name){
                    case "pesadaVaciada": _pesadaVaciada= $target.is(":checked")? parseFloat($("#pesadaVaciada").val()):-parseFloat($("#pesadaVaciada").val());
                        _costoManipuleo=_costoManipuleo+_pesadaVaciada;
                        break;
                    case "carguioMaquina": _carguioMaquina= $target.is(":checked")? parseFloat($("#carguioMaquina").val()):-parseFloat($("#carguioMaquina").val());
                        _costoManipuleo=_costoManipuleo+_carguioMaquina;
                        break;
                    case "embolsadaArrumada": _embolsadaArrumada= $target.is(":checked")? parseFloat($("#embolsadaArrumada").val()):-parseFloat($("#embolsadaArrumada").val());
                        _costoManipuleo=_costoManipuleo+_embolsadaArrumada;
                        break;
                    case "soloComuneada": _soloComuneada= $target.is(":checked")? parseFloat($("#soloComuneada").val()):-parseFloat($("#soloComuneada").val());
                        _costoManipuleo=_costoManipuleo+_soloComuneada;
                        break;
                    case "soloVaciada": _soloVaciada= $target.is(":checked")? parseFloat($("#soloVaciada").val()):-parseFloat($("#soloVaciada").val());
                        _costoManipuleo=_costoManipuleo+_soloVaciada;
                        break;
                    case "soloPesada": _soloPesada= $target.is(":checked")? parseFloat($("#soloPesada").val()):-parseFloat($("#soloPesada").val());
                        _costoManipuleo=_costoManipuleo+_soloPesada;
                        break;
                    case "soloEmbolsada": _soloEmbolsada= $target.is(":checked")? parseFloat($("#soloEmbolsada").val()):-parseFloat($("#soloEmbolsada").val());
                        _costoManipuleo=_costoManipuleo+_soloEmbolsada;
                        break;
                }
                rowData.costoManipuleo = _costoManipuleo;
                $('#lotesAsignados').jqGrid('setRowData', rowid, rowData);
            }
            return true;
        },
        multiselect: false,
        caption: "LOTES A PAGAR"
    });

jqGrid - Checkbox change event and cell value update

1 Answers1