作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 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>
最后一列应该是一个删除行的按钮。但在此之前,显示一个包含正在删除的数据的模式对话框。
问题:如何将整行人物对象传递给模态对话框?
我是这样开始的,但是我错过了如何将被点击的行中的人物对象作为对象传递到模态对话框中(这样我就可以在模式对话框)。
以下是一种伪代码:
<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>
最佳答案
纯 thymeleaf
要在纯 thymeleaf 中执行此操作,您需要为表中的每一行创建一个具有唯一 ID 的对话框,并打开与要删除的行关联的对话框。
模态框示例:
<div th:each="row : ${rows}" th:attr="id=${'editModal' + row.id}">
<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>
打开对话框的按钮变为:
<button data-toggle="modal" th:attr="data-target=${'#editModal'+row.id}" data-row="${row}">DEL</button>
使用 javascript
如果您可以使用 javascript,我建议您使用 thymeleaf 仅创建模态对话框的模板,然后克隆它并动态填充它。
模态示例:
<div class id="editModalTemplate">
<div class="modal-body">
<div class="modal-body">
You are about to delete: <div data-value="firstname"/> <div data-value="lastname"/>
<form action="#" th:action="@{/delete/_id_}" method="delete">
<input type="text" hidden="true" name="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='_id_')}" th:method="delete">Remove</button>
</div>
</div>
</div>
删除按钮:
<button class="btn-delete" data-id=${row.id} data-firstname="${row.firstname}" data-lastname="${row.lastname}">DEL</button>
Javascript(以 jQuery 实现为例):
$('.btn-delete').click(function(){
//clone dialog and remove ids to ensure uniqueness
var $modal = $('#editModalTemplate').clone().removeAttr('id');
//apply custom values where needed
var $btn = $(this);
var rowId = $btn.attr('data-id');
var firstname = $btn.attr('data-firstname');
var lastname = $btn.attr('data-lastname');
$modal.find('[data-value="firstname"]').text(firstname );
$modal.find('[data-value="lastname"]').text(lastname );
$modal.find('[name="id"]').val($btn.attr('data-id'));
$modal.find('form').attr('action').replace('_id_', rowId);
$modal.find('button[type="submit"]').attr('href', $modal.find('button[type="submit"]').attr('href').replace('_id_', rowId);
//show dialog
$modal.modal();
});
关于java - 如何将对象传递给 Thymeleaf 中的模态对话框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64878101/
我来自 Asp.Net 世界,试图理解 Angular State 的含义。 什么是 Angular 状态?它类似于Asp.Net中的ascx组件吗?是子页面吗?它类似于工作流程状态吗? 我听到很多人
我一直在寻找 3 态拨动开关,但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始,一旦用户向左或向右滑动,就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀!