view - Bootstrap 模态窗口和 Thymeleaf
问题描述
我有一个 Spring Mvc 项目,我想使用 Bootstrap 模态窗口和 Thymeleaf。当我在没有 Thymeleaf 的情况下进行循环时,我有一个视图 students.jsp 女巫从模型中获取学生列表,一切正常。我用JS。但是当我使用 Thymeleaf 模型时,窗口无法正常工作。
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="user-${user.id}" th:each="user: ${students}">
<td th:text="${user.id}" />
<td th:text="${user.firstName}" />
<td th:text="${user.lastName}" />
<td>
<button type="button" class="btn btn-primary editButton"
data-toggle="modal" data-target="#myModal" data-user-id="${user.id}">Edit</button>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$("#myModal").on('show.bs.modal', function(e) {
var userId = $(e.relatedTarget).data('user-id');
var cols = $('#user-' + userId + ' td');
var firstName = $(cols[0]).text();
var lastName = $(cols[1]).text();
var email = $(cols[2]).text();
$('#firstNameInput').val(firstName);
$('#lastNameInput').val(lastName);
$('#emailInput').val(email);
});
$("#myModal").on('hidden.bs.modal', function() {
var form = $(this).find('form');
form[0].reset();
});
</script>
它不会从列表中获取数据。我不知道如何解决这个问题。请帮我 :)
解决方案
data-user-id
“编辑”按钮中的属性存在一个小问题。
代替:
data-user-id="${user.id}"
...你应该有:
th:data-user-id="${user.id}"
...以便该属性由 Thymeleaf 处理并${user.id}
实际替换为预期值。
推荐阅读
- html - 省略号加宽度动画产生颤抖
- wordpress - 将自定义帖子添加到自定义帖子类型页面
- c# - LoadLibrary 失败:[sdk_wrapper_dotnet.dll] 调用 MIP SDK 以标记来自 Azure Function 的文档
- mongodb - Hibernate-OGM JpaRepository:getSessionFactory() 具有不兼容的返回类型
- svg - 在此页面上找到的 IE 11 不适用于嵌入式 SVG
- java - CompletableFuture为什么要实现Future接口
- azure - 在 Azure 资源组项目中添加新资源
- azure-devops - 如何在 Azure DevOps Repository 工具栏中启用/禁用上传文件按钮
- workbox - 为什么在使用过期插件的时候一定要设置cacheName?
- javascript - 使用 NodeJS 的 Mautic