硬伤JS

其他 2018-10-23 23:58:28 阅读次数: 0

实例（新增/修改表单加列表）

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;background-color:white;">
<head>
<meta name="Copyright" content="" />
<%@include file="../../../jsp/title.jsp"%>
<jsp:include page="../../../jsp/top.jsp"></jsp:include>
<jsp:include page="../../../jsp/headCss.jsp"></jsp:include>

<style type="text/css">
a{
-webkit-tap-highlight-color:rgba(255,0,0,0);
}
</style>
</head>
<body class="horizontal-menu-page" style="height: 100%; background-color: white;" onload="load()">
<section>
<header class="panel-heading"> &nbsp;
<span class="tools pull-right">
<img src="../images/return.png" title="返回" width="60px;" onclick="window.history.go(-1);">
</span>
</header>

<div id="dcMain">
<form class="layui-form" action="save.shtml" method="post" id="createForm" style="margin-top: 10px;">
<input type="hidden" name="o_id" value="${map['o_id']}" />
<input type="hidden" name="o_code" value="${map['o_code']}" />
<table align="center" border="0" style="line-height: 40px; text-align: right; margin: 0px auto; width: 800px;" class="display table table-bordered table-striped">
<tr>
<td colspan="4" style="text-align: center; font-size: 18px">添加订单</td>
</tr>
<tr>
<td><span style="color: red"></span>客户名称</td>
<td style="text-align: left;" colspan="3">
<div style="width: 180px;margin-left: 8px; ">
<select id="bs3Select" name="c_id" onchange="chooseCustom(this)" class="selectpicker show-tick form-control" data-live-search="true">
<option value="">请选择</option>
<c:forEach var="item" items="${cList}" varStatus="status">
<option value="${item.c_id}" <c:if test="${map['c_id']==item.c_id}">selected="selected"</c:if>>${item.c_weixin_name}</option>
</c:forEach>
</select>
<input type="hidden" id="cid" value="${map['c_id']}"/>
</div>
</td>
</tr>

<tr>
<td><span style="color: red"></span>收件人姓名</td>
<td style="text-align: left;">
<input type="text" style="margin-left: 8px; width: 180px;" id="get_name" name="get_name" value="${map['get_name']}" class="form-control middlesize ipt2" />
</td>
<td><span style="color: red"></span>收件人电话</td>
<td style="text-align: left;">
<input type="text" style="margin-left: 8px; width: 180px;" id="get_phone" name="get_phone" value="${map['get_phone']}" class="form-control middlesize ipt2" />
</td>
</tr>
<input type="hidden" style="margin-left: 8px; width: 593px;" id="c_discount" name="c_discount" value="${map['c_discount']}"/>

<tr>
<td><span style="color: red"></span>收件地址</td>
<td colspan="3" style="text-align: left;">
<input type="text" style="margin-left: 8px; width: 593px;" id="o_address" name="o_address" value="${map['o_address']}" class="form-control middlesize ipt2" />
</td>
</tr>

<tr>
</tr>
</table>
<div class="col-md-4" style="width: 100%;">
<div class="row">
<div class="col-md-12">
<section class="panel">
<header class="panel-heading">购买商品
<span class="tools pull-right">
<a href="javascript:;" rel="external nofollow" id="AddMoreFileBox" class="btn btn-info" style="">
<img src="../images/addmage.png" onclick="addTr()" style="width: 15px;">
</a>
<a class="fa fa-chevron-down" href="javascript:;"></a>
</span>
</header>
<div class="panel-body">
<table align="center" border="0" style="line-height: 40px; text-align: right; margin: 0px auto; width: 90%;" class="display table table-bordered table-striped">
<tr>
<td style="text-align: center; width: 5%;">序号</td>
<td style="text-align: center; width: 15%;">商品类别</td>
<td style="text-align: center; width: 15%;">商品名称</td>
<td style="text-align: center; width: 15%;">单价</td>
<td style="text-align: center; width: 15%;">数量</td>
<td style="text-align: center; width: 15%;">规格</td>
<td style="text-align: center; width: 15%;">总价</td>
<td style="text-align: center; width: 5%;">删除</td>
</tr>

<!-- 判断+循环 -->
<c:if test="${type == 2}">
<c:forEach var="oiItem" items="${oiList}" varStatus="status">
<tr id="">
<td align="center" style="width: 5%;">${status.index+1}</td>
<td style="width: 15%;">
<select style="width: 100%;" class="form-control middlesize ipt2" onchange="selectType(${status.index+1});" name="p_type_${status.index+1}" id="p_type_${status.index+1}">
<option value="">请选择</option>
<c:forEach var="item" items="${ptList}" >
<option <c:if test="${item.pt_id == oiItem.pt_id}">selected="selected"</c:if>
value="${item['pt_id']}">${item['pt_name']}</option>
</c:forEach>
</select>
</td>
<td style="width: 15%;">
<select style="width: 100%;" class="form-control middlesize ipt2" name="p_id_${status.index+1}" id="p_id_${status.index+1}" onchange="selectProduct(${status.index+1})">
<option value="">请选择</option>
<c:forEach var="item" items="${pList}">
<option <c:if test="${item.p_id == oiItem.p_id}">selected="selected"</c:if> value="${item['p_id']}">${item['p_name']}</option>
</c:forEach>
</select>
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_price1_${status.index+1}" readonly="readonly" name="i_price1_${status.index+1}" value="${oiItem['i_price1']}" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_amount_${status.index+1}" name="i_amount_${status.index+1}" onkeyup="changeAmount(${status.index+1});" value="${oiItem['i_amount']}" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_spec_${status.index+1}" name="i_spec_${status.index+1}" value="${oiItem['p_spec'] }" readonly="readonly" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_discount_price_${status.index+1}" name="i_discount_price_${status.index+1}" readonly="readonly" value="${oiItem['i_discount_price']}" class="form-control middlesize ipt2" />
<input type="hidden" id="i_price2_${status.index+1}" name="i_price2_${status.index+1}" value="${oiItem['i_price2']}" class="form-control middlesize ipt2" />
<input type="hidden" id="i_id_${status.index+1}" name="i_id_${status.index+1}" value="${oiItem['i_id']}" class="form-control middlesize ipt2" />
</td>
<td align="center" style="width: 5%;">
<a>
<img id="tb_id" style="width: 15px;" onclick="deleteTr()" alt="" src="../images/delete.png">
</a>
</td>
</tr>
</c:forEach>
</c:if>

<!-- 判断+循环 -->
<c:if test="${type == 1}">
<tr id="InputsWrapper">
<td align="center" style="width: 5%;">1</td>
<td style="width: 15%;">
<select style="width: 100%;" class="form-control middlesize ipt2" onchange="selectType(1);" name="p_type_1" id="p_type_1">
<option value="">请选择</option>
<c:forEach var="item" items="${ptList}" varStatus="status">
<option <c:if test="${item.pt_id == map.pt_id}">selected="selected"</c:if> value="${item['pt_id']}">${item['pt_name']}</option>
</c:forEach>
</select>
</td>
<td style="width: 15%;">
<select style="width: 100%;" class="form-control middlesize ipt2" name="p_id_1" id="p_id_1" onchange="selectProduct(1)">
<option value="">请选择</option>
</select>
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_price1_1" readonly="readonly" name="i_price1_1" value="${map['i_price1']}" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_amount_1" name="i_amount_1" onkeyup="changeAmount(1);" value="${map['i_amount']}" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_spec_1" name="i_spec_1" value="箱" readonly="readonly" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_discount_price_1" name="i_discount_price_1" readonly="readonly" value="${map['i_discount_price']}" class="form-control middlesize ipt2" />
<input type="hidden" id="i_price2_1" name="i_price2_1" value="${map['i_price2']}" class="form-control middlesize ipt2" />
</td>
<td align="center" style="width: 5%;">
<a>
<img id="tb_id" style="width: 15px;" onclick="deleteTr()" alt="" src="../images/delete.png">
</a>
</td>
</tr>
</c:if>
</table>

<table id="tb" align="center" border="0" style="line-height: 40px; text-align: right; margin: 0px auto; width: 90%;" class="display table table-bordered table-striped" >
<tr id="hideTR" style="display: none">
<td align="center" style="width: 5%;">##</td>
<td style="width: 15%;">
<select style="width: 100%;" onchange="selectType(##);" class="form-control middlesize ipt2" name="p_type_##" id="p_type_##">
<option value="">请选择</option>
<c:forEach var="item" items="${ptList}" varStatus="status">
<option <c:if test="${item.pt_id == map.pt_id}">selected="selected"</c:if> value="${item['pt_id']}">${item['pt_name']}</option>
</c:forEach>
</select>
</td>
<td style="width: 15%;">
<select style="width: 100%;" class="form-control middlesize ipt2" onchange="selectProduct(##)" name="p_id_##" id="p_id_##">
<option value="">请选择</option>
</select>
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_price1_##" name="i_price1_##" value="${map['i_price1']}" readonly="readonly" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_amount_##" name="i_amount_##" value="${map['i_amount']}" onkeyup="changeAmount(##)" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_spec_##" name="i_spec_##" value="箱" readonly="readonly" class="form-control middlesize ipt2" />
</td>
<td style="width: 15%">
<input style="width: 100%" type="text" id="i_discount_price_##" name="i_discount_price_##" readonly="readonly" value="${map['i_discount_price']}" class="form-control middlesize ipt2" />
<input type="hidden" id="i_price2_##" name="i_price2_##" readonly="readonly" value="${map['i_price2']}" class="form-control middlesize ipt2" />
</td>
<td align="center" style="width: 5%;">
<a>
<img id="tb_id" style="width: 15px;" onclick="deleteTr(##)" alt="" src="../images/delete.png">
</a>
</td>
</tr>
</table>
<input type="hidden" id="lastNum" name="lastNum" value="1"/>
</div>
</section>
</div>
</div>
</div>
<br>
<center>
<a>
<img src="../images/save.png" alt="保存" width="60px;" onclick="subForm();">
</a>
<a>
<img src="../images/return.png" title="返回" width="60px;" onclick="window.history.go(-1);">
</a>
</center>
<br>
</form>
</div>
</section>
<jsp:include page="../../../jsp/footer.jsp"></jsp:include>
<jsp:include page="../../../jsp/headJs.jsp"></jsp:include>
<script type="text/javascript">

//初始化页面为#lastNum赋值
var type = ${type};
if(type == 2){
var count=${oiListCount};
if(count*1>0){
$("#lastNum").val(count);
}
}

$(window).on('load', function () {
$('.selectpicker').selectpicker({
'selectedText': 'cat'
});

});

//商品数量发生改变
function changeAmount(num){
var amount = $("#i_amount_"+num).val();
var price1 = $("#i_price1_"+num).val();
var c_discount = $("input:hidden[name='c_discount']").val();
if(amount > 0 && price1 >0){
$("#i_price2_"+num).val((amount*price1/(1-c_discount).toFixed(2)).toFixed(2));
$("#i_discount_price_"+num).val((amount*price1).toFixed(2));
}
}

//选择商品列表
function selectProduct(num){
var p_id = $("#p_id_"+num +" option:selected").val();
var c_discount = $("input:hidden[name='c_discount']").val();
var c_id = $("#cid").val();
$.ajax({
url:'../product/getProductPrice.shtml',
type:'POST', //GET
async:false, //或false,是否异步
data:{
"p_id":p_id,
"c_id":c_id
},
timeout:5000, //超时时间
dataType:'json', //返回的数据格式：json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){
console.log(data);
if(data.msg){
//alert(c_discount);
$("#i_price1_"+num).val((data.data*(1-c_discount)).toFixed(2));
$("#i_spec_"+num).val(data.data2);
}else{
layer.msg("失败");
}
},
error:function(xhr,textStatus){
layer.msg("失败");
}
});
}

//选择商品类别
function selectType(type){
var p_type = $("#p_type_"+type +" option:selected").val();
$.ajax({
url:'../product/getProductListById.shtml',
type:'POST', //GET
async:false, //或false,是否异步
data:{"pt_id":p_type,
"type":1
},
timeout:5000, //超时时间
dataType:'json', //返回的数据格式：json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){
console.log(data);
if(data.msg){
$("#i_amount_"+type).val('');
$("#i_price1_"+type).val('');
$("#p_id_"+type).empty();
$("#p_id_"+type).append("<option value=''>请选择</option>");
for(var i=0;i<data.data.length;i++){
$("#p_id_"+type).append("<option value='"+data.data[i]['p_id']+"'>"+data.data[i]['p_name']+"</option>");
}
}else{
layer.msg("暂无商品");
}
},
error:function(xhr,textStatus){
layer.msg("失败");
}
});
}

//选择客户
function chooseCustom(obj){
var option_id=obj.options[obj.selectedIndex].value;
$("#cid").val(option_id);
if(option_id==''){
layer.msg("查询失败,无客户记录");
}else{
$("#c_id").val(option_id);
$.post("../custom/getCustomInfo.shtml",{'c_id':option_id},function(data){
if(data != null && data !="null"){
$("#get_phone").val(data.c_linkphone);
$("#o_address").val(data.c_address);
$("#get_name").val(data.c_weixin_name);
$("#c_discount").val(data.c_discount);
}else{
layer.msg("查询失败,无客户记录");
}
});
}
}

//添加行
function addTr() {
//alert(1);
var last_num = $("#lastNum").val();
alert("last_num:"+last_num);
var html = "<tr>";
html += $("#hideTR").html();
html+="</tr>";
re=new RegExp("##","g");
var newstart=html.replace(re,last_num*1+1);
$("#tb").append(newstart);
$("#lastNum").val(last_num*1+1)
}
//删除行
$('img#tb_id').live('click', function() {
var last_num = $("#lastNum").val();
if(last_num*1>1){
$("#lastNum").val(last_num*1-1);
$(this).parents('tr').remove();
}
})

//提交表单
function subForm() {
if (!checkByClass()) {
return false;
}
$("#createForm").ajaxSubmit({
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
success : function(data) {
my_addRefresh(data);
}
});
return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
}
</script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/dong208/p/9840445.html
js
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022