Java 如何在Thymeleaf中将对象传递到模态对话框?
我有一个Java 如何在Thymeleaf中将对象传递到模态对话框?,java,thymeleaf,Java,Thymeleaf,我有一个thymeleaf页面,在表中显示数据库内容(人员) <tr id="tableBody"> <td th:text="${row.id}"/> <td th:text="${row.firstname}"/> <td th:text="${row.lastname}"/> <td> <butto
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>
您将要删除:
取消
去除
纯百里香
要在纯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>
你需要一个纯html+tymeleaf解决方案还是javascript可以接受?我更喜欢一个纯tymeleaf,没有js的解决方案。你能给出一个使用js的替代示例吗?也许这会涉及jquery?但如果以上是唯一的解决方案,我宁愿选择js解决方案。我希望每页显示100行,所以我不能生成100个隐藏的模态对话框。@membersound我添加了一个jQueryOkay示例。但我无法简单地将完整对象传递给模态对话框,而access使用的是点表示法?像
,然后在模式对话框中使用th:text=“{row.firstname}”
访问它?因为我认为这真的是样板文件,我必须为delete按钮重复所有显式的person属性,比如data id=,data firstname=,data lastname=…
。我希望我可以传递完整的th:data row=“{row}
对象,然后在jquery
函数中提取字段?您不能将完整对象存储为html属性,但可以将其存储为javascript变量var allRows=[${rows}]这样,您只需要在html中存储行的id,在jQuery中,您可以从allRows
变量中获取其余数据
<button data-toggle="modal" th:attr="data-target=${'#editModal'+row.id}" data-row="${row}">DEL</button>
<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>
$('.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();
});