使用spring mvc在按钮单击时在表上添加行并将添加的行绑定到modelAttribute
Posted
技术标签:
【中文标题】使用spring mvc在按钮单击时在表上添加行并将添加的行绑定到modelAttribute【英文标题】：Add rows on table on button click using spring mvc and bind added rows to modelAttribute 【发布时间】：2012-11-08 15:47:21 【问题描述】：我有一个表，我从我的 spring 控制器方法传递学生对象列表，在页面加载时填充了 3 行。我希望用户能够在单击按钮时添加更多行删除现有行。谁能告诉我如何实现这一目标。请参阅下面我的控制器和 jsp 代码。单击添加时，我想再添加 3 行选择复选框并单击删除行应该删除该行。我希望绑定添加的列
我对 jQuery 很陌生，如果没有 jQuery，这可能吗？如果没有，请详细告诉我如何使用 jQuery 实现这一目标
学生实体
@Entity
@Table(name="STUDENT_REGISTRATION")
public class Student
private int studentId;
private String firstName;
private String lastName;
private Date dob;
private String sex;
private String status;
private Date doj;
private int deptId;
private String deptName;
private int batchId;
private String batchName;
private int roleId;
private String roleName;
private String regNo;
public Student()
public Student(int studentId, String firstName, String lastName, Date dob,
String sex, String status, Date doj, int deptId,
String deptName, int batchId, String batchName, int roleId,
String roleName, String regNo)
super();
this.studentId = studentId;
this.firstName = firstName;
this.lastName = lastName;
this.dob = dob;
this.sex = sex;
this.status = status;
this.doj = doj;
this.deptId = deptId;
this.deptName = deptName;
this.batchId = batchId;
this.batchName = batchName;
this.roleId = roleId;
this.roleName = roleName;
this.regNo = regNo;
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name="STUDENT_ID")
public int getStudentId()
return studentId;
public void setStudentId(int studentId)
this.studentId = studentId;
@Column(name="STUDENT_FIRST_NAME")
public String getFirstName()
return firstName;
public void setFirstName(String firstName)
this.firstName = firstName;
@Column(name="STUDENT_LAST_NAME")
public String getLastName()
return lastName;
public void setLastName(String lastName)
this.lastName = lastName;
@Column(name="DOB")
public Date getDob()
return dob;
public void setDob(Date dob)
this.dob = dob;
@Column(name="SEX")
public String getSex()
return sex;
public void setSex(String sex)
this.sex = sex;
@Column(name="STATUS")
public String getStatus()
return status;
public void setStatus(String status)
this.status = status;
@Column(name="DOJ")
public Date getDoj()
return doj;
public void setDoj(Date doj)
this.doj = doj;
@Column(name="DEPT_ID")
public int getDeptId()
return deptId;
public void setDeptId(int deptId)
this.deptId = deptId;
@Column(name="DEPT_NAME")
public String getDeptName()
return deptName;
public void setDeptName(String deptName)
this.deptName = deptName;
@Column(name="BATCH_ID")
public int getBatchId()
return batchId;
public void setBatchId(int batchId)
this.batchId = batchId;
@Column(name="BATCH_NAME")
public String getBatchName()
return batchName;
public void setBatchName(String batchName)
this.batchName = batchName;
@Column(name="ROLE_ID")
public int getRoleId()
return roleId;
public void setRoleId(int roleId)
this.roleId = roleId;
@Column(name="ROLE_NAME")
public String getRoleName()
return roleName;
public void setRoleName(String roleName)
this.roleName = roleName;
@Column(name="REG_NO")
public String getRegNo()
return regNo;
public void setRegNo(String regNo)
this.regNo = regNo;
学生 DTO
public class StudentDTO
private int studentId;
private String firstName;
private String lastName;
private Date dob;
private String sex;
private String status;
private Date doj;
private int deptId;
private String deptName;
private int batchId;
private String batchName;
private int roleId;
private String roleName;
boolean select;
private String regNo;
public StudentDTO()
public StudentDTO(int studentId, String firstName, String lastName,
Date dob, String sex, String status, Date doj, int deptId,
String deptName, int batchId, String batchName, int roleId,
String roleName, boolean select, String regNo)
super();
this.studentId = studentId;
this.firstName = firstName;
this.lastName = lastName;
this.dob = dob;
this.sex = sex;
this.status = status;
this.doj = doj;
this.deptId = deptId;
this.deptName = deptName;
this.batchId = batchId;
this.batchName = batchName;
this.roleId = roleId;
this.roleName = roleName;
this.select = select;
this.regNo = regNo;
public int getStudentId()
return studentId;
public void setStudentId(int studentId)
this.studentId = studentId;
public String getFirstName()
return firstName;
public void setFirstName(String firstName)
this.firstName = firstName;
public String getLastName()
return lastName;
public void setLastName(String lastName)
this.lastName = lastName;
public Date getDob()
return dob;
public void setDob(Date dob)
this.dob = dob;
public String getSex()
return sex;
public void setSex(String sex)
this.sex = sex;
public String getStatus()
return status;
public void setStatus(String status)
this.status = status;
public Date getDoj()
return doj;
public void setDoj(Date doj)
this.doj = doj;
public int getDeptId()
return deptId;
public void setDeptId(int deptId)
this.deptId = deptId;
public String getDeptName()
return deptName;
public void setDeptName(String deptName)
this.deptName = deptName;
public int getBatchId()
return batchId;
public void setBatchId(int batchId)
this.batchId = batchId;
public String getBatchName()
return batchName;
public void setBatchName(String batchName)
this.batchName = batchName;
public int getRoleId()
return roleId;
public void setRoleId(int roleId)
this.roleId = roleId;
public String getRoleName()
return roleName;
public void setRoleName(String roleName)
this.roleName = roleName;
public boolean isSelect()
return select;
public void setSelect(boolean select)
this.select = select;
public String getRegNo()
return regNo;
public void setRegNo(String regNo)
this.regNo = regNo;
我在这里添加 3 个学生对象
public List<StudentDTO> addStudentToList()
List<StudentDTO> studentList = new ArrayList<StudentDTO>();
StudentDTO stud = new StudentDTO();
for(int i=0; i<3; i++)
studentList.add(stud);
return studentList;
Student Controller class
@RequestMapping(value="/addStudent", method=RequestMethod.GET)
public ModelAndView getStudentForm(ModelMap model)
List<StudentDTO> studentList = studentService.getStudentAttributesList();
//List<Integer> userIdForDropDown = userDAO.getAllUserIdForDropDown();
//model.addAttribute("userIdDropDown",userIdForDropDown);
List<String> deptList = configDAO.getDeptListForDropDown();
model.addAttribute("deptlist",deptList);
List<String> batchList = configDAO.getAllBatchForDropDrown();
model.addAttribute("batchList", batchList);
ModelAndView mav = new ModelAndView("add_student");
Student stu = new Student();
mav.getModelMap().put("add_student", stu);
StudentForm studentForm = new StudentForm();
studentForm.setStudentList(studentList);
model.addAttribute("studentForm",studentForm);
return mav;
@RequestMapping(value="/addStudent", method=RequestMethod.POST)
public String saveStudent(@ModelAttribute("add_student") StudentForm studenfForm, BindingResult result, SessionStatus status, ModelMap model) throws ParseException
/*if(result.hasErrors())
return "add_student";
*/
List<StudentDTO> newList = (List<StudentDTO>) studenfForm.getStudentList();
List<Student> newList1 = new ArrayList<Student>();
for(StudentDTO stud:studenfForm.getStudentList())
Student student = new Student();
student.setBatchId(stud.getBatchId());
student.setBatchName(stud.getBatchName());
student.setDeptId(stud.getDeptId());
student.setDeptName(stud.getDeptName());
SimpleDateFormat sdf = new SimpleDateFormat("DD/MM/YYYY");
Date dateWithoutTime = sdf.parse(sdf.format(new Date()));
student.setDob(stud.getDob());
student.setDoj(stud.getDoj());
student.setFirstName(stud.getFirstName());
student.setLastName(stud.getLastName());
student.setRegNo(stud.getRegNo());
student.setRoleId(stud.getRoleId());
student.setRoleName(stud.getRoleName());
student.setStatus(stud.getStatus());
student.setSex(stud.getSex());
student.setStudentId(stud.getStudentId());
newList1.add(student);
Integer saveStatus = studentDAO.saveStudentInfo(newList1);
//Integer res = roleDAO.saveRole(role);
if(saveStatus!=null)
status.setComplete();
model.addAttribute("savedMsg", "Student record saved Successfully.");
return "redirect:addStudent";
查看我的 jsp 页面
<table bgcolor="white" align="center" style="border-collapse: collapse;" border="1" bordercolor="#006699" >
<form:form action="addStudent" method="post" commandName="add_student" modelAttribute="studentForm">
<tr>
<td align="center" style="background-color: lightblue"><h3>Add Student</h3></td>
</tr>
<tr align="left">
<td align="left">
<input type="button" id="addrows" name="addrows" class="addperson" value="Add Rows">
<input type="button" id="removerows" class="removerows" value="Delete Rows" />
<input type="submit" value="Save" />
</td>
</tr>
<tr valign="middle" align="center">
<td align="center" valign="middle">
<table style="border-collapse: collapse;" border="0" bordercolor="#006699" cellspacing="0" cellpadding="0">
<thead>
<tr bgcolor="lightblue">
<th colspan="1">
No
</th>
<th >
Select
</th>
<th>
Reg No
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Sex
</th>
<th>
DOB
</th>
<th>
DOJ
</th>
<th>
Dept Name
</th>
<th>
Role Name
</th>
<th>
Batch Name
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<c:forEach var="rows" items="$studentForm.studentList" varStatus="status">
<tr class="$status.index % 2 == 0 ? 'even' : 'odd'" >
<td >
<b>$status.count</b>
</td>
<td >
<form:checkbox path="studentList[$status.index].select"/>
</td>
<td><form:input path="studentList[$status.index].regNo"/></td>
<td><form:input path="studentList[$status.index].firstName"/></td>
<td><form:input path="studentList[$status.index].lastName"/></td>
<td><form:select path="studentList[$status.index].sex">
<form:option value="NONE" label="--- Select ---"/>
<form:option value="M" label="Male"/>
<form:option value="F" label="Female"/>
</form:select></td>
<td><form:input path="studentList[$status.index].dob"/></td>
<td><form:input path="studentList[$status.index].doj"/></td>
<td><form:select path="studentList[$status.index].deptName">
<form:option value="NONE" label="--- Select ---"/>
<form:options items="$deptlist" />
</form:select></td>
<td><form:select path="studentList[$status.index].roleName">
<form:option value="NONE" label="--- Select ---"/>
<form:option value="ROLE_STUDENT" label="Student"/>
<form:option value="ROLE_BATCHREP" label="Batch Rep"/>
</form:select></td>
<td><form:select path="studentList[$status.index].batchName">
<form:option value="NONE" label="--- Select ---"/>
<form:options items="$batchList" />
</form:select>
</td>
<td><form:select path="studentList[$status.index].status">
<form:option value="NONE" label="--- Select ---"/>
<form:option value="E" label="Enable"/>
<form:option value="D" label="Disable"/>
</form:select></td>
</tr>
</c:forEach>
</tbody>
</table>
</td>
</tr>
<tr align="center">
<td align="center"><B>
$savedMsg
</B>
</td>
</tr>
</form:form>
</table>
【问题讨论】：
是的，可以使用 JQuery，请参阅：***.com/questions/3504499/… 但是如果我使用查询如何绑定值，如上所述，如果我克隆行如何绑定额外添加的行的值，我在页面加载时只有 3 个学生对象 看这里***.com/questions/13358950/… 并结合之前评论的解决方案。 我不清楚你给出的链接可以用一个小例子解释一下 使用下面的代码我可以添加新行但是如何从新添加的行中绑定数据 var i = 1; $("button").click(function() $("table tr:first").clone().find("input").each(function() $(this).attr( 'id ': function(, id) return id + i , 'name': function(, name) return name + i , 'value': '' ); ).end ().appendTo("table"); i++; ); 【参考方案1】：即使这个帖子比较老，为了其他需要这个的人的利益。
让我用一个最小的代码和带有 firstName、email、userName 和 gender 字段的用户示例进行解释，这样人们就不会对更大的代码感到困惑。 考虑到您从控制器发送用户列表中的 3 个空用户，这将创建 3 个空行。如果您检查/查看页面源代码，您将看到
具有不同 id 的行（<input> tags），例如 list0.firstName
list1.firstName
具有不同名称的行(<input> tags)，例如list[0].firstName
list[1].firstName
每当提交表单时，服务器不会考虑id的（添加仅用于帮助客户端验证），但name属性将被解释为请求参数并被使用构造你的modelAttribute，因此属性名称在插入行时非常重要。
添加行
那么，如何构造/追加新行？
如果我从 UI 提交 6 个用户，控制器应该从 usersList 接收 6 个用户对象。下面给出了实现相同的步骤
1、右键->查看页面源代码。你会看到这样的行（你可以在第一行看到*[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 已删除第 2 行、第 3 行。不要只是隐藏该行，而是将其从 DOM 通过捕获事件。 现在 row0,row1,row4,row5 将被提交，但在控制器中您的 userList 将有 6 个用户对象，但 user[2].firstName 将为 null 并且 user[3].firstName 将为空。 因此在您的控制器中迭代并检查 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>';
【讨论】：
@Sandeep 这个问题可能比较老，你可以用任何方式自己解决它，但是因为你已经做了一个有 10k 视图的值得注意的问题，我考虑回答。以上是关于使用spring mvc在按钮单击时在表上添加行并将添加的行绑定到modelAttribute的主要内容，如果未能解决你的问题，请参考以下文章
Spring MVC 和 javascript(添加 Rows 函数) 绑定