logo标签列表

使用Spring MVC在按钮点击时添加表格行并将添加的行绑定到modelAttribute

javajqueryspringjspspring-mvc
11

我有一个表格，从我的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;
    }


}

学生数据传输对象

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>
1
是的，使用JQuery是可能的。请参考以下链接：https://dev59.com/rnA75IYBdhLWcg3wB0ZP - autra
但是如果我使用查询语句，如何绑定值呢？如上所述，页面加载时我只有3个学生对象，如果我克隆行，如何为新增加的行绑定值。 - Sandeep
查看这个链接 http://stackoverflow.com/questions/13358950/getting-a-spring-model-attribute-list-element-using-an-index-from-javascript/13360400#13360400 并结合前一条评论的解决方法。 - Josef Prochazka
我不清楚你提供的链接，请问有人能够用一个简单的例子来解释一下吗？ - Sandeep
使用以下代码，我可以添加新行，但如何绑定新添加的行的数据？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++; }); - Sandeep
1个回答
2
即使这个线程有点老，为了其他需要的人的利益，让我用最简单的代码和用户示例来解释一下，其中包含firstName、email、userName和gender字段，以便人们不会因为更大的代码而感到困惑。
假设您从控制器发送3个空用户到usersList中，这将创建3个空行。如果您检查/查看页面源代码，您将看到：
  • 具有不同id的行(<input> tags)，例如list0.firstNamelist1.firstName
  • 具有不同名称的行(<input> tags)，例如list[0].firstNamelist[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>
  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 中提交表单时，新增加的行也会出现在控制器中。

删除行

删除行有点复杂，我尝试用最简单的方式来解释

  • 假设你添加了 row0、row1、row2、row3、row4、row5
  • 删除 row2、row3。不要仅仅隐藏该行，而是通过捕获事件将其从 DOM 中删除。
  • 现在 row0、row1、row4、row5 将被提交，但在控制器中，userList 将有 6 个用户对象，但 user[2].firstName 和 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>

需要在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>';
}
@Sandeep 这个问题可能比较老了，你可能已经通过任何方式解决了它，但是由于你提出了一个有10k次浏览量的值得注意的问题，我认为有必要回答一下。 - PraveenKumar Lalasangi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接