java - Spring /thymeleaf : How to fill a list in form and append another line to the form?

Question

我有一个对象:

InvoiceData
    String name
    Date date
    List<InvoiceTask>

InvoiceTask 有 3 个字段:

InvoiceTask
    String name
    String project
    BigDecimal hours

我创建了一个 thymeleaf 公式，它创建了一个 InvoiceData 对象并将其保存到我的 MongoDB 实例中，但它只包含 Name 和 Date。我不知道如何修改此表单以不仅添加一个任务，还添加多个任务(可能在表单内使用按钮“添加任务”)。

重定向到 add.html 的 Controller 如下所示:

@RequestMapping(value = "/add/{id}")
public String addPage(@PathVariable("id") String id, Model model) {
    InvoiceData invoiceData = new InvoiceData();
    model.addAttribute("contractorid", id);
    model.addAttribute("invoicedata", invoiceData);
    return "add";
}

保存 InvoiceData 的 Controller 如下所示:

@RequestMapping(value = "/addinvoice/{id}", method = RequestMethod.POST, produces = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public String addInvoice(@PathVariable("id") String id, InvoiceData data, Model model) {
    Contractor contractor = contractorRepository.findById(id).get();
    data.setData(contractor.getContractorData());
    if (contractor.getInvoices() == null) {
        contractor.setInvoices(new ArrayList<InvoiceData>());
    }
    contractor.getInvoices().add(data);
    invoiceDataRepository.save(data);
    contractorRepository.save(contractor);
    model.addAttribute("contractor", contractor);
    return "index";

InvoiceData 的 Thymeleaf 模板如下所示(它还没有 InvoiceTask 列表!):

<form action="#" th:action="@{addinvoice/{id}(id=${contractorid})}" th:object="${invoicedata}" method="post">
            <ul class="form-style-1">
                <li>
                    <label>Name<span class="required">*</span></label>
                    <input type="text" th:field="*{name}" id="receptionDate">
                </li>
                <li>
                    <label>Date<span class="required">*</span></label>
                    <input type="date" th:field="*{orderDate}" id="orderDate">
                </li>
                <li>
                    <input type="submit" value="Submit" />
                </li>
            </ul>
        </form>

老实说，我不知道从哪里开始...

Answer 1

一种方法是创建一个包装器类(一个 DTO？)来传递要创建的发票及其各自的任务。对于

@RequestMapping(value = "/add/{id}")
public String addPage(@PathVariable("id") String id, Model model) {
    InvoiceDataDTO invoiceData = new InvoiceDataDTO();

    for(int i = 1; i <= 5; i++) {
          invoiceData.addTask(new invoiceTask()) 
    }

    model.addAttribute("invoiceData", invoiceData);
    return "add";
}

在您的 thymleaf 表单中，您必须显示构造的 DTO，如下所示:

    <form action="#" th:action="@{/invoices/save}" th:object="${invoicesData}"
  method="post">
    <fieldset>
        <input type="submit" id="submitButton" th:value="Save">
        <input type="reset" id="resetButton" name="reset" th:value="Reset"/>
        <table>
            <thead>
                <tr>
                    <th> Name</th>
                    <th> Date</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="invoiceTask, itemStat : *{invoicesTaks}">
                    <td><input th:field="*{invoicesTasks[__${itemStat.index}__].name}" /></td>
                    <td><input th:field="*{invoicesTasks[__${itemStat.index}__].project}" /></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</form>

如您所见，您获得了已添加空任务的 invoiceDataDTO 的模型属性。

对象填充后你只需要保存。