纯百里香叶
要在纯 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();
});