Question

*Edit: I may have to use a list but the same principle applies.

I'm attempting to bind an array to a form using the @ModelAttribute annotation. A table is populated with the contents of the array (each element in the array corresponds to a row in the table). The array may be populated with data or may be empty when it's bound. The user can add rows to the table (which should add elements to the array).

My question is how can elements be added to the array if it's already defined before I pass it in? Will this automagically happen when the form is submitted?

<body>
    <h1>Members</h1>
        <form:form action="configure" modelAttribute="members" method="post" id="member-form">
            <table id="member-table" class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="member-table-body">
                    <c:forEach items="${members}" var="member" varStatus="i" begin="0" >
                        <tr class="member">    
                            <td><form:input path="members[${i.index}].name" id="name${i.index}" /></td>
                            <td><a href="#" class="remove">Remove</a></td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
            <input type="submit" value="Save" id="submit" />
            <a href="#" id="add">Add Member</a>
            <a href="?f=">Reset List</a>
        </form:form>   
</body>

__

$(document).ready(function(){
$('#add').click(function(e) {
    e.preventDefault();
    //Add a member

    //Get the number of rows that are in the table
    var memberTable = $('#member-table-body');
    var numRows = memberTable.children('tr').length

    //Add row to the table.
    // memberTable.innerHTML(

    return false;
});
$('.remove').on('click', function(e) {
                e.preventDefault();
                $(this).parent().parent().remove();
                return false;
});

});​

Était-ce utile?

La solution

You need to create a Model class wrapping the List and use this Model in your controller.

Something like:

package net.viralpatel.spring3.form;

import java.util.List;

public class ContactForm {

    private List<Contact> contacts;

    public List<Contact> getContacts() {
        return contacts;
    }

    public void setContacts(List<Contact> contacts) {
        this.contacts = contacts;
    }
}

And then use this in JSP as:

<c:forEach items="${contactForm.contacts}" var="contact" varStatus="status">
    <tr>
        <td align="center">${status.count}</td>
        <td><input name="contacts[${status.index}].firstname" value="${contact.firstname}"/></td>
        <td><input name="contacts[${status.index}].lastname" value="${contact.lastname}"/></td>
        <td><input name="contacts[${status.index}].email" value="${contact.email}"/></td>
        <td><input name="contacts[${status.index}].phone" value="${contact.phone}"/></td>
    </tr>
</c:forEach>

See this tutorial: Spring MVC: Multiple Row Form Submit using List of Beans

Autres conseils

This cannot be done automagically by Spring for you. Actually you are not binding any thing here. You are iterating the array using the JSTL EL and setting it to the text field. Ideally how this can be handled is you need to prepare the whole table as a json string and submit to the backend, parse over there and get to know how many have been added/deleted/updated. You can have a hidden column to maintain this state and identify in the backend. I dont think the array gets expanded automatically in the front end. This is my 2 cents.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top