Question

我正在使用最新的弹簧并尝试用弹簧绑定一个非常动态的形状。我会用我的代码解释，因为我觉得很容易理解：

测试场景
涉及的课程：三 - 公司（字段：名称，员工数组列表）
- 员工（字段：名称，地址列表）
- 地址（字段：街道，城市）

立即， 默认值在POJO中初始化：

public Address() {
    this.street = "defaultStreet";
    this.city = "defaultCity";
}

员工类：

public Employee() {
    super();
    this.name = "defaultName";
    addressList = new ArrayList();
    addressList.add(new Address());
}

公司类：

public Company() {
    super();
    this.name = "defaultCompany";
    employeeList = new ArrayList();
    employeeList.add(new Employee());
}

现在，控制器如下所示：

@Controller
@RequestMapping(value = "/form")
public class SiteController {

@ModelAttribute("company")
public Employee populateCompany() {
    return new Company();
}

@RequestMapping(method = RequestMethod.GET)
public String showForm() {
    return "form";
}

@RequestMapping(method = RequestMethod.POST)
    public String produce(@ModelAttribute("company") Company companyInput) {
    return "output";
}
}

现在， jsp看起来像这样：

<form:form method="post" commandName="employee">
    <form:input path="companyName" />
    <img src="icon/add.png" class="add-employees"/>
    <div class="employee"></div>
</form:form>  

This is a div to load the default values, and will be deleted upon form submit.  

<div id="defaultValues">
<form:hidden path="addressList[0].street" id="defaultStreet" />
<form:hidden path="addressList[0].city" id="defaultCity" />
</div>

立即， 我不打算在这里粘贴jQuery，但要解释它的作用。单击添加图标时...它会捕获员工详细信息（名称以及用户想要添加的地址）...用户可以按照自己的意愿添加尽可能多的员工。

立即， 添加员工后，会在屏幕上打印＆＃34;员工已成功添加＆＃34;以及＆＃34;编辑＆＃34;并且＆＃34;删除＆＃34;图标。所有这些，介于和之间，在上面显示为空。每次添加新员工时都会创建这样的div，并且他的所有信息都会在那里进行。

立即， jQuery的工作方式，它将它发送回春天

company.employeeList[0]
company.employeeList[1]
company.employeeList[2]

但是，如果删除了company.employeeList [1]

company.employeeList[0]
company.employeeList[2]

已发送。这是我的问题。如何在后端正确绑定此数据。

我已经在stackoverflow上看过类似的问题，但由于我是初学者，我无法掌握它们。我请你提供详细的解决方案。另外，

大多数解决方案都适用于旧版本的Spring，例如他们建议使用AutoPopulating，我在这种情况下必须学会避免超出范围的异常。但是在这里，即使使用ArrayLists，我也没有这样的例外。
我没有使用任何基于xml的配置。我使用像@ModelAttribute这样的注释而没有模型模型。在这种情况下如何解决问题？
我想远离ajax。因为，我觉得有，这是一种更简单的方法，只要我们能正确绑定传入的东西。
我发现删除的员工确实是我设置的默认值。
我还观察到，如果我存储在employeeList [0]，employeeList [0]，employeeList [0]中的所有employeeList代替employeeList [0]，employeeList [1]，employeeList [2] ......在前端仍然可以删除或编辑。但是，在后端我收到了employeeList [0]的3个逗号分隔值。我想在后端解析这个以准备一个ArrayList。这是一个好方法吗？但是，我更倾向于使用弹簧提供的功能，以便我学到更多。

我会感谢您提出的任何解决方案，解决方法。请帮忙！

更新1 这是添加两行后html的样子：

<form id="employee" action="..." method="post">
    <input name="companyName" value="..."/>
    <img src="icon/add.png" class="add-employees"/>

    <div class="employee">
        <p>Employee ... has been added successfully</p>
        <div><input name="company.employeeList[0].name" value="..."></input>...Similar structure for addressList...</div>
        <img src="icon/update.png"/>
        <img src="icon/remove.png"/>
    </div>

    <div class="employee">
        <p>Employee ... has been added successfully</p>
        <div><input name="company.employeeList[1].name" value="..."></input>...Similar structure for addressList...</div>
        <img src="icon/update.png"/>
        <img src="icon/remove.png"/>
    </div>

    <input type="submit">
</form:form>

动态表单和弹簧列表

0 个答案: