2019.2.22 前端的精髓 动态js生成页面

好东西:

<jsp:include page="../comm/common.jsp"></jsp:include>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="dic" uri="/WEB-INF/tydic.tld"%>
<jsp:include page="../comm/common.jsp"></jsp:include>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10">

<title>新增代制商</title>
<style type="text/css">
.displayTest{
	display: none;
}
</style>
<script type="text/javascript">
	var baseId = 0;
	$(function(){
		var form = $("#form1").Validform({
			tiptype : 3,//
			label : ".label",
			showAllError : true,
			postonce : true,
			btnSubmit : "#save",
			ajaxPost : true,
			datatype : {
				checkPhone : function(gets,obj,curform,regxp) {
					var reg = /^1(3|4|5|7|8)\d{9}$/;
					if(!reg.test(gets)) {
						return false; 
					}
					var result;
					$.ajax({
						type : "post",
						url : "${ctx}/sd/dealer/checkPhone.do",
						data : $("#form1").serialize(),
						dataType : "json",
						async : false,
						success : function(data) {
							if (typeof (data.dealer) != "undefined" && data.dealer != null) {
								params(data.dealer);
							}
							if (typeof(data.result) != "undefined") {
								result = data.result;
							} else {
								result = true;
							}
						}
					});
					return result;
				}
			},
			beforeSubmit : function(curform) {
				var start = true;
				var checkbox = document.getElementsByName("corpFlagList");
				var a = 0;
				for (var i = 0; i < checkbox.length; i++) {
					if (checkbox[i].checked) {
						a++;
					}
				}
				if (a == 0) {
					layer.alert("所属公司至少选择一个", {
						icon : 2
					});
					start = false;
				}
				$(":text").blur();
				$(".errorMsg").each(function(){
					if($(this).text() != ''){
						start = false;
					}
				});
				return start;
			},
			callback : function(data) {
				if (data.ContractRoot.RspType == 1) {
					layer.alert(data.ContractRoot.RspDesc, {
						icon : 1
					}, function() {
						cReload();
					});
				} else {
					layer.alert(data.ContractRoot.RspDesc, {
						icon : 2
					});
				}
			}
		});
//下面做的是   <div id="tableShow"> 以下列表的事情
		//进入代制商界面就初始化一下数据
		/* ajaxInit(); */
		$("#baseId").change(function () {
			ajaxInit();
		});
		
	})
	function params(dealer) {
		if ($("#dealerId").val() == dealer.dealerId) {
			return;
		}
		$("#dealerName").val(dealer.dealerName);
		$("#contactName").val(dealer.contactName);
		$("#contactAddr").val(dealer.contactAddr);
		if (typeof (dealer.corpFlagList) != "undefined" && dealer.corpFlagList != null) {
			var list = dealer.corpFlagList;
			for (var i = 0; i < list.length; i++) {
				$("input[name='corpFlagList']").each(function() {
					if ($(this).val() == list[i]) {
						$(this).attr("checked","checked");
					}
				})
			}
		}
	}
	//下面做的是   <div id="tableShow"> 以下列表的事情
	//新增按钮操作
	function insertAudit() {
		$("#baseId").attr("disabled",false);
		$("#auditDealBody :checkbox").each(function () {
			$(this).attr("checked",false);
			var baseId=$(this).val();
			$("#baseId option[value='"+parseInt(baseId)+"']").remove();
		});
		ajaxInit();
		$("#insertTable").show();
		$("#tableShow").hide();
		baseId = 0;
	}
	//提交按钮,数据追加到第一个列表
	function submitTwo() {
		var baseId = $("#baseId").val();
		var baseName = $("#baseId").find("option:selected").text();
		var groupIds = [];
		var agIds = [];
		if (baseId != 0) {
			var tr = $("#auditDealBody :checkbox:checked").parent().parent();
			$("#baseId option[value='"+parseInt(baseId)+"']").remove();
			tr.remove();
		}
		$("#groupTd :checkbox:checked").each(function(){
			groupIds.push({'id':$(this).val(),'name':$(this).next().text()});
			$(this).attr("checked",false);
		});
		$("#agTd :checkbox:checked").each(function(){
			agIds.push({'id':$(this).val(),'name':$(this).next().text()});
			$(this).attr("checked",false);
		});
		var s = '';
		var str = '<tr>';
		str += '<td><input class="checkBox" type="checkbox" name="baseIds" value="'+baseId+'"/><input type="hidden" name="baseIds" value="'+baseId+'"/></td>';
		str += '<td>'+baseName+'</td>';
		str += '<td>';
		for (var i = 0; i < agIds.length; i++) {
			str += agIds[i].name + (i == agIds.length-1?'':',');
			s += '<input type="hidden" name="agIds" value="'+agIds[i].id+'" />';
		}
		str += '</td>';
		str += '<td>';
		for (var i = 0; i < groupIds.length; i++) {
			str += groupIds[i].name + (i == groupIds.length-1?'':',');
			s += '<input type="hidden" name="groupIds" value="'+groupIds[i].id+'" />';
		}
		str += '</td>';
		str += s + '</tr>';
		$("#auditDealBody").append(str);
		$("#insertTable").hide();
		$("#tableShow").show();
	}
//修改按钮
	function updateAudit() {
		var a=0;
		$("#auditDealBody :checkbox:checked").each(function () {
			a++;
		});
		if (a==0) {
			layer.alert("请选择一条信息修改",{icon:7});
			return false;
		}
		//基地
		baseId = $("#auditDealBody :checkbox:checked").val();
		var tr = $("#auditDealBody :checkbox:checked").parent().parent();
		var baseName = tr.find("td:eq(1)").text();
		$("#baseId").prepend("<option value='"+parseInt(baseId)+"' selected='selected'>"+baseName+"</option>");
		//品种
		var groupIds = [];
		$("#auditDealBody input[name='groupIds']").each(function(){
			groupIds.push($(this).val());
		})
		//片区
		var agIds = [];
		$("#auditDealBody input[name='agIds']").each(function(){
			agIds.push($(this).val());
		})
		$("#baseId").val(parseInt(baseId));
		ajaxInit();
		$("#baseId").attr("disabled","disabled");
		//agTd 片区
		 for (var i = 0; i < agIds.length; i++) {
			$("#"+agIds[i]).children("input").attr("checked",true);
		} 
		//groupTd 品种
		for (var i = 0; i < groupIds.length; i++) {
			$("#"+groupIds[i]).children("input").attr("checked",true);
		} 
		$("#insertTable").show();
		$("#tableShow").hide();
	}
	//删除按钮
	function deleteAudit() {
		var a=0;
		var baseIdAdd = 0;
		$("#auditDealBody :checkbox:checked").each(function () {
			baseIdAdd = $(this).val();
			a++;
		});
		if (a==0) {
			layer.alert("请选择一条信息删除",{icon:7});
			return false;
		}
		var tr = $("#auditDealBody :checkbox:checked").parent().parent();
		var baseName = tr.find("td:eq(1)").text();
		$("#baseId").prepend("<option value='"+parseInt(baseIdAdd)+"' selected='selected'>"+baseName+"</option>");
		tr.remove();
	}
	
	function ajaxInit() {
		var baseId=$("#baseId").val()
		$.ajax({
			 type : "POST", //提交方式 
		     url : "${ctx}/sd/dealer/insertTablePage.do",//路径
		     dataType : "json",
		     async: false,
		     data : { 
		    	 baseId : baseId
		     },
		     success : function(data) {//返回数据根据结果进行相应的处理       data.groups[i]
		    	 var strOne = '',strTwo='';
		    	 $("#insertTable tr td span").remove();
		     	 for (var i = 0; i < data.groups.length; i++) {//亲本
					strOne += addInfo("groupIds",data.groups[i].groupId,"combCode",data.groups[i].combCode);
				 }
		     	for (var i = 0; i < data.areaList.length; i++) {//片区
		     		strTwo += addInfo("agIds",data.areaList[i].agId,"agName",data.areaList[i].agName);
				 }
		     	$("#groupTd").append(strOne);
		     	$("#agTd").append(strTwo);
		     } 
		});
	}
	//第一个追加
	function addInfo(oneName,oneValue,twoName,twoValue) {
		return '<span id="'+oneValue+'"><input type="checkbox" name="'+oneName+'" value="'+oneValue+'"/><span>'+twoValue+'</span></span>';
	}
	//返回按钮的制作
	function goBack() {
		//当是修改的时候,如果点击返回按钮,那么就要把新增的option 给删掉,要不然下次新增会多出一个option
		if (baseId == parseInt($("#auditDealBody :checkbox:checked").val())) {
		var baseId = $("#baseId").val();
		$("#baseId option[value='"+parseInt(baseId)+"']").remove();
		}
		$("#tableShow").show();
		$("#insertTable").hide();
	}
</script>
</head>
<body>
	<div id="tableShow">
	<form action="${ctx}/sd/dealer/adddatapriv.do" method="post" name="form1" id="form1">
		<div class="mt20 mgL15">
			<button class="gy_btn tj_btn" toptitle='提交' id="save" type="button">
				<i class="iconfont"> &#xe619;</i> 提交
			</button>
			
			<input type="hidden" id="dealerId" name="dealerId" value="${bean.dealerId}" class="text184" />
			<input type="hidden" id="operate" name="operate" value="${operate}" class="text184" />
		</div>
		<div class="myAgent fl">
			<div class="myAgentup fs16 cl ml25">
				代制商信息<b class="tip"></b>&nbsp;》
			</div>
		</div>
		<div class="cl"></div>
		<div class="table1 fs14 mgT10 mg">	
	
		<table border="1" cellpadding="0" cellspacing="0" class="mgT10 fs14" style="width: 100%">
			<tbody>
					<tr>
						<td class="bggrayRight"><font color="red">*</font>代制商名称:</td>
						<td class="bggrayLeft30">
							<input type="text" id="dealerName" name="dealerName" value="${bean.dealerName}" class="text184"
								maxlength="10" datatype="*" nullmsg="请输入代制商名称!" /> 
						</td>
						<td class="bggrayRight"><font color="red">*</font>联系人姓名:</td>
						<td class="bggrayLeft30">
							<input type="text" id="contactName" name="contactName" value="${bean.contactName}" class="text184"
								maxlength="11" datatype="*" nullmsg="请输入联系姓名!" /> 
						</td>
					</tr>
					<tr>
						<td class="bggrayRight"><font color="red">*</font>手机号码:</td>
						<td class="bggrayLeft30">
							<input type="text" id="contactPhone" name="contactPhone" value="${bean.contactPhone}" class="text184"
								maxlength="11" datatype="checkPhone" nullmsg="请输入联系电话!" errormsg="手机号码错误"/> 
						</td>
						<td class="bggrayRight">联系地址:</td>
						<td class="bggrayLeft80">
						<input type="text" id="contactAddr" name="contactAddr" value="${bean.contactAddr}" class="text300"
								maxlength="30" /> 
						</td>
					</tr>
					<tr>
						<td class="bggrayRight"><font color="red">*</font>公司标记:</td>
						<td class="bggrayLeft30" colspan="3">
							<c:forEach items="${corpFlags}" var="t" varStatus="status">
								<input type="checkbox" name="corpFlagList" datatype="*" nullmsg="请选择所属公司!" value="${t.key}" 
									<c:forEach items="${bean.corpFlagList}" var="c" varStatus="status">
										<c:if test="${c==t.key}">checked="checked"</c:if>
									</c:forEach>
								><span>${t.value}</span>
							</c:forEach>
						</td>
					</tr>
				</tbody>
			</table>
			</div>
	
	<br/>
		<div class="mt20 mgL15" id="saveBtn" >
		   <button class="gy_btn tj_btn" toptitle='新增' onclick="insertAudit();return false;"><i class="iconfont"> &#xe619;</i> 新增</button>
		    <button class="gy_btn tj_btn" toptitle='修改' onclick="updateAudit();return false;"><i class="iconfont"> &#xe619;</i> 修改</button>
		     <button class="gy_btn tj_btn" toptitle='删除' onclick="deleteAudit();return false;"><i class="iconfont"> &#xe619;</i> 删除</button>
		</div>
		<br/><br/>
			<div class="cl"></div>
				<input type="hidden" id="recordId" name="recordId" value="${recordId}" class="text184" />
				<input type="hidden" id="auditState" name="auditState" value="${auditState}" class="text184" />
				<div id="tbDiv">
				<div class="table2 fs14 mgT10 mg">
				<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mgT10 fs14">
					<thead>
						<tr>
							<th class="t_center" width="5%">选择</th>
							<th class="t_center">基地</th>
							<th class="t_center">片区</th>
							<th class="t_center">品种</th>
						</tr>
					</thead>
					<tbody id="auditDealBody">
						
					</tbody>
				</table>
			</div>
			</div>
		</form>
	</div>
	<div id="insertTable" class="displayTest">
		<br/>
		<div class="mt20 mgL15" id="saveBtn" >
		  <button class="gy_btn tj_btn" toptitle='提交' onclick="submitTwo()"><i class="iconfont"> &#xe619;</i> 提交</button>
		  <button class="gy_btn tj_btn" toptitle='返回' onclick="goBack();return false;"><i class="iconfont"> &#xe619;</i> 返回</button>
 <!--  <input type="hidden" id="flag" value=""/>     做个标记,新增赋值为1,修改赋值为2,然后看你自己的操作!(待考虑行不行的通) -->
		</div>
		<br/><br/>
		<div id="tbDiv">
		<div class="table2 fs14 mgT10 mg">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mgT10 fs14">
			<tbody id="insertTableBody">
				<tr><th width="15%">基地</th>
					<td>
					<select id="baseId" name="baseId" class="select186">
						<c:forEach items="${baseIds}" var="b">
								<option value="${b.baseId}">${b.baseName}</option>
						</c:forEach>
					<lect>
					</td>
				</tr>
				<tr><th width="15%">片区</th>
					<td id="agTd"></td>
				</tr>
				<tr><th width="15%">品种</th>
					<td id="groupTd"></td>
				</tr>
			</tbody>
		</table>
		</div>
		</div>
	</div>
</body>
<html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值