java - 使用 spring mvc 在单击按钮时在表上添加行并将添加的行绑定(bind)到 modelAttribute

Question

我有一个表，我从我的 spring Controller 方法传递学生对象列表，在页面加载时填充 3 行。我希望用户能够在单击按钮时添加更多行删除现有行。谁能告诉我如何实现这一目标。请参阅下面我的 Controller 和 jsp 代码。单击添加时，我想再添加 3 行选择复选框并单击删除行应删除该行。我想绑定(bind)添加的列

我是 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" width="1200" height="300" 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 width="1200" height="200" style="border-collapse: collapse;" border="0" bordercolor="#006699" cellspacing="0" cellpadding="0">

                <thead>

                <tr height="1" bgcolor="lightblue">
                    <th colspan="1">
                        No
                    </th>
                    <th width="5">
                        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 width="15">
                        <b>${status.count}</b>
                    </td>

                    <td width="10">
                        <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 width="100" align="center"><B>
                        ${savedMsg}
                        </B>
                        </td>
                        </tr>   


        </form:form>

</table>

Answer 1

尽管这个帖子比较旧，但为了其他需要这个的人的利益。

让我用最简单的代码和包含 firstName、email、userName 和 gender 字段的用户示例进行解释，这样人们就不会对更大的代码感到困惑。
假设您从 Controller 发送 usersList 中的 3 个空用户，这将创建 3 个空行。如果您检查/查看页面源代码，您将看到

• 具有不同id 的行( <input> tags )，例如list0.firstName list1.firstName
  
• 具有不同名称 的行 ( <input> tags )，例如 list[0].firstName list[1].firstName
  

每当提交表单时，id's 不会被服务器考虑(添加只是为了帮助客户端验证)，但 name 属性 将被解释为请求参数并被使用构建您的 modelAttribute，因此属性名称在插入行时非常重要。

添加行

那么，如何构造/追加新行？
如果我从 UI 提交 6 个用户， Controller 应该从 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>

1. 复制第一行并构建一个 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>';

1. 将构建的行附加到 <tbody> . UI 中的行也会在提交表单时添加，新添加的行将在 Controller 中接收。

删除行

删除行有点复杂，我会尽量用最简单的方式解释

• 假设您添加了第 0 行、第 1 行、第 2 行、第 3 行、第 4 行、第 5 行
  
• 删除了第 2 行、第 3 行。不要只是隐藏该行，而是将其从通过捕获事件的 DOM。
  
• 现在 row0,row1,row4,row5 将被提交，但是在 Controller 中你userList 将有 6 个用户对象，但 user[2].firstName 将为空user[3].firstName 将为空。
  
• 因此在您的 Controller 中迭代并检查是否为 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>

JSP中需要包含Javascript

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>';
}