二级联动加动态input输入框实现思路

需求：通过配置使数据库存储过程可以通过前台页面调用

1：二级联动下拉选（任务分类—任务代码）;

2: 选择不同的任务带出相应存储过程的录入参数（input）;

1. 数据结构

数据库存储过程配置表主要字段：

任务分类代码	分类名称	任务代码	任务名称	存储过程	存过入参	存过出参	执行状态	有效标志
01	基础数据同步	0101	同步平台机构	GPINSERT.INSERTINTO	[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}]	[{index:‘2’,type:‘str’,success:‘0’},{index:’’,type:‘str’,msg:’’}]	0	1

字段说明
- 存储过程：要执行的存储过程名
- 存过入参：格式jsonArray [{index:参数位置,type:参数类型,name:‘页面显示名称’,value:’参数值‘}] 注：参数类型(str-字符,date-日期) ，参数值（可为具体值或’?’,?代表需要去页面传入）
- 存过出参：格式jsonArray [{index:参数位置,type:参数类型,success:成功标志,msg:返回错误信息}]
  参数类型暂只支持str,一个参数位置不能既有success又有msg
- 执行状态：状态校验，防止存过为执行完毕再次提交任务。

2. 程序设计

Action 层设计思路

查询配置好的是存过过程数据
将分类代码和分类名称已Map的形式存入request作为第一个下拉选资源。
将任务分类代码和任务代码相关数据关联以json字符串格式传入request，作为第二个下拉选资源，如：

{‘01’:[{‘taskName’:‘准备金挂账（挂本月）’,‘taskCode’:‘0102’}],‘02’:[{‘taskName’:‘手续费挂账’,‘taskCode’:‘0201’},{‘taskName’:‘手续费结转挂账’,‘taskCode’:‘0202’},{‘taskName’:‘手续费认证挂账’,‘taskCode’:‘0203’},{‘taskName’:‘赔款挂账’,‘taskCode’:‘0204’},{‘taskName’:‘不含税保费挂账’,‘taskCode’:‘0205’},{‘taskName’:‘车船税挂账’,‘taskCode’:‘0206’},{‘taskName’:‘保费增值税挂账’,‘taskCode’:‘0207’},{‘taskName’:‘保费结转挂账’,‘taskCode’:‘0208’},{‘taskName’:‘再保挂账’,‘taskCode’:‘0209’}],‘03’:[{‘taskName’:‘保险卡自动保费销数’,‘taskCode’:‘0301’},{‘taskName’:‘手续费自动实付’,‘taskCode’:‘0302’},{‘taskName’:‘见费失败自动实收’,‘taskCode’:‘0303’},{‘taskName’:‘赔款自动实付’,‘taskCode’:‘0304’},{‘taskName’:‘保费自动销数’,‘taskCode’:‘0305’},{‘taskName’:‘保单自动实收’,‘taskCode’:‘0306’}],‘04’:[{‘taskName’:‘手续费资金状态回写’,‘taskCode’:‘0401’},{‘taskName’:‘回写赔款资金支付状态’,‘taskCode’:‘0402’},{‘taskName’:‘见费失败资金回写状态’,‘taskCode’:‘0403’},{‘taskName’:‘保费退款资金状态回写’,‘taskCode’:‘0404’},{‘taskName’:‘赔款支付自动送资金’,‘taskCode’:‘0405’},{‘taskName’:‘保费集中支付送资金’,‘taskCode’:‘0406’},{‘taskName’:‘保费送资金’,‘taskCode’:‘0407’}],‘05’:[{‘taskName’:‘同步资金账户’,‘taskCode’:‘0501’},{‘taskName’:‘险种同步’,‘taskCode’:‘0502’},{‘taskName’:‘同步总账汇率’,‘taskCode’:‘0503’},{‘taskName’:‘同步平台机构’,‘taskCode’:‘0504’}],‘06’:[{‘taskName’:‘调用批改存储过程的定时任务’,‘taskCode’:‘0601’},{‘taskName’:‘调用批改存储过程的定时任务’,‘taskCode’:‘0602’},{‘taskName’:‘调用承保存储过程的定时任务’,‘taskCode’:‘0603’},{‘taskName’:‘调用承保存储过程的定时任务’,‘taskCode’:‘0604’}],‘99’:[{‘taskName’:‘微客手续费自动支付’,‘taskCode’:‘9901’},{‘taskName’:‘关联交易信息提取’,‘taskCode’:‘9902’},{‘taskName’:‘收付凭证自动送财务’,‘taskCode’:‘9903’},{‘taskName’:‘见费出单回写保单信息’,‘taskCode’:‘9904’}]}
将任务代码和参数数据关联以json字符串格式传入request，作为动态input资源，如：

{‘0102’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘41’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0201’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘06’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0203’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0204’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0205’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘01’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0206’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘01’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0207’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘01’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0208’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0209’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘04’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0301’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0302’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0303’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0304’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0305’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0306’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0503’:[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}],‘9903’:[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}],‘9904’:[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}]}

jsp 页面相关方法设计
1. 任务分类代码select 增加值改变事件，方法传入分类代码，通过分类代码解析Action层传入的任务分类代码—任务代码资源json数据，动态生成任务代码下拉选
2. 任务代码下拉选增加值改变事件，放入传入任务代码，通过分类代码解析Action层传入的任务代码—参数资源json数据，动态生成任务所需传入的input录入框。
3. 执行方法，单击执行函数将相关参数拼接为参数json资源和任务代码一块传入后台。

3 程序源码及效果图

效果图

程序

自动任务处理 action

public void prepareAutoImplement(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		GpJobTasksDto dto = new GpJobTasksDto();
		dto.setValidind("1");
		dto.setObject_OrderBy(" TASKCODE ");
		List<GpJobTasksDto> gpJobTasksDtoList = ServiceManager.payment.getGpPaymentSystemService().findGpJobTasksDto(dto);
		Map<String,String> classificationMap = new TreeMap<String,String>();
		StringBuffer jsonData = new StringBuffer("{");
		StringBuffer paramentData = new StringBuffer("{");
		GpJobTasksDto gpJobTasksDto = null;
		StringBuffer dataStr = null;
		Map<String, StringBuffer> dataMap =new TreeMap<String,StringBuffer>();
		for (int i = 0; i < gpJobTasksDtoList.size(); i++) {
			gpJobTasksDto =  gpJobTasksDtoList.get(i);
			String key = gpJobTasksDto.getClassificationCode();
			if(!classificationMap.containsKey(key))
				classificationMap.put(gpJobTasksDto.getClassificationCode(), gpJobTasksDto.getClassificationName());
			String parament = gpJobTasksDto.getIn_parameter();
			
			try{
				if(parament!=null&&!"".equals(parament.trim())){
					JSONArray jsonStr= new JSONArray(parament);
					if(i>0) paramentData.append(",");
					paramentData.append("'"+gpJobTasksDto.getTaskCode()+"':"+parament); 
				} 
	    	}catch (Exception e) {
	    		System.out.println(parament+"参数不合法");
	    		continue; 
	    	}
			
			if(dataMap.containsKey(key)){
				dataStr = dataMap.get(key);
				dataStr.append(",{'taskName':'"+gpJobTasksDto.getTaskName()+"',"+"'taskCode':'"+gpJobTasksDto.getTaskCode()+"'}");
			}else {
				dataStr = new StringBuffer();
				dataStr.append("{'taskName':'"+gpJobTasksDto.getTaskName()+"',"+"'taskCode':'"+gpJobTasksDto.getTaskCode()+"'}");
				dataMap.put(key, dataStr);
			}  
		}
		int i = 0;
		for (String key : dataMap.keySet()) {
			if(i++>0) jsonData.append(",");
			jsonData.append("'"+key+"':["+dataMap.get(key)+"]" ); 
		}
		jsonData.append("}");
		paramentData.append("}");	
		request.setAttribute("classificationMap", classificationMap);
		request.setAttribute("jsonData", jsonData); 
		request.setAttribute("paramentData", paramentData); 

}

jsp 页面

<html>
<head>
<jsp:include page="/common/StaticJavascript.jsp" />
 <script type="text/javascript" src="/common/js/json2.js"></script>
 <!-- <script type="text/javascript" src="/common/js/jquery.js"></script> -->
<link href="/common/css/Standard.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="initPage();">
	<html:form
		action="/payment/processPaymentSystem.do?actionType=autoImplementDeal">
		<table class="common" cellpadding="1" cellspacing="1" align="center">
			<thead>
			<tr class="top">
				<td colspan="4"><bean:message key="prompt.title.AutoTaskDeal" /></td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td class="left">
					<bean:message key="prompt.tasktype" />
				</td>
				<td class="right">
				    <select name="gpJobTasksDtoClassificationCode" class=common style='width:80%' onchange="select1(this)">
					    <option>---</option>
					    <logic:iterate id="map1" name="classificationMap"> 
							<option value="<bean:write name="map1" property="key"/>">
								<bean:write name="map1" property="key"/>-<bean:write name="map1" property="value"/>
							</option>
						</logic:iterate> 
					</select> 
				</td>
				<td class="left"> 任务代码 </td>
				<td class="right">
					<input type="hidden" name="paramentData" value=" ">
					<select id="taskCode" name="gpJobTasksDtoTaskCode" class=common style='width:80%' onchange="paraments(this)">
						<option>---</option>
					</select> 
				</td>
			</tr>
			</tbody>
			<tfoot id='tfoot' ></tfoot>
		</table>
		<table border="0" cellpadding="5" cellspacing="0" class="common">
			<tr align="center">
				<td class="white"><input name="buttonQuery" id="confirmForm_a" type="button" onClick="confirmForm();"
					class="button" 
					value="<bean:message key="button.deal"/>" accesskey="q">
				</td>
				<td class="white"><input type="reset" class="button" onClick="resets()"
					value="<bean:message key="button.reset"/>" accesskey="r"></td>
			</tr>
		</table>
	</html:form>
	<app:codeInput />
</body>
<script language="javascript">
	var jsonData = <%= request.getAttribute("jsonData")%>;
	var paramentData = <%= request.getAttribute("paramentData")%>;
	var inputId = new Array();
	function select1(val) {
		var tfoot = document.getElementById("tfoot");
	    for(var i = tfoot.childNodes.length - 1; i >= 0 ;i--) {
			tfoot.removeChild(tfoot.childNodes[i]);
		}
		var select=document.getElementById("taskCode");
		select.length=1;
		if(val.value=="") return false;
		var classType = jsonData[val.value];
 		
 		for(var i=0;i<classType.length;i++){
			var codeData = classType[i]; 
			//console.log(codeData)
            var option=document.createElement("option");
            option.setAttribute("value",codeData['taskCode']);
            option.appendChild(document.createTextNode(codeData['taskCode']+"-"+codeData['taskName']));
            select.appendChild(option);
		}
	}
	
	function paraments(val){
	    inputId.length=0;
		var paraments = paramentData[val.value];
		var tfoot = document.getElementById("tfoot");
	    for(var i = tfoot.childNodes.length - 1; i >= 0 ;i--) {
			tfoot.removeChild(tfoot.childNodes[i]);
		}
		
		if (typeof paraments === "undefined") return false;
		var par = 0;
		var ntr ;
		for(var i=0;i<paraments.length;i++ ){
			var parament = paraments[i];
			var index = parament['index'];
			var name = parament['name'];
			var type = parament['type'];
			var value = parament['value'];
			if(value=="?"){  par++;
				 if(par%2==1) ntr =  document.createElement("tr");
				 var typeDate = "";
				 if(type=="date"|| name.search("日期")>-1 ) typeDate = "οnchange=checkFullDate(this); οnfοcus=calendar();";
				 var tdl = document.createElement("td");
				 tdl.className ='left';
				 tdl.innerHTML=name;
				 var tdr = document.createElement("td");
				 tdr.className ='right';
				 tdr.innerHTML= "<input type='text' id='"+ index + "' class='common' style='width:80%' " + typeDate + ">" ;
				 ntr.appendChild(tdl); ntr.appendChild(tdr);
				 if(par%2==0) tfoot.appendChild(ntr);
				 //添加id到inputId
				 inputId[par-1]=index;
			}
		}
		if(par%2==1){
		   var tdl = document.createElement("td");
		   tdl.className ='left';
		   var tdr = document.createElement("td");
		   tdr.className ='right';
		   ntr.appendChild(tdl); ntr.appendChild(tdr);
		}
		//console.log(html)
		tfoot.appendChild(ntr);
	}
	
	function resets(){
	 	inputId.length=0;
		var tfoot = document.getElementById("tfoot");
	    for(var i = tfoot.childNodes.length - 1; i >= 0 ;i--) {
			tfoot.removeChild(tfoot.childNodes[i]);
		}
	}
	
	function confirmForm() {
		var gpJobTasksDtoTaskCode = fm.gpJobTasksDtoTaskCode.value;
		var gpJobTasksDtoClassificationCode = fm.gpJobTasksDtoClassificationCode.value;
		if(gpJobTasksDtoTaskCode==""||gpJobTasksDtoClassificationCode==""){
			alert("请选择任务类型和任务代码");return false;
		}
	    var paraments = "";
		for(var i=0;i<inputId.length;i++){
			var id= inputId[i];
			paraments = paramentData[gpJobTasksDtoTaskCode];
			var input = document.getElementById(id);
			if(input.value==""){ alert("录入信息不全,请检查!"); return false;}
			for(var j=0;j<paraments.length;j++ ){
				var parament = paraments[j];
				var index = parament['index'];
				if(id==index){
					parament['value']=input.value;
				}
			}
		}
		//console.log( JSON.stringify(paraments));
		if(inputId.length>0){ 
			fm.paramentData.value = JSON.stringify(paraments);
		}else {
			fm.paramentData.value = paraments;
		}
		
		document.getElementById("confirmForm_a").disabled=true;
		fm.submit();
	}
</script>
</html>

任务执行主要代码

 public void autoImplementDeal(GpJobTasksDto gpJobTasksDto)throws Exception {
   		 
  	String inParamentJsonArray = gpJobTasksDto.getParamentJson();
     String outParamentJsonArray = gpJobTasksDto.getOut_parameter();
     String procedure = gpJobTasksDto.getDetail();
     StringBuffer callTheProcedure = new StringBuffer();
     callTheProcedure.append(procedure); 
 
     Map<String, String[]> parameterMap = null;
     if((inParamentJsonArray!=null&&!"".equals(inParamentJsonArray))||(outParamentJsonArray!=null&&!"".equals(outParamentJsonArray)) ){
         parameterMap = this.parameterMap(inParamentJsonArray,outParamentJsonArray);
     } 
     int parameterMapSize = 0; 
     if(parameterMap != null) parameterMapSize= parameterMap.size();
 
     for (int i = 1; i <= parameterMapSize; i++) {
         if(parameterMapSize==1){
             callTheProcedure.append("(?)");
         }else if(i==1){ 
             callTheProcedure.append("(?");
         }else if(i>1&&i<parameterMap.size()){
             callTheProcedure.append(",?");
         }else if(i==parameterMap.size()){
             callTheProcedure.append(",?)");
         }
     }
 
     //执行存过
     JdbcTemplate jdbcTemplate = this.getJdbcTemplate();
     CallableStatement proc = null;
     Connection conn = null;
     try {
         String[] out_success = new String[]{"",""};
         String[] out_msg = new String[]{"",""};
         conn = jdbcTemplate.getDataSource().getConnection();	        
         conn.setAutoCommit(false);
         proc = conn.prepareCall("{call "+callTheProcedure.toString()+"}"); // 调用存储过程 
 
         for (int i = 1; i <= parameterMapSize; i++) {
             String[] value = parameterMap.get(String.valueOf(i));
             if("in".equals(value[0])){
                 if("str".equals(value[1])){
                     proc.setString(i, value[2]);
                 }else if("date".equals(value[1])) {
                     proc.setDate(i, Date.valueOf(value[2]));
                 }	
             }
             if("out".equals(value[0])){
                 proc.registerOutParameter(i,Types.VARCHAR);
                 if("msg".equals(value[1])){
                     out_msg[0] = String.valueOf(i); 
                     out_msg[1] = value[2];
                 }
                 if("success".equals(value[1])){
                     out_success[0] = String.valueOf(i); 
                     out_success[1] = value[2];
                 }
             }	
         }
         proc.execute(); //执行
         if(!"".equals(out_success[0])){
             out_success[0] = proc.getString(Integer.parseInt(out_success[0]));
         }
         if(!"".equals(out_msg[0])){
             out_msg[1] = proc.getString(Integer.parseInt(out_msg[0]));
         }
         if (!out_success[0].equals(out_success[1])){
             conn.rollback();
             ServiceManager.payment.getGpPOAFindService().throwException(out_msg[1]);
         }
         else{
             conn.commit();
         }
     }
     catch (Exception e)
     {
         if (conn != null)
         {
             conn.rollback();
         }
         throw e;
     }
     finally{
         if (proc != null){
             try{
                 proc.close();
             }
             catch (Exception e){
                 logger.error("GpPaymentMainDaoHibernateImpl.executePaymentVerify Close proc error:" + e);
             }
             proc = null;
         }
         if (conn != null){
             try{
                 conn.close();
             }
             catch (Exception e){
                 logger.error("GpPaymentMainDaoHibernateImpl.executePaymentVerify Close conn error:" + e);
             }
             conn = null;
         }
     } 
 		
 }
 	
 public Map<String, String[]> parameterMap(String inParameterJsonArray,String outParameterJsonArray ) throws Exception{
     Map<String,String[]> parameterMap = new HashMap<String, String[]>();
     if(inParameterJsonArray!=null&&!"".equals(inParameterJsonArray)){
         JSONArray inParameterJsons = new JSONArray(inParameterJsonArray);
         for(int i=0;i<inParameterJsons.length();i++){
             JSONObject parameterJson = (JSONObject)inParameterJsons.get(i);
             String index = parameterJson.getString("index"); 
             String type = parameterJson.getString("type"); 
             String value = parameterJson.getString("value"); 
             if("str".equals(type)||"date".equals(type) ){
                 if(parameterMap.containsKey(index)){
                     throw new Exception("参数配置错误，请联系管理员");
                 }else {
                     parameterMap.put(index, new String[]{"in",type,value});
                 }
             } else {
                 throw new Exception("仅支持入参为字符和日期格式的存过，请联系管理员");
             }
 
         }	
     }
     if(outParameterJsonArray!=null&&!"".equals(outParameterJsonArray)){
         JSONArray outParameterJsons = new JSONArray(outParameterJsonArray);
         for(int i=0;i<outParameterJsons.length();i++){
             JSONObject parameterJson = (JSONObject)outParameterJsons.get(i);
             String index = parameterJson.getString("index");
             String type = parameterJson.getString("type");
 
             String success = null,msg=null,key=null ;
             for (Iterator iterator = parameterJson.keys(); iterator.hasNext();) {
                 key = (String) iterator.next();
                 if ("success".equals(key)) {
                     success = parameterJson.getString(key);
                 }
                 if ("msg".equals(key)) {
                     msg = parameterJson.getString(key);
                 } 
                 if(success!=null && msg!=null ){
                     throw new Exception("参数配置错误，请联系管理员");
                 }
             }	
 
             if("str".equals(type)){
                 if(parameterMap.containsKey(index)){
                     throw new Exception("参数配置错误，请联系管理员");
                 }else {
                     if(success!=null){
                         parameterMap.put(index,new String[]{"out","success",success});
                     }
                     if (msg!=null) {
                         parameterMap.put(index,new String[]{"out","msg","成功"});
                     } 
                 }
             } else {
                 throw new Exception("出参仅支持字符型,请联系管理员！");
             }
         }
 
     }
     return parameterMap;
 }
 
 ```

二级联动加动态input输入框实现思路

1. 数据结构

2. 程序设计

3 程序源码及效果图

悦读