如何在内联编辑中更新其他列更改的列

Question

免费的 jqgrid 包含 3 列：价格、数量和总和。

使用html5数字输入类型。

如果在内联编辑中更改了 Sum 列，则应使用公式计算 Price 列值

价格 = 总和 / 数量；

我尝试使用下面的 jqgrid 模板来实现这一点，但它不会更改价格列，因为 input#Price 和 input#Quantity 未定义。

元素 ID 是从行 ID 创建的，并且在每一行中都不同。 Jqgrid 不传递行 id 值来更改事件。

在免费 jqgrid 中实现此类计算的最佳实践是什么？

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

Chrome 检查元素显示为内联编辑模式下的行创建了以下标记：

<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 有很多行，id 中的 1383 可能是每一行都不同的行号。

在内联编辑模式下从当前行获取数字值的最佳方法是什么？

使用了 Bootstrap 3、jquery、jquery-ui、ASP.NET MVC 4、Razor 视图、.NET 4.6。

更新

列定义：

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

Answer 1

问题存在是因为您使用template 属性和对象作为值。从 jqGrid 4.7（参见 my old pull request）开始，可以定义“标准”模板并将其用作字符串。

需要使用下面的代码来定义

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

现在可以使用template: "mySum":

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

而不是template: sumColumnTemplate:

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