このスレッドは古く、正しく回答されていますが、初心者の方のために、また追加された行の削除を実現するためのロジックを説明するために。
最小限のコードと、firstName、email、userName、genderの各フィールドを使用したユーザーの例で説明します。
コントローラからusersListに3つの空のユーザーを送信しているとすると、これにより3つの空の行が作成されます。次に、行を追加し、追加した行をmodelAttributeに動的にバインドします。
（最初の3行の場合）ページソースを検査/表示すると、次のように表示されます。
- のような
<input> tags異なるIDを持つRows（ ）list0.firstName
list1.firstName
- のような
<input> tags異なる名前のRows（ ）list[0].firstName
list[1].firstName
フォームが送信されるたびに、 IDはサーバーによって考慮されません（クライアント側の検証を支援するためにのみ追加されます）が、name属性は要求パラメーターとして解釈され、modelAttributeを構築するために使用されるため、行を挿入する際に属性名は非常に重要です。
行を追加する
では、新しい行を作成/追加するにはどうすればよいですか？
UIから6人のユーザーを送信すると、コントローラーはusersListから6人のユーザーオブジェクトを受け取る必要があります。同じことを実現するための手順を以下に示します。1。ページソースの表示を
右クリックします。このような行が表示されます（最初の行と2番目の行で確認できます）-> *[0].**[1].*
<tr>
<td><input id="list0.firstName" name="list[0].firstName" type="text" value=""/></td>
<td><input id="list0.email" name="list[0].email" type="text" value=""/></td>
<td><input id="list0.userName" name="list[0].userName" type="text" value=""/></td>
<td>
<span>
<input id="list0.gender1" name="list[0].gender" type="radio" value="MALE" checked="checked"/>Male
</span>
<span>
<input id="list0.gender2" name="list[0].gender" type="radio" value="FEMALE"/>Female
</span>
</td>
</tr>
<tr>
<td><input id="list1.firstName" name="list[1].firstName" type="text" value=""/></td>
<td><input id="list1.email" name="list[1].email" type="text" value=""/></td>
<td><input id="list1.userName" name="list[1].userName" type="text" value=""/></td>
<td>
<span>
<input id="list1.gender1" name="list[1].gender" type="radio" value="MALE" checked="checked"/>Male
</span>
<span>
<input id="list1.gender2" name="list[1].gender" type="radio" value="FEMALE"/>Female
</span>
</td>
</tr>
- 最初の行をコピーしてJavaScript文字列を作成し、「0」を変数名インデックスに置き換えます。以下のサンプルに示されているように
'<tr>'+
'<td><input id="list'+ index +'.firstName" name="list['+ index +'].firstName" type="text" value=""/></td>'+
'<td><input id="list'+ index +'.email" name="list['+ index +'].email" type="text" value=""/></td>'+
...
'</tr>';
- 構築された行をに追加し
<tbody>ます。フォームの送信時にも行がUIに追加され、新しく追加された行がコントローラーで受信されます。
行を削除しています
行の削除は少し複雑です、私は最も簡単な方法で説明しようとします
- row0、row1、row2、row3、row4、row5を追加したとします。
- row2、row3を削除しました。行を非表示にするだけでなく、イベントをキャッチしてDOMから削除します。
- これで、row0、row1、row4、row5が送信されますが、コントローラーではuserListに6つのユーザーオブジェクトがありますが、user [2] .firstNameはnullになり、user[3].firstNameはnullになります。
- したがって、コントローラーでnullを繰り返して確認し、ユーザーを削除します（ユーザーオブジェクトを削除するためにforeachを使用しないでください）。
初心者に役立つコードを投稿する。
// In Controller
@RequestMapping(value = "/app/admin/add-users", method = RequestMethod.GET)
public String addUsers(Model model, HttpServletRequest request)
{
List<DbUserDetails> usersList = new ArrayList<>();
ListWrapper userListWrapper = new ListWrapper();
userListWrapper.setList(usersList);
DbUserDetails user;
for(int i=0; i<3;i++)
{
user = new DbUserDetails();
user.setGender("MALE"); //Initialization of Radio button/ Checkboxes/ Dropdowns
usersList.add(user);
}
model.addAttribute("userListWrapper", userListWrapper);
model.addAttribute("roleList", roleList);
return "add-users";
}
@RequestMapping(value = "/app/admin/add-users", method = RequestMethod.POST)
public String saveUsers(@ModelAttribute("userListWrapper") ListWrapper userListWrapper, Model model, HttpServletRequest request)
{
List<DbUserDetails> usersList = userListWrapper.getList();
Iterator<DbUserDetails> itr = usersList.iterator();
while(itr.hasNext())
{
if(itr.next().getFirstName() == null)
{
itr.remove();
}
}
userListWrapper.getList().forEach(user -> {
System.out.println(user.getFirstName());
});
return "add-users";
}
//POJO
@Entity
@Table(name = "userdetails")
@XmlRootElement(name = "user")
public class DbUserDetails implements Serializable
{
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String firstName;
private String userName;
private String email;
private String gender;
//setters and getters
}
//list wrapper
public class ListWrapper
{
private List<DbUserDetails> list;
//setters and getters
}
JSPでは
<form:form method="post" action="${pageContext.request.contextPath}/app/admin/add-users" modelAttribute="userListWrapper">
<table class="table table-bordered">
<thead>
<tr>
<th><spring:message code="app.userform.firstname.label"/></th>
<th><spring:message code="app.userform.email.label"/></th>
<th><spring:message code="app.userform.username.label"/></th>
<th><spring:message code="app.userform.gender.label"/></th>
</tr>
</thead>
<tbody id="tbodyContainer">
<c:forEach items="${userListWrapper.list}" var="user" varStatus="loop">
<tr>
<td><form:input path="list[${loop.index}].firstName" /></td>
<td><form:input path="list[${loop.index}].email" /></td>
<td><form:input path="list[${loop.index}].userName" /></td>
<td>
<span>
<form:radiobutton path="list[${loop.index}].gender" value="MALE" /><spring:message code="app.userform.gender.male.label"/>
</span>
<span>
<form:radiobutton path="list[${loop.index}].gender" value="FEMALE" /><spring:message code="app.userform.gender.female.label"/>
</span>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="offset-11 col-md-1">
<button type="submit" class="btn btn-primary">SAVE ALL</button>
</div>
</form:form>
JavascriptをJSPに含める必要があります
var currentIndex = 3; //equals to initialRow (Rows shown on page load)
function addRow()
{
var rowConstructed = constructRow(currentIndex++);
$("#tbodyContainer").append(rowConstructed);
}
function constructRow(index)
{
return '<tr>'+
'<td><input id="list'+ index +'.firstName" name="list['+ index +'].firstName" type="text" value=""/></td>'+
'<td><input id="list'+ index +'.email" name="list['+ index +'].email" type="text" value=""/></td>'+
'<td><input id="list'+ index +'.userName" name="list['+ index +'].userName" type="text" value=""/></td>'+
'<td>'+
'<span>'+
'<input id="list'+ index +'.gender1" name="list['+ index +'].gender" type="radio" value="MALE" checked="checked"/>Male'+
'</span>'+
'<span>'+
'<input id="list'+ index +'.gender'+ index +'" name="list['+ index +'].gender" type="radio" value="FEMALE"/>Female'+
'</span>'+
'</td>'+
'</tr>';
}