问题产生场景：
今日做的一个关于基金类项目，基金在申报的时候创建申报管理人同时需要给这个申报管理人添加出资人结构，出资人结构就是关于这个管理人的出资人列表，最开始实现方式我采用先创建一个申报管理人，然后再在创建出资人列表，分布提交，但是产品提出要一起提交。根据需求的变化。整个form表单内都是管理人相关信息添加，列表要嵌套在form表单中。
出资人结构列表实现方式：采用jquery.tmpl()模板方式实现
表单中嵌套列表 采用模板方式进行向列表中添加数据 其中
<tbody id="tbodyId">
</tbody>
通过获取id将模板中的列表行数据追加到tbody中
<div class="table-box"> <div class="main-tit"> <p class="main-txt clearfix"> <span class="left font-wei"><i class="bor-left"></i>管理人出资人结构信息列表</span> <span style="float: right"><button type="button" class="btn_bgc_orange" onclick="addFundManagerInvestor('${fundManager.id}')">+新建管理人出资人结构</button></span> </p> </div> <div class="table-responsive"> <table class="table table_w table-bordered" style="table-layout: fixed;"> <thead> <tr> <th class="text-center">序号</th> <th class="text-center">出资人姓名</th> <th class="text-center">出资额（万元）</th> <th class="text-center">所占比例（%）</th> <th class="text-center">资金性质</th> <th class="text-center">实缴资本（万元）</th> <th class="text-center">操作</th> </tr> </thead> <tbody id="tbodyId"> </tbody> </table> </div> </div>
<script id="dd" type="text/x-jquery-tmpl" > <tr> <td>{{= id}}</td> <td><input name="arr[{{= num}}].investorName" value="{{= investorName}}" readonly></td> <td><input name="arr[{{= num}}].moneyRmb" value="{{= moneyRmb}}" readonly></td> <td><input name="arr[{{= num}}].proportion" value="{{= proportion}}" readonly></td> <td><input name="arr[{{= num}}].moneyType" value="{{= moneyType}}" readonly type="hidden"> {{if moneyType==1}} 民资 {{/if}} {{if moneyType==2}} 国资 {{/if}} {{if moneyType==3}} 外资 {{/if}} {{if moneyType==4}} 引导金 {{/if}} </td> <td ><input name="arr[{{= num}}].payMoney" value="{{= payMoney}}" readonly></td> <td> <a onclick='delFundManage(this)'>删除</a> </td> </tr> </script>
添加数据方式：首先会点击添加出资人弹出一个form表单用来输入添加信息 提交表单
表单
<script id="add_fundManagerInvestor" type="text/x-jquery-tmpl"> <div class="content"> <form class="form-horizontal" id="formAdd" method="post" style="width:100%;"> <div> <table class="table_noline"> <input type="hidden" class="form-control inp-wid" id="gpNotifyId" name="gpNotifyId" value="${gpNotifyId}"> <input type="hidden" class="form-control inp-wid" id="fundManagerId" name="fundManagerId" value="{{= fundManagerId}}"> <tr> <td>出资人名称：<span class="star">*</span></td> <td> <input type="text" class="form-control inp-wid" name="investorName" value=""> </td> </tr> <tr> <td>出资金额（万元）：<span class="star">*</span></td> <td> <input type="text" class="form-control inp-wid" name="moneyRmb" value=""> </td> </tr> <tr> <td>所占比例（%）：<span class="star">*</span></td> <td> <input type="text" class="form-control inp-wid" id="" name="proportion" value=""> </td> </tr> <tr> <td>资金性质：<span class="star">*</span></td> <td> <entry:entry name="moneyType" code="fund_nature" id="type" clazz="entry-tag" /> </td> </tr> <tr> <td>实缴资本（万元）：<span class="star">*</span></td> <td> <input type="text" class="form-control inp-wid" id="payMoney" name="payMoney"/> </td> </tr> </table> </div> </form> </div> </script>
提交表单后数据传入tmpl()中已json形式 index表示列表序号 num表示行号 每一行相同的行号 最终通过 list[0] 代表一行记录形式
var index = 0;
var num = 0;
function insertFundManagerInvestor() {
index = index+1;
var data = $("#formAdd").serializeObject();
data.id=index;
data.num = num;
num=num+1;
$("#dd").tmpl(data).appendTo("#tbodyId");
layer.close(layer_index)
}
这时表单中会存在一个添加的列表 进行表单提交 其中
fundMangerValidator(insertFundManager); 代表了jquery校验回调方式函数的使用就是自定义一个校验函数通过表单的id调用jquery校验方法 将表单提交函数当作参数传入
通过callback参数判断是否表单通过校验
function submitMaterial(message){
var index=layer.confirm(message,{
btn:['确定','取消']
},function(){
if($("#show").css('display')=='none'&& ${not empty list}){
location.href="${base}/investpro/list?entity.gpNotifyId=${entity.id}";
}else {
fundMangerValidator(insertFundManager);
$("#formInfo").submit();
}
layer.close(index);
},function(){
layer.close(index)
})
}
/*新增管理人校验*/
function fundMangerValidator(callback) {
$("#formInfo").validator({
valid: callback,
rules: {
num: [/^\d+(\.{1}\d+)?$/, '只能输入数字'],
anum: [/^\+?[1-9][0-9]*$/, '只能输入整数'],
email: [/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, '邮箱格式不正确'],
phone: [/^1[3|4|5|8][0-9]\d{4,8}$/, '电话号码格式不正确'],
tel: [/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/, '电话号码格式不正确'],
guhua: [/^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/, '固话格式不正确！']
},
fields: {
"entity.name": {
rule: "required",
msg: {
required: "请填写管理人姓名"
}
},
"entity.reginAdress":{
rule: "required",
msg: {
required: "请填写注册地址"
}
},
"entity.legalName": {
rule: "required",
msg: {
required: "请填写法定代表人及风控负责人"
}
},
"entity.keyman": {
rule: "required",
msg: {
required: "请填写团队核心成员"
}
},
"entity.qdman": {
rule: "required",
msg: {
required: "请填写驻青人员"
}
},
"entity.fundNum": {
rule: "required,num",
msg: {
required: "请填写累计管理基金"
}
},
"entity.totalFundMoney": {
rule: "required,num",
msg: {
required: "请填写总规模"
}
},
"entity.investProjectNum": {
rule: "required,num",
msg: {
required: "请填写投资金额"
}
},
"entity.totalProjectMoney": {
rule: "required,num",
msg: {
required: "请填写累计投资项目"
}
},
"entity.exitProjectNum": {
rule: "required,num",
msg: {
required: "请填写累计退出"
}
},
"entity.listProjectNum": {
rule: "required,num",
msg: {
required: "请填写实现上市退出及收益率"
}
},
"entity.exitProjectMoney": {
rule: "required,num",
msg: {
required: "请填写已退出项共计投资"
}
},
"entity.totalExitMoney": {
rule: "required,num",
msg: {
required: "请填写退出资金"
}
},
"entity.investQdNum": {
rule: "required,num",
msg: {
required: "请填写累计退出"
}
},
"entity.totalQdMoney": {
rule: "required,num",
msg: {
required: "请填写实现上市退出及收益率"
}
},
"entity.bmultiplier": {
rule: "required,num",
msg: {
required: "请填写项目回报"
}
},
"entity.cmultiplier": {
rule: "required,num",
msg: {
required: "请填写项目回报"
}
},
"entity.amultiplier": {
rule: "required,num",
msg: {
required: "请填写项目回报"
}
},
}
})
}
实体接收表单提交参数方式：
在实体中定义集合 这里展示实体几个字段以及定义的集合List<Investorinfo> investorinfos
@Fieldmeta(name = "GP是否同基金管理人(是or否)", logflag = 0) private Integer managerIsGp; @Fieldmeta(name = "是否gp", logflag = 0) private Integer gpFlage; @Fieldmeta(name="申报id",logflag = 0) private String gpNotifyId; /** 以下是公共扩展属性（若有较多非共性扩展属性，需定义在子类中） **/ private List<Investorinfo> investorinfos;
Controller接收
@ResponseBody @RequestMapping("/insert") public FundManager insert(FundManagerVO vo) { String id = UUIDFactory.getUUIDStr(); vo.getEntity().setId(id); service.insert(vo.getEntity()); FundManager fundManager = new FundManager(); fundManager.setId(id); List<Investorinfo> list = vo.getArr(); if(null!=list && list.size()>0){ for (Investorinfo investorinfo: list) { investorinfo.setId(UUIDFactory.getUUIDStr()); investorinfo.setCreateUserId(AppWebUtils.getUserId()); investorinfo.setCreateTime(new Date()); investorinfo.setUpdateUserId(AppWebUtils.getUserId()); investorinfo.setUpdateTime(new Date()); investorinfo.setFundManagerId(id); investorinfoService.insert(investorinfo); } } return fundManager; }