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)@ResponseBodypublic 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有不足的地方
到现在还是不懂这物品数量的合计功能要不要，毕竟单位不同的时候这总数能反映啥？？
哈哈哈。。。。