注册 登录
编程论坛 → JavaScript论坛

js动态遍历实现购物车的总额，大家来帮我看看

一神经彬 发布于 2017-11-07 14:45， 2556 次点击
程序代码：
<%@ 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("&divide;").attr("title", "撤销删除");
                $(obj).parent().parent().addClass("error");
            }else if(delFlag.val() == "1"){
                delFlag.val("0");
                $(obj).html("&times;").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="删除">&times;</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="保 存"/>&nbsp;</shiro:hasPermission>
            <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
        </div>
    </form:form>
</body>
</html>
3 回复
#2
一神经彬2017-11-07 14:47
只有本站会员才能查看附件，请 登录
只有本站会员才能查看附件，请 登录

点击增就会出现一行空白，然后输入单价和数量，与此同时上面的商品总额会自动统计总额，每点击一下新增就添加一行输入单价数量，然后上面的总额自动统计，请问这个过程如何实现呢？
下面这个就是一个表格，点击新增以后，就append一行，然后输入完成以后调用一个方法，遍历一次这个表格，然后将结果相加，然后赋值到商品总额里面，这过程怎么实现呢？菜鸟求帮助
#3
wlrjgzs2017-11-09 11:57
你这个问题可不是菜鸟应该问的问题。可以给你解决，需要的话私信我吧。
1
©2025, BC-CN.NET
电脑版