9-12，实现房屋佣金（相关的一些选择器的使用，可供参考）前台设计。

最新推荐文章于 2021-11-04 16:09:50 发布

盐汽水水水

最新推荐文章于 2021-11-04 16:09:50 发布

阅读量375

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sinat_34311901/article/details/52514097

本文介绍了一个使用JSP实现的代理商管理页面，该页面通过JavaServer Pages技术进行房源商佣金配置管理，支持房源商信息展示及佣金配置等功能，并集成了JavaScript进行页面交互。

JSP部分：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="nt" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="ntl" uri="/WEB-INF/lightweight-tag.tld" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Pragma" content="no-cache">
		<title>代理商管理</title>
		<jsp:include page="/common/meta_ntl.jsp"></jsp:include>
		<script type="text/javascript" src="agentInput.js"></script>		
		 <script type="text/javascript">	
			$(document).ready(function(){
				operationIndex = 1;
				$(".isCheckip").click(function(){
					var par = $(this).closest('.input-cont');
					par.find(".sale").toggle();					
				});								 
			});   
			function addOperation(){
				//var operationIndex = 1;
				var operation_html="  <div id='show'>"+"<input type='text'/>"+"<input type='radio' name='isCheckip"+operationIndex +" id='isCheckip'"+operationIndex +"' onclick='isCheckip_Click("+operationIndex +")'/>"+
			       "<input id='ipAddress"+operationIndex +"'  type='text' name='ipAddress"+operationIndex +"'  />"+"</div>";
				/*  var target=$("#btn").parentNode.next(); */
				/* var div=$(document).createElement(""); */
				$("#show1").append(operation_html);
				operationIndex++;
			};
			/* function isCheckip_Click()
			{
				$("input#ipAddress").toggle();
				 
			} */
			<%--  
			function cancel(){
			window.alert('<%=request.getContextPath() %>'+'/cooperator/fp/view/allocationManage.jsp');
			Newtouch.Direct.postDataWithForm('<%=request.getContextPath() %>'+'/cooperator/fp/view/allocationManage.jsp');
		} --%>
		
		function cancel(){		 
			Newtouch.Direct.postDataWithForm("${ctx}/cooperator/pp/view/distributionManage.jsp");
		}
		</script>
		  
	</head>
	<body>
  <div class="main_cont">
  <h1><span class="main_menu_title">房源商佣金配置管理</span></h1>
  <input id="cpCode" type="hidden" name="cpCode" value="${view.distribution.cpCode }">
  <input id="apid" type="hidden" name="apid" value="${view.distribution.id}">
  <input id="state" type="hidden" name="state" value="${view.agentModel.deleteState}">
  <input type="hidden"  id="saleSelect" value="${view.agentModel.saleSelect}"> 
   <input type="hidden" id="agentsale" value="${view.agentModel.sale} ">
       <div class="query_order_if">
       <ntl:form id="form_provider">
       <form action="" id="providerForm" name="form1">
       <table class="tableone" width="100%"> 
       <tr>
			<td bgcolor="#eeeeee" class="tdTitleRight"><span style="color: red">*</span>代理商代码：</td>
			  <td width="75%" align="left" colspan="2">
			<input id="dpId" type="hidden" name="dpId" value="${view.distribution.code}">
			<span>${view.distribution.code}</span>
			</td>
			</tr>
			  <tr>
			<td bgcolor="#eeeeee" class="tdTitleRight" ><span style="color: red">*</span>代理商名称：</td>
			<td width="75%" align="left" colspan="2">
			<input id="ppName" type="hidden" name="ppName" value="${view.distribution.name}">
			<span>${view.distribution.name}</span>
			</td>
		</tr>
		<tr>
			<td bgcolor="#eeeeee" class="tdTitleRight" ><span style="color: red">*</span>代理商简称：</td>
			<td width="75%" align="left" colspan="2">
			<input id="ppNickName" type="hidden" name="ppNickName" value="${view.distribution.nickName}">
			<span>${view.distribution.nickName}</span>
			</td>
		</tr> 
		<tr>
			<td bgcolor="#eeeeee" class="tdTitleRight" ><span style="color: red">*</span>签约日期：</td>
			<td width="75%" align="left" colspan="2">
			<input id="ppShowDate" type="hidden" name="ppShowDate" value="${view.distribution.showDate}">
			<span>${view.distribution.showDate}</span>
			</td>
		</tr>
		<td bgcolor="#eeeeee" class="tdTitleRight" >房源商佣金配置：</td>
		<td colspan="4" class="tdleft" align="left">
		<table id="cblbuildName" class="tdleft" style="width: 98%;"
										border="0" cellpadding="1" cellspacing="1"></table>
		 <%int e=1;%>
			 <c:forEach items="${view.estates}" var="es" varStatus="e" >
			 <span class="input-cont">
			 <span>${es.name}</span><input type="checkbox" name="isCheckip0" class="isCheckip" id="${es.code}" value="${es.code}" disabled="disabled"/>
			 <input type="radio" value="001" class="aaa" name="${es}" id="saleselect1" >固定金额
             <input type="radio" value="002" class="aaa" name="${es}" id="saleselect2">百分比
               
			 <input id="${es.code}" class="sale" type="text" name="sale"  value="" style="display:none;"/><span id="returnText"></span>
			   
			 <input id="${es.id}" class="esid" type="hidden" name="esid" value="${es.id}">
			 <%e++;%>
			<br>
			</span>
			 </c:forEach>
			 <tr>
			<td align="left" colspan="3">
			<p align="center">
				<input type="button" id="save_button" class="hb_common_btn" value="保存" hidefocus="ture"/>
            	<input type="button" id="cancel" class="hb_common_btn" value="返回" hidefocus="ture"/></p>
		   </td>
		</tr>
       </table>
       </form>
       </ntl:form>
       </div>
  </div>
</body>
</html>

JS部分：

$(function() {
	$('#save_button').bind("click",saveDistribution);
	$('#cancel').bind("click",cancel);

	var xiskey=$("#xiskey").val();

	if(xiskey=="0"){
		$("#iskeyTr input:radio[value="+xiskey+"]").attr("checked",true);
		$(".keyTr").hide();
		$("#key").removeClass("required");
	}
	$("input.date-picker").datepicker({
		dateFormat:'yy-mm-dd',
		yearRange:"-55:+55", 
		changeMonth: true,
		changeYear: true,
		constrainInput:true,
		showButtonPanel:true
	});
	var cpCode = $("#cpCode").val();
	if(cpCode!=""){
		var cpCodes=cpCode.split(",");
		for(var i=0;i<cpCodes.length;i++){
			$("input[name='isCheckip0']").each(function(){
				if(this.id==cpCodes[i]){
					$(this).attr('checked','checked');
				}
			});
		}
	}
	var sale=$("#agentsale").val();
//	alert(sale)
	if(sale!=""){
		var sales=sale.split(",");
		/*console.log(sales)*/
//		alert(sales)
		var saleIndex = 0;
		$(".isCheckip").each(function(){
			if($(this).is(":checked")){
				$(this).closest(".input-cont").find(".sale").val(sales[saleIndex]);
				saleIndex++;
			}
		});
	}
	var saleselect=$("#saleSelect").val();
	var saleRadioIndex = 0;
	if(saleselect!=""){
		
		var saleselects=saleselect.split(",");
		console.log(saleselects)
		$(".isCheckip").each(function(){
			if($(this).is(":checked")){
				$(this).closest(".input-cont").each(function(){
					if(saleselects[saleRadioIndex] == "001"){
						$(this).find(".aaa").eq(0).attr("checked", true);
					}
					if(saleselects[saleRadioIndex] == "002"){
						$(this).find(".aaa").eq(1).attr("checked", true);
					}
					saleRadioIndex++;
				});
			}
		});
	}
	$(".isCheckip").each(function(){
		if($(this).is(":checked")){
			$(this).closest(".input-cont").find(".sale").show();
		}else {
			$(this).closest(".input-cont").find(".aaa").each(function(){
				$(this).attr("disabled","disabled");
			})
		}
	})	
});
$(".aaa").each(function(){
	if($(this).is(":checked")){
		var returnType= $(this).val();
		if(returnType=='002'){
			$("#returnText").text("百分比");
	 }else{
		 	$("#returnText").text("元");
	 }
	}
});

function saveDistribution(){ 
	var _action=null;
	var formParams = $('#providerForm').values();
	var check = $('#providerForm').check();
	var cpCode = "";
	var dpId=$('#dpId').val();
	var apId=$('#apid').val();
	var ppname=$('#ppName').val();
	var ppNickName=$('#ppNickName').val();
	var ppShowDate=$('#ppShowDate').val();
	var saleselect="";
	
	var sale="";
	 
	$(".sale").each(function(){
		if(this.value){
			sale+=this.value+",";
		}
	});
	$(".aaa").each(function(){
		if($(this).is(":checked")){
			saleselect += $(this).val()+",";
		}
	})
	
	$("input[name='isCheckip0']").each(function(){
		if(this.checked){
			cpCode += this.id+",";
		}
	});
	formParams["id"]=apId;
	formParams["remark"]=dpId;
	formParams["name"]=ppname;
	formParams["ppNickName"]=ppNickName;
	formParams["ppShowDate"]=ppShowDate;
	formParams["cpCode"]=cpCode;
	formParams["sale"]=sale;
	formParams["saleselect"]=saleselect;
	if(!check){return;}
	if($("#state").val().length >0){
		_action='updateAgent';
	}else{
		_action="createAgent";
	}
	Newtouch.Ajax.sendParams(formParams,_action,function(){
		alert("保存成功！");
		Newtouch.Direct.postDataWithForm(getRootPath()+"/cooperator/pp/view/distributionManage.jsp");
	},function(err){
		alert(err);
		return;
	});
	
}