前端表格多条数据（Table）包含form表单的数据 Table多条数据json封装后+ form表单数据一并异步提交到后台处理

骑猪看日落 2022-05-23 12:23 57阅读 0赞

**前端表格多条数据（Table）包含form表单的数据 Table多条数据json封装后+ form表单数据一并异步提交到后台处理**

**1.前端页面form**

<form  id="add_form" name="add_form" action="" method="post" enctype="multipart/form-data" οnsubmit="return checkformDelSpace(this)">
        <input type="hidden" id="lateChargeRateType" name="lateChargeRateType" />
        <input type="hidden" id="lateChargeRate" name="lateChargeRate" />
        <input type="hidden" id="lateChargeStartDay" name="lateChargeStartDay" />
        <input type="hidden" id="lateChargeEndDay" name="lateChargeEndDay" />
        <input type="hidden" id="beginDate" name="beginDate" />
        <input type="hidden" id="endDate" name="endDate" />
        <input type="hidden" id="stateLate" name="stateLate">
    
    
    <div class="content">
    	<div class="row-fluid">
    		<div class="span12">
    			<div class="widget">
    				
    				<div class="head dark">
    					<div class="icon">
    						<i class="icos-stats-up"></i>
    					</div>
    					<h2>新增借贷关系配置</h2>
    				</div>
    				<div class="block-fluid">
    					<div class="tab-content">
    						<div class="tab-pane active">
    							
    							<div class="head">
    								<div class="icon">
    									<i class="icosg-clipboard1"></i>
    								</div>
    								<h2>借贷关系配置</h2>
    							</div>
    
    							<div class="row-form">
    								<div class="span2">放款方商户号</div>
    								<div class="span3 input-append">
    									<input type="hidden" name="fund_member_id" id="fund_member_id" />
    									<input type="text" name="fund_member_name" id="fund_member_name" readonly="readonly" class="validate[required]"/>
    									<button class="btn" type="button" οnclick="pop_custom_dialog(3,'pop_member_select_value_fund',false)">选择</button>
    								</div>
    								<div class="span2"></div>
    								<div class="span2">放款方终端号</div>
    								<div class="span3">
    									<input type="text" name="fund_terminal_id" id="fund_terminal_id" class="validate[required]"/>
    								</div>
    							</div>
    
    							<div class="row-form">
    								<div class="span2">借款方商户号</div>
    								<div class="span3 input-append">
    									<input id="debit_member_id" name="debit_member_id" type="hidden" />
    									<input id="debit_member_name" name="debit_member_name" type="text"   readonly="readonly" class="validate[required]"/>
    									<button class="btn" type="button" οnclick="pop_custom_dialog(3,'pop_member_select_value_debit',false)">选择</button>
    								</div>
    								<div class="span2"></div>
    								<div class="span2">借款方商户号登录名</div>
    								<div class="span3">
    									<input type="text" name="debit_member_login_name" id="debit_member_login_name" class="validate[required]"/>
    								</div>
    							</div>
    
    							<div class="row-form">
    								<div class="span2">年化日利率(‱)</div>
    								<div class="span3">
    									<input type="text" name="loan_rate" id="loan_rate" class="validate[required,custom[numPoint6]]"/>
    								</div>
    								<div class="span2"></div>
    								<div class="span2">利率模式</div>
    								<div class="span3">
    									<select id="interest_rate_type" name="interest_rate_type" class="select" style="width: 50px;">
    										<option value="1">年化日利率</option>
    									</select>
                                    </div>
    							</div>
    
    							<div class="row-form">
    								<div class="span2">还款方式</div>
    								<div class="span3">
    									<div class="row-form">
    										<select id="repayment_type" name="repayment_type" class="select" style="width: 50px;">
    											<option value="1">可以部分还款</option>
    											<option value="2">全额还款</option>
    										</select>
    									</div>
    									<div class="row-form">
    										部分还款方式每次还部分本息，分多次还清;全额还款方式需一次本息还清
    									</div>
    								</div>
    								<div class="span2"></div>
    								<div class="span2">借方还款银行</div>
    								<div class="span3 input-append">
    									<input type="hidden" id="pay_id" name="pay_id" />
    									<input type="text" name="bank_name" id="bank_name" class="validate[required]"/>
    									<button class="btn" type="button" οnclick="pop_custom_dialog(20096,'pop_pay_dialog',false,500,{id:9})">选择</button>
    								</div>
    							</div>
    
    							<div class="row-form">
    								<div class="span2">证件类型</div>
    								<div class="span3">
    									<select id="cert_type" name="cert_type" class="select" style="width: 50px;">
    										<option value="01">身份证</option>
    										<option value="00">社会信用代码</option>
    									</select>
    								</div>
    								<div class="span2"></div>
    								<div class="span2">借方统一社会信用代码</div>
    								<div class="span3">
    									<input type="text" id="cert_no" name="cert_no" class="validate[required]"/>
    								</div>
    							</div>
    
    							<div class="row-form">
    								<div class="span2">借方还款账户名</div>
    								<div class="span3">
    									<input type="text" id="acc_name" name="acc_name" class="validate[required]"/>
    								</div>
    								<div class="span2"></div>
    								<div class="span2">借方还款账户</div>
    								<div class="span3">
    									<input type="text" id="acc_no" name="acc_no" class="validate[required]"/>
    								</div>
    							</div>
    
    							<div class="row-form">
    								<div class="span2">还款账户开户行</div>
    								<span class="span3">
    										<select id="province2" name="province">
                                                <option value="" selected="selected">省</option>
                                                <c:forEach var="provinceList" items="${dirProvinceList}">
                                                    <option value="${provinceList.province_name}"
    														p="${provinceList.province_id}">${provinceList.province_name}</option>
    											</c:forEach>
                                            </select>
    									</span>
    								<span class="span2">
    										<select id="city2" name="city">
                                                <option value="" selected="selected">市</option>
                                            </select>
    									</span>
    
    								<div class="span5">
    									<input type="text" name="sub_branch_name" id="sub_branch_name" placeholder="请填写支行名称" class="validate[required]"/>
    								</div>
    							</div>
    
                                <div class="row-form">
                                    <div class="span2">借贷关系状态</div>
                                    <div class="span3">
                                        <select id="state" name="state" class="select" style="width: 50px;">
                                            <option value="1">开启</option>
                                            <option value="0">关闭</option>
                                        </select>
                                    </div>
                                    <div class="span2"></div>
                                    <div class="span2"></div>
                                    <div class="span3"></div>
                                </div>
    
                                
                                <div class="head">
                                    <div class="icon">
                                        <i class="icosg-clipboard1"></i>
                                    </div>
                                    <h2>罚息设置</h2>
                                </div>
                                <div class="row-form">
                                    <div class="span" >
                                        <div>
                                            <table id="table_fee_way_single" class="table" cellpadding="0" cellspacing="0" width="100%">
                                                <thead>
                                                    <tr>
                                                        <th width="10%">利率模式</th>
                                                        <th width="10%"><span id="table_value1">罚息年化日利率（‱）</span></th>
                                                        <th width="10%"><span id="table_value2">罚息起始天数（包含）</span></th>
                                                        <th width="10%">罚息结束天数（不包含）</th>
                                                        <th width="10%">生效日期</th>
                                                        <th width="10%">失效日期</th>
                                                        <th width="10%">罚息状态</th>
                                                    </tr>
                                                </thead>
                                                <tr id="trTable" class="trTable">
                                                    <td>
                                                        <select id="late_charge_rate_type1" name="late_charge_rate_type1" class="select" style="width: 50px;">
                                                            <option value="1">年化日利率</option>
                                                        </select>
                                                    </td>
                                                    <td><input type="text" id="late_charge_rate1" name="late_charge_rate1" class="validate[required,custom[numPoint6]]" placeholder="必填" /></td>
                                                    <td><input type="text" id="late_charge_start_day1" name="late_charge_start_day1"
                                                               class="validate[required,custom[noNegtvIntger]]" placeholder="必填" /></td>
                                                    <td><input type="text" id="late_charge_end_day1" name="late_charge_end_day1" class="validate[custom[noNegtvIntger]]" placeholder="空则没有结束日" /></td>
                                                    <td><input type="text" id="begin_date1" name="begin_date1" class="datepicker validate[required, custom[date]]" placeholder="必填"/></td>
                                                    <td><input type="text" id="end_date1" name="end_date1" class="datepicker validate[custom[date]]" placeholder="无则不失效" /></td>
                                                    <td>
                                                        <select id="state_late1" name="state_late1" class="select" style="width: 50px;">
                                                            <option value="1">开启</option>
                                                            <option value="0">关闭</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="right TAR">
                                            <a href="javascript:void(0);" οnclick="addFeeWayTable()" class="btn"><span class="icon-plus"></span>新增</a>
                                            <a href="javascript:void(0);" οnclick="deleteFeeWayTable()" id="deleteFeeWayBtn" class="btn" disabled="disabled"><span class="icon-trash"></span> 删除</a>
                                        </div>
                                    </div>
                                </div>
    
    						</div>
    						<div class="toolbar bottom TAC">
    								<input style="width: 10%" id="doSave" class="btn btn-primary" type="button" value="提交"/>      <input style="width: 10%" id="doChannel" class="btn" type="button" value="取消 " οnclick="javascript :history.go(-1)" />
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    
    </form>

**2.js处理封装数据提交**

**3.****后台解析接收数据**

@RequestMapping("addLoanRelationShipAction.do")
        public ModelAndView addLoanRelationShipAction(LoanRelationShipQueryForm queryForm, HttpServletRequest request) throws Exception{
    
            String param = request.getParameter("param");
            JSONObject json=JSONObject.fromObject(param);
            List<FundshipLateChargeConfigReqDTO> queryList = new ArrayList<FundshipLateChargeConfigReqDTO>();
            List<Map<String,Object>> payList=json.getJSONArray("data");
    
            for(Map map : payList){
                FundshipLateChargeConfigReqDTO reqDTO = new FundshipLateChargeConfigReqDTO();
                reqDTO.setLateChargeRateType(FormatUtil.toInt(map.get("lateChargeRateType")));
                reqDTO.setEndDate(FormatUtil.toDate(map.get("endDate")+"","yyyy-MM-dd"));
                queryList.add(reqDTO);
            }

queryForm用于接受表单数据，param接受封装的多条Table json数据