我有一个 thymeleaf
在表中显示数据库内容(人员)的页。
<tr id="tableBody">
<td th:text="${row.id}"/>
<td th:text="${row.firstname}"/>
<td th:text="${row.lastname}"/>
<td>
<button data-toggle="modal" data-target="#editModal" th:data-row="${row}">DEL</button>
</td>
</tr>
最后一列应该是删除行的按钮。但在此之前,显示一个模式对话框,其中的数据将被删除。
问题:如何将整行person对象传递给模态对话框?
我从下面开始,但是我不知道如何将person对象作为对象从单击的行传递到模式对话框中(这样我就可以再次显示模式对话框中的person字段)。
以下是一种伪代码:
<div class id="editModal" ...>
<div class="modal-body">
<div class="modal-body">
You are about to delete: <div th:text="${row.firstname}"/> <div th:text="${row.lastname}"/>
<form action="#" th:action="@{/delete/{id}" th:object="${row}" method="delete">
<input type="text" hidden="true" th:field="${row.id}">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" th:href="@{/delete/{id}(id=${row.id})}" th:method="delete">Remove</button>
</div>
</div>
</div>
1条答案
按热度按时间2lpgd9681#
纯百里香
要在纯thymeleaf中执行此操作,需要为表中具有唯一id的每一行创建一个对话框,并打开与要删除的行关联的对话框。
情态动词示例:
打开对话框的按钮变成:
使用javascript
如果您可以使用javascript,我建议您只使用thymeleaf创建模式对话框的模板,然后克隆它并动态填充它。
模态示例:
删除按钮:
javascript(以jquery实现为例):