spring mvc表单中集合类型的参数绑定，含集合下标动态改变

首先是个实体类的简单介绍：

1、申请表Apply与物品申请ApplyObject是一对一的关系；

2、物品申请ApplyObject与物品列表ApplyObjectObject是一对多的关系；

实体类（省略其他无关的属性和get()set()）

Apply.java

public class Apply {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name="a_id")
private Long id;//申请表id

@Column(name="a_title",nullable=false)
private String title;//申请标题

@Column(name="a_user_id",nullable=false)
private Long userId;//用户id
}

ApplyObject.java

public class ApplyObject {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name="ao_id")
private Long id;//物品申请表id

@Column(name="ao_type",nullable=false)
private Integer type;//物品类型

@OneToMany(cascade=CascadeType.ALL,mappedBy="applyObject")
private List<ApplyObjectObject> applyObjectObject;//物品列表

@JoinColumn(name="ao_apply_id",nullable=false)
@OneToOne(cascade=CascadeType.ALL)
private Apply apply;//通用申请
}

ApplyObjectObject.java

public class ApplyObjectObject {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name="aoo_id")
private Long id;//物品id

@Column(name="aoo_name",nullable=false)
private String name;//物品名称

@Column(name="aoo_unit",nullable=false)
private String unit;//物品单位

@Column(name="aoo_count",nullable=false)
private Integer count;//物品数量

@Column(name="aoo_remark",nullable=false)
private String remark;//备注

@JoinColumn(name="aoo_ao_id",nullable=false)
@ManyToOne(cascade=CascadeType.ALL)
private ApplyObject applyObject;//物品申请表
}

希望实现的功能：

1、后台controller只需要接收ApplyObject就可以绑定到想要的参数；

如：对象Apply、集合ApplyObjectObject

2、物品列表可以动态添加和减少；

表单

<form method="post" id="objectForm">
<fieldset>
<table>
<tr>
<td>申请主题：</td>
<td><input type="text" name="apply.title" placeholder="请填写申请的主题，不超过30个字符" maxlength="30"></td>
</tr>
<tr>
<td>物品类型：</td>
<td>
<#list objectTypes as ot>
<#if ot_index==0>
<input type="radio" name="type" value="${ot.value}" checked="checked">${ot.name}
<#else>
<input type="radio" name="type" value="${ot.value}">${ot.name}
</#if>
</#list>
</td>
</tr>
<tr>
<td>物品明细：</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<div id="object">
<table>
<tr>
<td>物品名称<font color="red">*</font></td>
<td>物品单位<font color="red">*</font></td>
<td>物品数量<font color="red">*</font></td>
<td>备注</td>
<td><a onclick="addObject()" style="background-color: rgba(0, 141, 76, 0.7);" title="添加物品"><i class="iconfont icon-jia"></i></a></td>
</tr>
<tr data-index="0">
<td><input type="text" name="applyObjectObject[0].name" placeholder="请填写物品名称" maxlength="15"></td>
<td><input type="text" name="applyObjectObject[0].unit" placeholder="请填写物品单位" maxlength="10"></td>
<td><input type="text" name="applyObjectObject[0].count" placeholder="请填写物品数量" maxlength="10" class="count" onchange="countSum()" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'')"></td>
<td><input type="text" name="applyObjectObject[0].remark" placeholder="请填写物品备注" maxlength="20" class="remark" ></td>
<td><a class="minus" onclick="minusObject(this)"><i class="iconfont icon-jian" title="删除物品"></i></a></td>
</tr>
<tr>
<td></td>
<td></td>
<td>合计：<span id="countSum">0</span></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>审批对象：</td>
<td>
<input type="hidden" name=“deptOffice value="${userinfo.deptOffice.leader.id}">
${userinfo.deptOffice.leader.name}
</td>
</tr>

<tr>
<td colspan="2" style="text-align: center;">
<input type="hidden" name="apply.userId" value="${userinfo.id}">
<input class="button" type="submit" value="保存为草稿">
<input class="button" type="submit" value="提交">
</td>
</tr>
</table>
</fieldset>
</form>

后台controller

在后台就只用ApplyObject 接收

@RequestMapping(value="/submit/save/object",method=RequestMethod.POST)
@ResponseBody
public void saveObjectForm(ApplyObject applyObject){

List<ApplyObjectObject> list=applyObject.getApplyObjectObject();
for (ApplyObjectObject applyObjectObject : list) {
System.out.println(applyObjectObject);
}
}

到这里已经可以接收到需要的参数了

1、对于属性为一个对象的，只需要用这个属性去点里面的属性，如

<input type="text" name="apply.title">

;

2、对于属性为一个集合的，需要指定该属性的下标再去点属性，如

<input type="text" name="applyObjectObject[0].name">

;

这个集合的下标最好是从0开始按顺序的，不然没有的下标会null；

<input type="text" name="applyObjectObject[0].name">
<input type="text" name="applyObjectObject[10].name">

在后台输出结果为：

ApplyObjectObject [id=null, name=test1, unit=test1, count=12, remark=]

ApplyObjectObject [id=null, name=null, unit=null, count=null, remark=null]

ApplyObjectObject [id=null, name=null, unit=null, count=null, remark=null]

ApplyObjectObject [id=null, name=null, unit=null, count=null, remark=null]

ApplyObjectObject [id=null, name=null, unit=null, count=null, remark=null]

ApplyObjectObject [id=null, name=null, unit=null, count=null, remark=null]

ApplyObjectObject [id=null, name=null, unit=null, count=null, remark=null]

ApplyObjectObject [id=null, name=null, unit=null, count=null, remark=null]

ApplyObjectObject [id=null, name=null, unit=null, count=null, remark=null]

ApplyObjectObject [id=null, name=null, unit=null, count=null, remark=null]

ApplyObjectObject [id=null, name=test2, unit=test2, count=22, remark=]

对于物品可以由用户动态添加或删除来说，下标也要动态改变

JS（使用Jquery）

/**
* 添加一行物品
* @returns
*/
function addObject(){
var objectDom=$($("#object tr:last-child").prev().prop("outerHTML"));//获取包括自身和其子元素的$对象
var lastIndex=objectDom.attr("data-index");//原下标
var newIndex=Number(lastIndex)+1;//新下标

objectDom.children().find("input").each(function(){//修改下标
var text=$(this).attr("name");
$(this).attr("name",text.replace(lastIndex,newIndex));
});
$("#object tr:last-child").before(objectDom.attr("data-index",newIndex).prop("outerHTML"));
}

/**
* 删除一行物品
* @param e
* @returns
*/
function minusObject(e){
if($("#object tr").length!=3){//不是最后一行才能删
var targetTr=$(e).parent().parent();
var targetIndex=Number(targetTr.attr("data-index"));
targetTr.nextAll(":not(:last)").each(function(){//修改下面每行的下标
var lastIndex=$(this).attr("data-index");
$(this).attr("data-index",targetIndex);
$(this).find("input").each(function(){
var text=$(this).attr("name");
$(this).attr("name",text.replace(lastIndex,targetIndex));
});
targetIndex+=1;
});
targetTr.remove();
}
}

最终效果图

后台输出结果：

ApplyObjectObject [id=null, name=阿萨飒飒, unit=按顺, count=12, remark=]

ApplyObjectObject [id=null, name=啊阿萨德, unit=驱蚊器翁, count=11, remark=]

不过现在的问题是保存到数据库会提示ApplyObjectList关联ApplyObject的外键为null，并不能级联保存到。。还在研究中TAT

因为写的比较匆忙

感觉js有不足的地方

到现在还是不懂这物品数量的合计功能要不要，毕竟单位不同的时候这总数能反映啥？？

哈哈哈。。。。