Question

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

使用html5号码输入类型。

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

计算价格列值

价格=总和/数量;

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

元素ID是从行ID创建的，并且在每一行中都不同。 Jqgrid不会将行id值传递给change事件。

自由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>

表有很多行，而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}

如何更新内联编辑

1 个答案: