如何在内联编辑中更新其他列更改上的列 [英] How to update column on other column change in inline edit

问题描述

免费jqgrid包含3列:价格，数量和总和.

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

使用html5数字输入类型.

html5 number input type is used.

如果在联机编辑中更改总和"列，则价格"列的值应使用公式计算

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

价格=总和/数量；

Price = Sum / Quantity;

我尝试使用下面的jqgrid模板实现此功能，但是由于未定义input#Price和input#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.

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

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

在free jqgrid中哪种最佳实践可以实现这种计算?

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检查元素显示以内联编辑模式为行创建了以下标记:

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>

表有很多行，id的1383部分可能是行号，每行都不同.

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视图，.NET 4.6.

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

更新

列定义:

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

推荐答案

存在该问题是因为您将template属性与该对象用作值.从jqGrid 4.7开始(请参阅我的旧请求请求)，可以定义标准"模板并在那里用作字符串.

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
            }
        }]
    }
};

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

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

代替template: sumColumnTemplate:

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

这篇关于如何在内联编辑中更新其他列更改上的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！