js EasyUI前台 价格=数量*单价联动的实现
废话，不多说，，效果图如下：
jsp 代码
<div class="borderHasLabel"> <h3 class="order-info-head">产品信息</h3><!-- ${ctx}/ordermanage-firstapply-second/ --> <s:token name="first_apply_second_listExpire_token"/> <h:page id="list_panel_1" width="98%" title="" pageName="noPage"> <d:table name="product" id="row" export="false" class="table" style="width:100%" requestURI=""> <d:col title="" class="display_centeralign" style="width:60"> <input type="checkbox" name="productIds" class="checkItem" value="${row.id}" id="${row.id}" /> </d:col> <d:col property="proCode" class="display_centeralign" title="产品代码" /> <d:col property="proName" class="display_centeralign" title="产品名称"/> <d:col class="display_centeralign" media="html" title="单价" > <input id="${row.id}p" value="${row.price }" readonly="true" style="width:60px;"/> </d:col> <d:col property="currencyType" class="display_centeralign" title="货币"/> <d:col property="unit" class="display_centeralign" title="单位"/> <d:col class="display_centeralign" media="html" title="有效期(3/6/12月)"> <input id="${row.id}v" name="validity" onblur="upperCase(${row.id})" style="width:60px;"/> </d:col> <d:col class="display_centeralign" media="html" title="总价"> <input id="${row.id}t" readonly="true" style="width:60px;"/> </d:col> </d:table> </h:page> </div> <div class="borderHasLabel"> <h3 class="order-info-head">移动端产品信息</h3> <!--${ctx}/ordermanage-firstapply-second/ --> <s:token name="first_apply_second_listExpire_token"/> <h:page id="list_panel_2" width="98%" title="" pageName="noPage"> <d:table name="productphone" id="row" export="false" class="table" style="width:100%" requestURI=""> <d:col title="" class="display_centeralign" style="width:60"> <input type="checkbox" name="productphoneIds" class="checkItem" value="${row.id}" id="${row.id}" /> </d:col> <d:col property="proCode" class="display_centeralign" title="产品代码" /> <d:col property="proName" class="display_centeralign" title="产品名称"/> <d:col class="display_centeralign" media="html" title="单价" > <input id="${row.id}pp" value="${row.price}" readonly="true"/> </d:col> <d:col property="currencyType" class="display_centeralign" title="货币"/> <d:col property="unit" class="display_centeralign" title="单位"/> <d:col class="display_centeralign" media="html" title="数量"> <input id="${row.id}sp" name="amount" onblur="upperCasep(${row.id})"/> </d:col> <d:col class="display_centeralign" media="html" title="有效期(6/12月)"> <input id="${row.id}vp" name="validityph" onblur="upperCasep(${row.id})"/> </d:col> <d:col class="display_centeralign" media="html" title="总价"> <input id="${row.id}tp" readonly="true"/> </d:col> </d:table> </h:page> </div>
js 代码 onClick="saveReport()"
<script> function saveReport(){ $("input[type='checkbox']").is(':checked') var id = $("input[name='productIds']:checked").val(); var validity =$.trim($("#"+id+"v").val()); var price = $.trim($("#"+id+"p").val()); var totalPrice = Math.round(validity*price); var supplierCode = $('#supplierCode').val(); var supplierName = $('#supplierName').val(); var note = $('#note').val(); var pid = $("input[name='productphoneIds']:checked").val(); var validityph =$.trim($("#"+pid+"vp").val()); var priceph = $.trim($("#"+pid+"pp").val()); var amountph = $.trim($("#"+pid+"sp").val()); var totalPriceph = Math.round(priceph*amountph*validityph); var checkLen = $("input[name^='productIds']:checked").length; var checkLenph = $("input[name^='productphoneIds']:checked").length; if (checkLen == 0 && checkLenph ==0) { top.easyAlert("提示信息", "未选择相应的产品信息！", "warning"); return; } if((validity == null || validity == "" )&& (validityph == null || validityph == "")){ top.easyAlert("提示信息", "请输入有效期！", "warning"); return; }else if((validity != "3" && validity != "6" && validity != "12") &&( validityph != "6" && validityph != "12")){ top.easyAlert("提示信息", "请输入有效期,有效期为3月、6月、12月！", "warning"); return; } var r=$("input[name='ck']").is(':checked'); if(r!=true){ top.easyAlert("提示信息", "请认真阅读协议条款,如对协议内容无异议，请勾选协议再保存！", "warning"); return; } var isCaSubmit = true; if (isCaSubmit) { top.easyConfirm('提示', '确认创建申请单吗?', function(conf) { if (conf) { $.ajax({ type: 'POST', url: "report-apple!saveReport.action", data: {"id":id,"pid":pid,"validity":validity,"totalPrice":totalPrice,"validityph":validityph,"totalPriceph":totalPriceph,"amountph":amountph,"note":note,"supplierCode":supplierCode,"supplierName":supplierName}, success: function(data){ if(data == true){ top.easyAlert("提示信息", "创建申请单成功！", "info" , function(){window.location='${ctx}/report/report-apple!list.action?reportCode='+reportCode}); }else{ top.easyAlert("提示信息", "创建申请单失败！", "error"); } }, dataType: "json" }); } }); } } function upperCase(id){ var validity =$.trim($("#"+id+"v").val()); if(validity == null || validity == "" ){ top.easyAlert("提示信息", "请输入有效期！", "warning"); return; }else if(validity != "3" && validity != "6" && validity != "12"){ top.easyAlert("提示信息", "请输入有效期,有效期为3月、6月、12月！", "warning"); return; } var price = $.trim($("#"+id+"p").val()); var totalPrice = Math.round(validity*price); $.trim($("#"+id+"t").val(totalPrice)); } function upperCasep(id){ var validityp =$.trim($("#"+id+"vp").val()); var amount =$.trim($("#"+id+"sp").val()); if(amount == null || amount == "" ){ top.easyAlert("提示信息", "请输入购买数量！", "warning"); return; } if(validityp == null || validityp == "" ){ top.easyAlert("提示信息", "请输入移动产品有效期！", "warning"); return; }else if( validityp != "6" && validityp != "12"){ top.easyAlert("提示信息", "请输入移动产品有效期,有效期为6月、12月！", "warning"); return; } var pricep = $.trim($("#"+id+"pp").val()); var totalPricep = Math.round(validityp*pricep*amount); $.trim($("#"+id+"tp").val(totalPricep)); } </script>
