Bootstrap 模态窗口和 Thymeleaf

Posted 2023-02-26

【中文标题】Bootstrap 模态窗口和 Thymeleaf

【英文标题】：Bootstrap Modal window and Thymeleaf

【发布时间】：2020-12-01 11:32:44

【问题描述】：

我有一个 Spring Mvc 项目，我想使用 。当我在没有 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>

它不会从列表中获取数据。我不知道如何解决这个问题。请帮帮我:)

【参考方案1】：

“编辑”按钮中的data-user-id 属性存在一个小问题。

代替：

data-user-id="$user.id"

...你应该有：

th:data-user-id="$user.id"

...这样属性由 Thymeleaf 处理，$user.id 实际替换为期望值。

【参考方案2】：

<tr th:each="user: $students" th:id="'user-' + $user.id">
                <td th:text="$user.id" />
                <td th:text="$user.firstName" />
                <td th:text="$user.lastName" />
                <td th:text="$user.email" />
                <td>
                    <button type="button" class="btn btn-primary editButton"
                        data-toggle="modal" data-target="#myModal"
                        th:data-user-id="$user.id">Edit</button>
                </td>
            </tr>