前端表格多条数据（Table）包含form表单的数据 Table多条数据json封装后+ form表单数据一并异步提交到后台处理
1.前端页面form
<form id="add_form" name="add_form" action="" method="post" enctype="multipart/form-data" onsubmit="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" onclick="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" onclick="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" onclick="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);" onclick="addFeeWayTable()" class="btn"><span class="icon-plus"></span>新增</a>
<a href="javascript:void(0);" onclick="deleteFeeWayTable()" id="deleteFeeWayBtn" class="btn" disabled="disabled"><span class="icon-trash"></span> 删除</a>
</div>
</div>
</div>
</div><!--tab-plane active-->
<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="取消 " onclick="javascript :history.go(-1)" />
</div>
</div><!--tab-content-->
</div>
</div>
</div>
</div>
</div>
<!-- 主体部分 -->
</form>2.js处理封装数据提交
<script type="text/javascript">
// JSON字符串转换JSON对象
var a = JSON.parse("{\"title\":\"\",\"data\":[]}");
// 封装json对象方法
function getJson(){
var arr = new Array();
// 遍历table表格多个数据 这里加 tbody 去掉table的标题栏，否则会用空行数据
$("#table_fee_way_single tbody tr").each(function (i, e) {//每一行,选择器自己修改
// 遍历每一行
// 封装对象
var PayObj =
{
lateChargeRateType:"",
lateChargeRate:"",
lateChargeStartDay:"" ,
lateChargeEndDay:"",
beginDate:"",
endDate:"",
state:""
};
var row = {};
$(e).find("input,select").each(function (ii, ee) {//每行里面需要提交的数据 遍历每一行的数据 寻找每一行内的标签
var inputs = $(ee);
var obj = {};
// inpputs.val 每一行的数据
obj = inputs.val();
// 截断字符串 取每一行的属性name名字
var sliceStr = inputs.attr("name");
if(sliceStr != undefined && sliceStr != 'undefined' && sliceStr != null){
// 寻找每一行的数据的属性 因为每行的name属性 如 同一个属性 属性name名多条数据是多个 late_charge_rate1 late_charge_rate2
if(sliceStr.substring(0,sliceStr.length - 1) == 'late_charge_rate'){
PayObj.lateChargeRate = inputs.val();
} else if(sliceStr.substring(0,sliceStr.length - 1) == 'late_charge_rate_type'){
PayObj.lateChargeRateType = inputs.val();
} else if(sliceStr.substring(0,sliceStr.length - 1) == 'late_charge_start_day'){
PayObj.lateChargeStartDay = inputs.val();
} else if(sliceStr.substring(0,sliceStr.length - 1) == 'late_charge_end_day'){
PayObj.lateChargeEndDay = inputs.val();
} else if(sliceStr.substring(0,sliceStr.length - 1) == 'begin_date'){
PayObj.beginDate = inputs.val();
} else if(sliceStr.substring(0,sliceStr.length - 1) == 'end_date'){
PayObj.endDate = inputs.val();
} else if(sliceStr.substring(0,sliceStr.length - 1) == 'state_late'){
PayObj.state = inputs.val();
}
}
// obj["value"] = inputs.val();
// obj["seq"] = inputs.next().val();
row[inputs.attr("name")] = obj;
});
arr.push(row);
// 向JSON数组添加JSON对象的方法；很关键
a.data.push(PayObj);
});
// 格式化数据 JSON对象转化为JSON字符串
return JSON.stringify(a);
}
//***********************************绑定单击事件**********************************
$(function(){
$("#province2").change(function () {
addressCity('province2', 'city2','county2');
});
//表单验证
$("#add_form").validationEngine();
$(".datepicker").datepicker();
//保存
$("#doSave").click(function(){
var obj = getJson();
//验证
var b=jQuery('#add_form').validationEngine('validate');
if(!b){
return ;
}
// 还款开户行的省和市
var province_add = $("#province2").val();
var city_add = $("#city2").val();
if (province_add == null || province_add == "" || province_add == undefined) {
alertTip("province2",'*还款开户行省份非空！');
return ;
}
if (city_add == null || city_add == "" || city_add == undefined) {
alertTip("city2",'*还款开户行市非空！');
return ;
}
if(assembleFeeWay()){
$(".datepicker").datepicker();
<%--//提交表单--%>
<%--$("#doSave").attr("disabled",true);--%>
<%--$("#doChannel").attr("disabled",true);--%>
<%--$("#add_form").attr("action", "${ctx}/cutpayment/loanRelationShip/addLoanRelationShipAction.do");--%>
<%--$("#add_form").submit();--%>
// 这里换成ajaxSubmit 同时提交table封装的多条json数据 obj ajaxSubmit还可以提交上面的Form表单数据
$("#add_form").ajaxSubmit({
type: "post",
url : "${ctx}/cutpayment/loanRelationShip/addLoanRelationShipAction.do",
dataType: "json",
cache: true,
data:{'param':obj},
success: function (data) {
$("#doSave").attr("disabled",false);
showAlertMsg(data.flag.errorMsg, {
closeFunction: function () {
if (data.flag.success == true) {
window.location.href="${ctx}/member/relation/bankOfHuaXiaManager.do"
}
}
});
},
error: function () {
$("#doSave").attr("disabled",false);
alertMsg(null, false, null, null, "调用接口失败，请稍后重试!");
}
});
}
});
});
function pop_custom_select_value(popId, selectId, isMulit, value) {
if(selectId=="pop_member_select_value_fund"){
$("#fund_member_id").val(value.id);
$("#fund_member_name").val(value.name);
}
if(selectId=="pop_member_select_value_debit"){
$("#debit_member_id").val(value.id);
$("#debit_member_name").val(value.name);
}
if(selectId=="pop_pay_dialog"){
$("#pay_id").val(value.id);
$("#bank_name").val(value.name);
}
}
//***********************************省市**********************************
function addressCity(province, city, county1) {
var body = "<option value=\"\">市</option>";
var provinceId = $("#" + province).find('option:selected').attr('p');
sendRequest("${ctx}/ma/public/ajaxCityByProvinceID.do", {
provinceId: provinceId
}, function (data) {
if (data.retCode == 1) {
var body1 = "";
if (data.dirCityList != null && data.dirCityList.length > 0) {
$.each(data.dirCityList, function (i, item) {
if (data.dirCityList.length == 1) {
body1 = body1 + "<option value=\"" + item.city_name + "\" p=\""+item.city_id+"\" selected=\"selected\">" + item.city_name + "</option>";
} else {
body1 = body1 + "<option value=\"" + item.city_name + "\" p=\""+item.city_id+"\">" + item.city_name + "</option>";
}
});
body = body + body1;
}
}
$("#" + city).html(body);
if(county1=='county1'){
body="<option value=\"\" selected=\"selected\">区县</option>";
$("#"+county1).html(body);
}
if(data.dirCityList.length == 1){
addressCounty('city1', 'county1');
}
});
}
//由市查询区县
function addressCounty(city,county) {
var body = '<option value="" selected="selected">区县</option>';
var body1 = "";
var cityId = $("#" + city).find('option:selected').attr('p');
sendRequest("${ctx}/sys/dir/ajaxCountyByID.do", {
cityId: cityId
}, function (data) {
if (data.retCode == 1) {
if (data.dirCountyList != null && data.dirCountyList.length > 0) {
$.each(data.dirCountyList, function (i, item) {
if (data.dirCountyList.length == 1) {
body1 = body1 + "<option value=\"" + item.county_name + "\" selected=\"selected\">" + item.county_name + "</option>";
} else {
body1 = body1 + "<option value=\"" + item.county_name + "\">" + item.county_name + "</option>";
}
});
body = body + body1;
}
}
$("#" + county).html(body);
});
}
//***********************************新增罚息设置**********************************
var table_num = 1;
function addFeeWayTable() {
table_num += 1;
var table_value = '<tr id="fee_way_tr'+table_num+'">'
+ '<td><select id="late_charge_rate_type'+table_num+'" name="late_charge_rate_type'+table_num+'" class="select" style="width: 50px\\;" ><option value="1">年化日利率</option></select></td>'
+ '<td><input type="text" id="late_charge_rate'+table_num+'" name="late_charge_rate'+table_num+'" class="validate[required,custom[numPoint6]]" placeholder="必填" /></td>'
+ '<td><input type="text" id="late_charge_start_day'+table_num+'" name="late_charge_start_day'+table_num+'" class="validate[required,custom[noNegtvIntger]]" placeholder="必填" /></td>'
+ '<td><input type="text" id="late_charge_end_day'+table_num+'" name="late_charge_end_day'+table_num+'" class="validate[custom[noNegtvIntger]]" placeholder="空则没有结束日" /></td>'
+ '<td><input type="text" id="begin_date'+table_num+'" name="begin_date'+table_num+'" class="datepicker validate[required, custom[date]]" placeholder="必填" /></td>'
+ '<td><input type="text" id="end_date'+table_num+'" name="end_date'+table_num+'" class="datepicker validate[custom[date]]" placeholder="无则不失效" /></td>'
+ '<td>'
+ '<select id="state_late'+table_num+'" name="state_late'+table_num+'" class="select" style="width: 50px\\;" >'
+ '<option value="1">开启</option>'
+'<option value="0">关闭</option>'
+'</select>'
+ '</td>'
+ '</tr>';
$("#table_fee_way_single").append(table_value);
$("#deleteFeeWayBtn").attr("disabled", false);
var late_charge_end_day_no_data = $("#late_charge_end_day"+ table_num).val();
if(late_charge_end_day_no_data == undefined || late_charge_end_day_no_data == "" || late_charge_end_day_no_data == null){
$("#late_charge_end_day"+ table_num).attr('class','validate[]');
}
var end_date_no_data = $("#end_date"+ table_num).val();
if(end_date_no_data == undefined || end_date_no_data == "" || end_date_no_data == null){
$("#end_date" + table_num).attr('class','validate[]');
}
$(".datepicker").datepicker();
}
function deleteFeeWayTable() {
if (table_num > 1) {
$("#fee_way_tr" + table_num).remove();
table_num = table_num - 1;
}
if (table_num == 1) {
$("#deleteFeeWayBtn").attr("disabled", true);
}
}
//***********************************拼装计费策略*****************************
function assembleFeeWay() {
var lateChargeRateTypes="";
var lateChargeRates="";
var lateChargeStartDays="";
var lateChargeEndDays="";
var beginDates="";
var endDates="";
var stateLates="";
for ( var i = 1; i <= table_num; i++) {
var late_charge_rate_type = $("#late_charge_rate_type" + i).val();
var late_charge_rate = $("#late_charge_rate" + i).val();
var late_charge_start_day = $("#late_charge_start_day" + i).val();
var late_charge_end_day_no_data = $("#late_charge_end_day" + i).val();
if(late_charge_end_day_no_data == undefined || late_charge_end_day_no_data == "" || late_charge_end_day_no_data == null){
$("#late_charge_end_day" + i).val("noData");
$("#late_charge_end_day" + i).attr('class','validate[]');
}
var late_charge_end_day = $("#late_charge_end_day" + i).val();
var begin_date = $("#begin_date" + i).val();
var end_date_no_data = $("#end_date" + i).val();
if(end_date_no_data == undefined || end_date_no_data == "" || end_date_no_data == null){
$("#end_date" + i).val("0000-00-00");
$("#end_date" + i).attr('class','validate[]');
}
var end_date = $("#end_date" + i).val();
var state_late=$("#state_late" + i).val();
//判断参数
if (parseFloat(late_charge_rate) > 10000 || parseFloat(late_charge_rate) < 0) {
alertTip("fee_rate"+i,'*费率必须在0-10000之间。');
return false;
}
if (i == 1) {
lateChargeRateTypes += late_charge_rate_type;
lateChargeRates += late_charge_rate;
lateChargeStartDays += late_charge_start_day;
lateChargeEndDays += late_charge_end_day;
beginDates += begin_date;
endDates += end_date;
stateLates += state_late;
} else {
lateChargeRateTypes += "," + late_charge_rate_type;
lateChargeRates += "," + late_charge_rate;
lateChargeStartDays += "," + late_charge_start_day;
lateChargeEndDays += "," + late_charge_end_day;
beginDates += "," + begin_date;
endDates += "," + end_date;
stateLates += "," + state_late;
}
}
$("#lateChargeRateType").val(lateChargeRateTypes);
$("#lateChargeRate").val(lateChargeRates);
$("#lateChargeStartDay").val(lateChargeStartDays);
$("#lateChargeEndDay").val(lateChargeEndDays);
$("#beginDate").val(beginDates);
$("#endDate").val(endDates);
$("#stateLate").val(stateLates);
return true;
}
//***********************************新增罚息设置**********************************
</script>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数据