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

Question

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

html5 使用了数字输入类型。

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

Price = Sum / Quantity;

我尝试使用下面的 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 views, .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）可以定义 "standard" 模板并将其用作字符串。

需要用下面的代码来定义

$.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}

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

How to update column on other column change in inline edit

javascript

jquery

parsefloat

jqgrid

free-jqgrid