如何在Thymeleaf中将对象传递给模态对话框？

Question

我有一个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>

Answer 1

纯胸腺

要在纯胸腺网中这样做，您需要为表中的每一行创建一个具有唯一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，我建议只创建一个模板的模态对话框使用晶闸管，然后克隆和动态填充它。

示例模态：

<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();
});

Answer 2

我找到了一个轻松的解决方案，希望它能帮助那些正在挣扎的人，诀窍是将这个模式放在表或div的同一个循环中，创建和动态"id“的属性语句，就像在这个页面中解释一个更老的版本：

    <tr th:each="user: ${users}">
        <td ><a data-bs-toggle="modal" data-row="${user}"
                th:attr="data-bs-target='#modal-warning'+${user.id }">Inactivate</a> 
    
    <!--  MODAL -->
  <div th:fragment="modal" class="modal fade" th:id="modal-warning+${user.id }" tabindex="-1"

你也可以查看我的原始帖子这里