首页 文章

在表中实现一个按钮，该按钮使用Thymeleaf和Spring Boot从表中返回数据

提问于
浏览 次
3

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

嗨，您好！长时间听众，第一次来电 . 对于这个问题，我非常感谢你的帮助 .

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

我可以让它根本不返回任何内容，或者所有的IP地址（作为一个用逗号分隔值的字符串），但我不能让它只返回点击按钮行上的地址 .

我已经完成的搜索已经找到了为静态表做的方法，但不是动态生成的，或者是常规的“输入”类型输入，而不是按钮 . 没有特定于单击此按钮，从同一行的另一列返回此值 .

我试图用相对纯粹的Java和HTML来做这件事，但如果它解决了这个问题，我不反对JavaScript的一些片段 . 我对JQuery一无所知...而且由于其他项目原因，JSP页面也不是一个选项 .

HTML：

<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）对象是标准数据对象的List，带有一堆字符串成员和get / set方法 . 它包含附加设备的信息 .

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

控制器GET方法：

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

和控制器POST方法：

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

现在POST方法没有做任何事情......直到我得到HTML表单工作，没有太多意义 .

java html spring forms thymeleaf

2 回答

  • 2

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

    <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>

    该解决方案对我们来说很好 . 我很鼓励我能够帮助你 .

    回复于
  • 6

    感谢pDer666的评论，我有一个解决方案！

    将HTML更改为：

    <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}">
        <form action="#" th:action="@{/webservice/adddevice}" th:object="${addForm}" method="post">
        <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>
        </form>
    </tr> 
</table>

    将表单放在表行循环结构中为每行创建一个单独的表单，现在单击该按钮时，我的POST方法只接收相应行的IP地址 .

    谢谢pDer666！

    回复于

相关问题