使用spring mvc在按钮单击时在表上添加行

Question

使用spring mvc在按钮单击时在表上添加行

San*_*eep 9 java jquery spring jsp spring-mvc

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


}

Run Code Online (Sandbox Code Playgroud)

学生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;
    }


}

Run Code Online (Sandbox Code Playgroud)

这里我要添加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";

    }

Run Code Online (Sandbox Code Playgroud)

看我的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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pra*_*ngi 2

尽管该线程较旧，但为了有需要的其他人的利益。

让我用最少的代码和带有名字、电子邮件、用户名和性别字段的用户示例来解释，这样人们就不会与更大的代码混淆。
考虑您正在从控制器发送 usersList 中的 3 个空用户，这将创建 3 个空行。如果您检查/查看页面源代码，您将看到

<input> tags具有不同id 的Rows( )就像list0.firstName list1.firstName
Rows( <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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

将构造的行追加到<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。
因此，在您的控制器中迭代并检查 null 并删除用户。（使用迭代器不要使用 foreach 来删除用户对象）

贴出代码，让初学者受益。

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

Run Code Online (Sandbox Code Playgroud)

在JSP中

//  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
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，11 月前
查看次数：	9664 次
最近记录：	6 年前