使用Thymeleaf和Spring Boot在表中实现从表返回数据的按钮

Question

TL；DR使用Spring Boot和Thymeleaf时，当用户单击特定行第5列的按钮时，如何返回表单中第1列的值？

嗨！长时间的倾听者，第一次打电话的人。在这个问题上，我非常感谢你的帮助。

我正在用Spring Boot和Thymeleaf编写一个服务器应用程序。服务器与许多设备交互。我正在创建一个网页，它将在一个表（表单）中显示设备及其IP地址的列表。该表的每一行都有关于设备的信息和从列表中删除设备的“remove”按钮。当单击按钮时，表单应该将设备的IP地址返回给底层控制器，这样控制器就可以从设备的（内部）列表中删除设备。

  <form action="#" th:action="@{/webservice/adddevice}" th:object="${addForm}" method="post">
<table>
    <tr><th>Device IP</th>
        <th>Status</th>
        <th>Model Name</th>
        <th>Serial No.</th>
        <th>Remove?</th>
    </tr>
    <tr th:each="d : ${devices}">
        <td th:text="${d.address}">N/A</td>
        <td th:text="${d.status}">N/A</td>
        <td th:text="${d.modelName}">N/A</td>
        <td th:text="${d.serialno}">N/A</td>
        <td><input type="hidden" th:value="${d.address}" name="deviceIP"/><button type="submit" class="removebutton" name="action" value="remove">Remove</button></td>
        <td th:if="${#fields.hasErrors('deviceIP')}" th:errors="*{deviceIP}">IP Error</td>
    </tr> 
</table>

我最近的（也是最接近标记的）尝试使用每行的隐藏输入来返回值...但它返回所有行的值。

“Devices”（类DeviceStatus）对象是标准数据对象的列表，其中包含一系列字符串成员和get/set方法。它保存附加设备的信息。

“AddForm”（类AddForm）对象是一个带有字符串（“deviceIP”）和该字符串的get/set方法的单个对象。

    @RequestMapping(value="/webservice/adddevice", method=RequestMethod.GET)
public String showForm(Model model, AddForm addForm) {
    model.addAttribute("devices", getDevicesStatus());
    addForm.loadPrefs(deviceController);
return "adddevice"; // the webpage is adddevice.html
}

    @RequestMapping(value="/webservice/adddevice", method=RequestMethod.POST, params="action=remove")
public String removeDevice(@Valid AddForm addForm, BindingResult bindingResult) {
//addForm.removeDevice(deviceController);
return "redirect:/webservice/results";
}

Answer 1

我将向您展示我们是如何在应用程序中解决这个问题的。我们为表行中的每个操作生成一个表单，如下所示：

<table>
<thead>
    ...
</thead>
<tbody>
    <tr th:each="entry : ${allEntries}">
        ...

        <td>
            <form action="#" th:action="@{/dashboard/myEntries/} + ${{entry.id}}" method="get">
                <button th:id="'table_entry_childs_button_' + ${entry.id}" type="submit">
                    <i>details</i>
                </button>
            </form>
        </td>
        ...
</tbody>

那个解决方案对我们很管用。我很受鼓舞，我能帮助你。