How to update column on other column change in inline edit

问题

Free jqgrid contains 3 columns: Price, Quantity and Sum.

html5 number input type is used.

If Sum column is changed in inline edit, Price column value should calculated using formula

Price = Sum / Quantity;

I tried to implement this using jqgrid template below but it does not change price column since input#Price and input#Quantity are undefined.

Element ids are created from row id and are different in every row. Jqgrid does not pass row id value to change event.

Which is best practice in free jqgrid to implement such calculations ?

var sumColumnTemplate = {
    "editoptions": {
        "type": "number", 
        "dataEvents":[{"type":"change","fn":function(e) {
            $('input#Price').val(parseFloat(this.value) / parseFloat(    
               $('input#Quantity').val()  ));
        }
        }
};

Chrome inspect element shows that following markup is created for row in inline edit mode:

<tr role="row" id="1383" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr" editable="1" aria-selected="false">
    ... lot of td s skipped

   <td role="gridcell" style="text-align:right;" class="" title="4" aria-describedby="grid_Quantity"><input type="number" class="grid-decimal-edit editable" id="1383_Quantity" name="Quantity" cm="[object Object]" icol="5" role="textbox" style="width: 100%; box-sizing: border-box;"></td>

   <td role="gridcell" style="text-align:right;" class="" 
   aria-describedby="grid_Price"><input type="number" title="" maxlength="15" class="grid-decimal-edit editable" id="1383_Price" name="Price" cm="[object Object]" icol="6" role="textbox" style="width: 100%; box-sizing: border-box;"></td>

   <td role="gridcell" style="text-align:right;" title="" aria-describedby="grid_Sum"><input type="number" title="" maxlength="15" class="grid-decimal-edit editable" id="1383_Sum" name="Sum" cm="[object Object]" icol="7" role="textbox" style="width: 100%; box-sizing: border-box;"></td>
   ....
</tr>

table has many rows and 1383 in part of id is probably row number which is different for every row.

Which is best way to get numberic values form current row in inline edit mode ?

Bootstrap 3, jquery, jquery-ui, ASP.NET MVC 4, Razor views, .NET 4.6 are used.

Update

Column definitions:

{"label":"Quantity","name":"Quantity","index":"Quantity","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"],"maxlength":12,"size":12},"template":"number","formatoptions":{"thousandsSeparator":"","decimalPlaces":4,"defaultValue":""},"align":"right","editoptions":{"type":"number","step":"any","min":-999999,"max":9999999,"title":"","maxlength":12,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
},{"type":"blur","fn":function(e) {}
}],"readonly":null,"class":"grid-decimal-edit","disabled":null},"editable":function(options){return getEditable(options,false);}
,"width":68,"classes":"","hidden":false},

{"label":"OstuPrice","name":"Price","index":"Price","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"],"maxlength":15,"size":15},"template":"number","formatoptions":{"thousandsSeparator":"","decimalPlaces":5,"defaultValue":""},"align":"right","editoptions":{"type":"number","step":"any","min":-99999999,"max":999999999,"title":"","maxlength":15,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
},{"type":"blur","fn":function(e) {}
}],"readonly":null,"class":"grid-decimal-edit","disabled":null},"editable":function(options){return getEditable(options,false);}
,"width":75,"classes":"","hidden":false,"tere":"1234"},

{"template":sumColumnTemplate
,"label":"Sum","name":"Sum","width":80,"index":"Sum","hidden":false},

回答1:

The problem exist because you use template property with the object as the value. Starting with jqGrid 4.7 (see my old pull request) it's possible to define "standard" templates and to use there as strings.

One need to use the following code to define

$.jgrid = $.jgrid || {};
$.jgrid.cmTemplate = $.jgrid.cmTemplate || {};
$.jgrid.cmTemplate.mySum = {
    editoptions: {
        type: "number", 
        dataEvents: [{
            type: "change",
            fn: function(e) {
                // some code
            }
        }]
    }
};

One can use now template: "mySum":

{"template":"mySum","label":"Sum","name":"Sum","width":80}

instead of template: sumColumnTemplate:

{"template":sumColumnTemplate,"label":"Sum","name":"Sum","width":80,
"index":"Sum","hidden":false}

来源：https://stackoverflow.com/questions/39130547/how-to-update-column-on-other-column-change-in-inline-edit