bean类设计
/**
* 主表
*/
package com.netmarch.rcsb.rcsbinfo.bean;
import java.util.List;
public class RcsbInfoYjjsnrPrimary {
private int id;
private String projectid;
private String ztc1;//主题词1
private String ztc2;//主题词2
private String ztc3;//主题词3
private String ztc4;//主题词4
private String ztc5;//主题词5
private String xmgk;//项目概况
private String yjjsnrtype;//研究建设内容附表type
private String gjjs;//关键技术
private List<RcsbInfoYjjsnrSubordinate> subordinates;//建设内容集合-------------------------多组重复数据
public String getGjjs() {
return gjjs;
}
public void setGjjs(String gjjs) {
this.gjjs = gjjs;
}
public List<RcsbInfoYjjsnrSubordinate> getSubordinates() {
return subordinates;
}
public void setSubordinates(List<RcsbInfoYjjsnrSubordinate> subordinates) {
this.subordinates = subordinates;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getProjectid() {
return projectid;
}
public void setProjectid(String projectid) {
this.projectid = projectid;
}
public String getZtc1() {
return ztc1;
}
public void setZtc1(String ztc1) {
this.ztc1 = ztc1;
}
public String getZtc2() {
return ztc2;
}
public void setZtc2(String ztc2) {
this.ztc2 = ztc2;
}
public String getZtc3() {
return ztc3;
}
public void setZtc3(String ztc3) {
this.ztc3 = ztc3;
}
public String getZtc4() {
return ztc4;
}
public void setZtc4(String ztc4) {
this.ztc4 = ztc4;
}
public String getZtc5() {
return ztc5;
}
public void setZtc5(String ztc5) {
this.ztc5 = ztc5;
}
public String getXmgk() {
return xmgk;
}
public void setXmgk(String xmgk) {
this.xmgk = xmgk;
}
public String getYjjsnrtype() {
return yjjsnrtype;
}
public void setYjjsnrtype(String yjjsnrtype) {
this.yjjsnrtype = yjjsnrtype;
}
}
/**
* 重复数据bean
*/
package com.netmarch.rcsb.rcsbinfo.bean;
public class RcsbInfoYjjsnrSubordinate {
private int id;
private String projectid;
private String yjjcnr;//建设内容
private String yjjsnrtype;//建设内容type-----唯一标识
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getProjectid() {
return projectid;
}
public void setProjectid(String projectid) {
this.projectid = projectid;
}
public String getYjjcnr() {
return yjjcnr;
}
public void setYjjcnr(String yjjcnr) {
this.yjjcnr = yjjcnr;
}
public String getYjjsnrtype() {
return yjjsnrtype;
}
public void setYjjsnrtype(String yjjsnrtype) {
this.yjjsnrtype = yjjsnrtype;
}
}
controller层
没有太多语句,service层没有复杂操作,只是简单是接收数据,保存数据就不展示了
@ResponseBody
@RequestMapping(value="/saveYjjsnr", produces="text/html; charset=utf-8")
public String saveYjjsnr(HttpServletRequest request, @RequestBody RcsbInfoYjjsnrPrimary infoYjjsnrPrimary) {
return YjjsnrService.savePrimary(infoYjjsnrPrimary);
}
前端
我的重复数据是动态添加的,layui框架下进行渲染
<body>
<form class="layui-form">
<table class="layui-table">
<colgroup>
<col width="10%" />
<col width="10%" />
<col width="80%" />
</colgroup>
<thead>
<tr>
<td colspan="3">。</span> </td>
</tr>
</thead>
<tbody >
<tr>
<td colspan="3" style="text-align: right;">
<button type="button" class="layui-btn saveButtom" onclick="addyjjsnr()" >新增</button>
<button type="button" class="layui-btn saveButtom" onclick="delgw()" >删除</button>
</td>
</tr>
<tr>
<td></td>
<td>序号</td>
<td>研究或建设内容</td>
</tr>
</tbody>
<tbody class="tbody-yjjsnr">//重复数据列表
<c:forEach items="${bean.subordinates }" var="subordinates" varStatus="status">
<tr><td><input type="checkbox" lay-skin="primary" lay-filter="checkItem" class="check_aa" value="${subordinates.yjjsnrtype }" />
<input type="hidden" name="yjjsnrtype" value="${subordinates.yjjsnrtype }" />
</td>
<td class="td-item">${status.count }</td>
<td class="td-item"><input name="yjjcnr" type="text" class="layui-input total-item" value="${subordinates.yjjcnr }" ></td>
</tr>
</c:forEach>
<tr class="tr-yjjsnr"></tr>
</tbody>
</table>
</form>
<form class="layui-form" id="listForm">
<input type="hidden" name="projectid" id="projectid" value="${projectid }" />
<input type="hidden" name="subordinates" />
<table class="layui-table">
<thead>
<tr>
<td></span></td>
</tr>
<tr>
<td>
<textarea rows="5" cols="10" class="layui-textarea" name="gjjs" >${bean.gjjs }</textarea>
</td>
</tr>
<tr>
<td>
主题词(不超过5个):
1、<div class="layui-inline">
<div class="layui-input-inline">
<input type="tel" name="ztc1" lay-verify="ztc1" autocomplete="off" class="layui-input" value="${bean.ztc1 }" />
</div>
</div>
2、<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="ztc2" lay-verify="ztc2" autocomplete="off" class="layui-input" value="${bean.ztc2 }" />
</div>
</div>
3、<div class="layui-inline">
<div class="layui-input-inline">
<input type="tel" name="ztc3" lay-verify="ztc3" autocomplete="off" class="layui-input" value="${bean.ztc3 }" />
</div>
</div>
4、<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="ztc4" lay-verify="ztc4" autocomplete="off" class="layui-input" value="${bean.ztc4 }" />
</div>
</div>
5、<div class="layui-inline">
<div class="layui-input-inline">
<input type="tel" name="ztc5" lay-verify="ztc5" autocomplete="off" class="layui-input" value="${bean.ztc5 }" />
</div>
</div>
</td>
</tr>
<tr>
<td>项目概况 <div style="color: red;text-align: left;">说明:<br />
</td>
</tr>
<tr>
<td>
<textarea rows="5" cols="10" class="layui-textarea" name="xmgk" >${bean.xmgk }</textarea>
</td>
</tr>
</thead>
</table>
<input type="hidden" name="" class="" /><!-- 研究建设内容 -->
<div style="text-align: center;margin-top: 60px;">
<button type="button" class="layui-btn saveButtom" onclick="save()" >保存</button>
</div>
</form>
<script>
//动态添加重复数据列表
var index = 0;
function addyjjsnr(){
index +=1;
let html=`<tr><td><input type="checkbox" lay-skin="primary" lay-filter="checkItem" class="check_aa">
<input type="hidden" name="yjjsnrtype" />
</td>
<td class="td-item">`+index+`</td>
<td class="td-item"><input name="yjjcnr" type="text" class="layui-input total-item" ></td>
</tr>`;
$(".layui-table").find(".tbody-yjjsnr").find(".tr-yjjsnr").before(html);
var main = $(window.parent.document).find("#C106_formTable_iframe");
var thisheight = $(document).height() + 60;
main.height(thisheight);
renderForm();
}
//获取重复数据内容
function getjson(){
let jsons = [];
$(".tbody-yjjsnr").find("tr:not(.tr-yjjsnr)").each(function (index,val) {
let json={};
json.projectid=$("input[name=projectid]").val();
json.yjjcnr=$(this).find("input[name=yjjcnr]").val();
json.yjjsnrtype=$(this).find("input[name=yjjsnrtype]").val();
jsons.push(json);
});
var jsones = JSON.stringify(jsons);
return jsons;
}
//提交信息到后端
function save(){
var formData=$("#listForm").serializeObject();//获取非重复信息的信息,也就是上面主表信息
formData.subordinates = getjson();//将重复数据赋值给主表里list集合对应字段
console.log(formData);//打印数据
console.log(JSON.stringify(formData));
$.ajax({
cache: false,
type : "post",
url : "${pageContext.request.contextPath}/rcsb/info/saveYjjsnr",
contentType: "application/json; charset=utf-8",
data:JSON.stringify(formData),
dateType : "text",
success : function(result){
layer.alert(result);
}
});
}
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
</script>
</body>
演示图片
一些信息不方便给诸位看