Question

我正在创建一个可以动态地将行添加到我的html / jsp页面的应用程序，当点击提交时，数据将保存在数据库中。我正在使用javascript来动态添加行。当我输入数据并点击提交时，我的modelAttribute不会绑定到表单页面中的字段。为了避免数组索引超出绑定异常，使用了自动填充列表。以下是表单页面

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
<title>Add/Remove dynamic rows</title>
<SCRIPT lang="javascript">
        function addRow(tableID) 
        {
                var table = document.getElementById(tableID);

                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
                var counts = rowCount - 1;

                var cell1 = row.insertCell(0);
                var ldap = document.createElement("input");
                ldap.type = "text";
                ldap.id="incident"+counts+".ldap"
                ldap.name = "incident[" + counts + "].ldap";
                cell0.appendChild(ldap);

                var cell2 = row.insertCell(1);
                var ticket = document.createElement("input");
                ticket.type = "text";
                ticket.id = "incident"+ counts +".ticket";
                ticket.name = "incident[" + counts + "].ticket";
                cell2.appendChild(ticket);

                var cell3 = row.insertCell(2);
                var status = document.createElement("select");
                status.type = "text";
                status.id = "incident"+ counts +".status";
                status.name = "incident[" + counts + "].status";
                var opt=document.createElement("option");
                opt.text="Pending";
                opt.value="Pending";
                status.options.add(opt);
                var opt=document.createElement("option");
                opt.text="Completed";
                opt.value="Completed";
                status.options.add(opt);
                cell3.appendChild(status);


                var cell4 = row.insertCell(3);
                var comment = document.createElement("input");
                comment.type = "text";
                comment.id = "incident"+ counts +".comment
                comment.name = "incident[" + counts + "].comment";
                cell4.appendChild(comment);

                var cell5=row.insertCell(4);
                var time=document.createElement("input");
                time.type="date";
                time.id="incident"+ counts +".time";
                time.name="incident["+ counts +"].time";
                cell5.appendChild(time);

                var cell6=row.insertCell(5);
                var time=document.createElement("input");
                effort.type="text";
                effort.name="incident["+ counts +"].effort";
                cell6.appendChild(effort);


        }
</SCRIPT>
</HEAD>
<BODY>
<div align="center" style="border:1px solid black">
<h>AGILE</h>
</div>


<form action="saveIncident" modelAttribute="incidentList" method="post">
<div align="center">
<TABLE id="incidentTable">
        <TR>
                <TD>Ldap</TD>
                <TD>Ticket No</TD>
                <TD>Status</TD>
                <TD>Comment</TD>
                <TD>Date</TD>
                <TD>Effort</TD>

        </TR>
        <TR>
                <TD><input type="text" id="incident0.ldap" name="incident[0].ldap"/></TD>
                <TD><INPUT type="text" id="incident0.ticket" name="iincident[0].ticket" /></TD>
                <TD><select name="incident[0].status" id="ncident0.status">
                <option value="Pending">Pending</option>
                <option value=Completed">Completed</option>
                </select></TD>
                <TD><INPUT type="text" id="incident0.comment" name="incident[0].comment" /></TD>
                <TD><input type="date" id="incident0.time" name="incident[0].time"/></TD>
                <TD><INPUT type="text" id="incident0.effort" name="incident[0].effort" /></TD>


        </TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('incidentTable')" /> 
<input type="submit" value="SUBMIT" />
</div>
</form>
</BODY>
</HTML>


Below is the controller:
package com.syed.agile;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.util.AutoPopulatingList;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class HomeController {
    @Autowired
    private EmpIncidentDao empIncidentDao;
    @RequestMapping(value={"/"})
    public ModelAndView newIncident(ModelAndView model) 
    {
        //IncidentList incidentList=new IncidentList();
        //model.addObject("incidentList",incidentList);
        model.setViewName("/index");
        return model;

    }
    @RequestMapping(value="/newIncident")
    public ModelAndView newIncident1(ModelAndView model) 
    {
        IncidentForm incidentList=new IncidentForm();
        incidentList.setIncidentForm(new AutoPopulatingList(Incident.class) );
        model.addObject("incidentList",incidentList);
        model.setViewName("/Incident");
        return model;

    }

    @RequestMapping(value="/saveIncident", method=RequestMethod.POST)
    public ModelAndView saveIncident(@ModelAttribute() IncidentForm incidentList)
    {   System.out.println("In Controller");
        empIncidentDao.saveOrUpdate(incidentList);
        return new ModelAndView("redirect:/");

    }

}

Anyhelp对此表示赞赏。

Answer 1

你有一些拼写错误，请立即尝试并记住，在服务器端，您会收到表格中每个单元格的键值，因此很可能需要进行适当的处理。

编辑：这是因为你的IncidentForm留下了一些需要注意的东西，正如我已经告诉过你的那样：

在服务器端，您会收到表的每个单元格的键值，所以最有可能需要适当的处理。

如果您遇到异常，则表示您必须更正处理这些键值的方式。

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
<title>Add/Remove dynamic rows</title>
<SCRIPT lang="javascript">
        function addRow(tableID) 
        {
                var table = document.getElementById(tableID);

                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
                var counts = rowCount - 1;

                var cell1 = row.insertCell(0);
                var ldap = document.createElement("input");
                ldap.type = "text";
                ldap.id="incident"+counts+".ldap"
                ldap.name = "incident[" + counts + "].ldap";
                cell1.appendChild(ldap);

                var cell2 = row.insertCell(1);
                var ticket = document.createElement("input");
                ticket.type = "text";
                ticket.id = "incident"+ counts +".ticket";
                ticket.name = "incident[" + counts + "].ticket";
                cell2.appendChild(ticket);

                var cell3 = row.insertCell(2);
                var status = document.createElement("select");
                status.type = "text";
                status.id = "incident"+ counts +".status";
                status.name = "incident[" + counts + "].status";
                var opt=document.createElement("option");
                opt.text="Pending";
                opt.value="Pending";
                status.options.add(opt);
                var opt=document.createElement("option");
                opt.text="Completed";
                opt.value="Completed";
                status.options.add(opt);
                cell3.appendChild(status);

                var cell4 = row.insertCell(3);
                var comment = document.createElement("input");
                comment.type = "text";
                comment.id = "incident"+ counts +".comment";
                comment.name = "incident[" + counts + "].comment";
                cell4.appendChild(comment);

                var cell5=row.insertCell(4);
                var time=document.createElement("input");
                time.type="date";
                time.id="incident"+ counts +".time";
                time.name="incident["+ counts +"].time";
                cell5.appendChild(time);

                var cell6=row.insertCell(5);
                var effort=document.createElement("input");
                effort.type="text";
                effort.id ="incident["+ counts +"].effort";
                effort.name = "incident["+ counts +"].effort";
                cell6.appendChild(effort);


        }
</SCRIPT>
</HEAD>
<BODY>
<div align="center" style="border:1px solid black">
<h2>AGILE</h2>
</div>


<form action="saveIncident" modelAttribute="incidentList" method="post">
<div align="center">
<TABLE id="incidentTable">
        <TR>
                <TD>Ldap</TD>
                <TD>Ticket No</TD>
                <TD>Status</TD>
                <TD>Comment</TD>
                <TD>Date</TD>
                <TD>Effort</TD>

        </TR>
        <TR>
                <TD><input type="text" id="incident0.ldap" name="incident[0].ldap"/></TD>
                <TD><INPUT type="text" id="incident0.ticket" name="iincident[0].ticket" /></TD>
                <TD><select name="incident[0].status" id="ncident0.status">
                <option value="Pending">Pending</option>
                <option value=Completed">Completed</option>
                </select></TD>
                <TD><INPUT type="text" id="incident0.comment" name="incident[0].comment" /></TD>
                <TD><input type="date" id="incident0.time" name="incident[0].time"/></TD>
                <TD><INPUT type="text" id="incident0.effort" name="incident[0].effort" /></TD>


        </TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('incidentTable')" /> 
<input type="submit" value="SUBMIT" />
</div>
</form>
</BODY>
</HTML>

Spring AutoPopulatingList未绑定到modelAttribute

1 个答案: