js动态遍历实现购物车的总额,大家来帮我看看
程序代码:
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head> <title>订单管理管理</title> <meta name="decorator" content="default"/> <script type="text/javascript"> $(document).ready(function() { //$("#name").focus(); $("#inputForm").validate({ submitHandler: function(form){ loading('正在提交,请稍等...'); form.submit(); }, errorContainer: "#messageBox", errorPlacement: function(error, element) { $("#messageBox").text("输入有误,请先更正。"); if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){ error.appendTo(element.parent().parent()); } else { error.insertAfter(element); } } }); }); function addRow(list, idx, tpl, row){ $(list).append(Mustache.render(tpl, { idx: idx, delBtn: true, row: row })); $(list+idx).find("select").each(function(){ $(this).val($(this).attr("data-value")); }); $(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){ var ss = $(this).attr("data-value").split(','); for (var i=0; i<ss.length; i++){ if($(this).val() == ss[i]){ $(this).attr("checked","checked"); } } }); } function delRow(obj, prefix){ var id = $(prefix+"_id"); var delFlag = $(prefix+"_delFlag"); if (id.val() == ""){ $(obj).parent().parent().remove(); }else if(delFlag.val() == "0"){ delFlag.val("1"); $(obj).html("÷").attr("title", "撤销删除"); $(obj).parent().parent().addClass("error"); }else if(delFlag.val() == "1"){ delFlag.val("0"); $(obj).html("×").attr("title", "删除"); $(obj).parent().parent().removeClass("error"); } } </script> </head> <body> <div class="nav-tabs-custom"> <ul class="nav nav-tabs"> <li><a href="${ctx}/orderadmin/orderAdd/">订单管理列表</a></li> <li class="active"><a href="${ctx}/orderadmin/orderAdd/form?id=${orderAdd.id}">订单管理<shiro:hasPermission name="orderadmin:orderAdd:edit">${not empty orderAdd.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="orderadmin:orderAdd:edit">查看</shiro:lacksPermission></a></li> </ul><br/> </div> <form:form id="inputForm" modelAttribute="orderAdd" action="${ctx}/orderadmin/orderAdd/save" method="post" class="form-horizontal"> <div class="box-body" style="margin-right: 50px;"> <form:hidden path="id"/> <sys:message content="${message}"/> <div class="form-group"> <label class="col-sm-2 control-label"> 订单编号:</label> <div class="col-sm-10 controls"> <form:input path="orderId" htmlEscape="false" maxlength="64" class="form-control " value="${requestScope.orderId}" readonly="true" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"> 下单时间:</label> <div class="col-sm-10 controls"> <input name="orderTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate " value="${requestScope.orderTime}" readonly="readonly" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"> 商品总额:</label> <div class="col-sm-10 controls"> <form:input path="comTotal" htmlEscape="false" class="form-control "/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"> 支付方式:</label> <div class="col-sm-10 controls"> <form:radiobuttons path="priceMethod" items="${fns:getDictList('price_method')}" itemLabel="label" itemValue="value" htmlEscape="false" class=""/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"> 下单用户:</label> <div class="col-sm-10 controls"> <sys:treeselect id="orderUser" name="orderUser" value="${orderAdd.orderUser}" labelName="" labelValue="" title="用户" url="/sys/office/treeData?type=3" cssClass="form-control " allowClear="true" notAllowSelectParent="true"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"> 配送地址:</label> <div class="col-sm-10 controls"> <form:input path="detaAddress" htmlEscape="false" maxlength="300" class="form-control "/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"> 联系电话:</label> <div class="col-sm-10 controls"> <form:input path="telephone" htmlEscape="false" maxlength="11" class="form-control "/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"> 订单状态:</label> <div class="col-sm-10 controls"> <form:select path="orderState" class="input-medium "> <form:option value="" label=""/> <form:options items="${fns:getDictList('order_state')}" itemLabel="label" itemValue="value" htmlEscape="false"/> </form:select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"> 备注:</label> <div class="col-sm-10 controls"> <form:textarea path="remarks" htmlEscape="false" rows="4" maxlength="64" class="form-control "/> </div> </div> <div class="form-group" style="margin-left: 120px;"> <!-- <label class="control-label">order_info:</label>--> <div class="controls"> <table id="contentTable" class="table table-striped table-bordered table-condensed"> <thead> <tr> <th class="hide"></th> <th>商品名称</th> <th>单价</th> <th>数量</th> <shiro:hasPermission name="orderadmin:orderAdd:edit"><th width="10">操作</th></shiro:hasPermission> </tr> </thead> <tbody id="orderInfoList"> </tbody> <shiro:hasPermission name="orderadmin:orderAdd:edit"><tfoot> <tr><td colspan="6"><a href="javascript:" onclick="addRow('#orderInfoList', orderInfoRowIdx, orderInfoTpl);orderInfoRowIdx = orderInfoRowIdx + 1;" class="btn">新增</a></td></tr> </tfoot></shiro:hasPermission> </table> <script type="text/template" id="orderInfoTpl">//<!-- <tr id="orderInfoList{{idx}}"> <td class="hide"> <input id="orderInfoList{{idx}}_id" name="orderInfoList[{{idx}}].id" type="hidden" value="{{row.id}}"/> <input id="orderInfoList{{idx}}_delFlag" name="orderInfoList[{{idx}}].delFlag" type="hidden" value="0"/> </td> <td> <input id="orderInfoList{{idx}}_comName" name="orderInfoList[{{idx}}].comName" type="text" value="{{}}" maxlength="100" class="form-control input-sm "/> </td> <td> <input id="orderInfoList{{idx}}_price" name="orderInfoList[{{idx}}].price" type="text" value="{{row.price}}" class="form-control input-sm "/> </td> <td> <input id="orderInfoList{{idx}}_num" name="orderInfoList[{{idx}}].num" type="text" value="{{row.num}}" maxlength="11" class="form-control input-sm "/> </td> <shiro:hasPermission name="orderadmin:orderAdd:edit"><td class="text-center" width="10"> {{#delBtn}}<span class="close" onclick="delRow(this, '#orderInfoList{{idx}}')" title="删除">×</span>{{/delBtn}} </td></shiro:hasPermission> </tr>//--> </script> <script type="text/javascript"> var orderInfoRowIdx = 0, orderInfoTpl = $("#orderInfoTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,""); $(document).ready(function() { var data = ${fns:toJson(orderAdd.orderInfoList)}; for (var i=0; i<data.length; i++){ addRow('#orderInfoList', orderInfoRowIdx, orderInfoTpl, data[i]); orderInfoRowIdx = orderInfoRowIdx + 1; } }); </script> </div> </div> </div> <div class="form-actions"> <shiro:hasPermission name="orderadmin:orderAdd:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/> </shiro:hasPermission> <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/> </div> </form:form> </body> </html>