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

最新推荐文章于 2023-05-26 09:02:21 发布

赖东东的觉悟

最新推荐文章于 2023-05-26 09:02:21 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： spring mvc 文章标签： spring mvc web

本文链接：https://blog.youkuaiyun.com/June49/article/details/78078508

spring mvc 专栏收录该内容

1 篇文章

订阅专栏

首先是个实体类的简单介绍：
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();
    }
}