Question

我有一个对象：

InvoiceData
    String name
    Date date
    List<InvoiceTask>

InvoiceTask具有3个字段：

InvoiceTask
    String name
    String project
    BigDecimal hours

我创建了一个百里香公式器，该公式创建一个InvoiceData对象并将其持久保存到我的MongoDB实例中，但是它仅包含Name和Date。我不知道如何修改此表单以不仅添加任务，而且添加多个任务（可能在表单内部添加按钮“添加任务”）。

重定向到add.html的控制器如下所示：

@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的控制器如下所示：

@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";
}

您必须以胸腺叶形式显示构造的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的模型属性。

对象填充后，只需保存即可。

SPRING / THYMELEAF：如何在表单中填写列表并将另一行追加到表单？

1 个答案: