java - Thymeleaf 动态引导模式从带有 html 表的编辑按钮

Question

我有一张 table

<table id="deleteTable" class="display table stripe">
    <thead>
    <tr class="tr-class" style="color: white!important; background-color: #41424a!important">
        <th>Friendly Name</th>
        <th>File Path</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>
        <tr th:each="list: ${canDelete}">
            <td th:text="${list.friendlyName}" style="padding-left: 1em"></td>
            <td th:text="${list.filePath}"></td>
            <td style="padding-left: 2em; width: 10em">
                <a data-toggle="modal" data-target="#modal-warning" th:attr="data-target='#modal-warning'+${list.filePath}"><span class="glyphicon glyphicon-trash"></span></a>
            </td>
        </tr>
        <tr>
            <td style="padding-left: 1em"></td>
            <td></td>
            <td>
                <a style="padding-left: 3.2em; cursor: pointer;" data-target="#exampleModalCenter" data-toggle="modal">
                    <i class="fa fa-plus"></i>
                </a>
            </td>
        </tr>
    </tbody>
</table>

此表使用 thymeleaf th:each 来迭代对象列表。我希望能够单击表格每一行中的垃圾桶图标并删除该行。我正在尝试将对象的属性传递到模式中，就像测试一样。

模态:

<div class="modal fade" th:id="'modal-warning'+${list.filePath}" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Remove Delete Permission</h5>
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form action="#" th:action="@{/users/deletePermissions/approve}" th:object="${canDelete}">
                <div>
                    <div>
                        <span th:text="${list.filePath}"></span>
                    </div>
                    <div style="padding-top: 1em; float: right;">
                        <button id="submitBtn" type="submit" class="mdc-button mdc-button--raised">
                            <span class="mdc-button__label">add delete permission</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

我相信问题在表中:

<a data-toggle="modal" data-target="#modal-warning" th:attr="data-target='#modal-warning'+${list.filePath}"><span class="glyphicon glyphicon-trash"></span></a>

或模态:

th:id="'modal-warning'+${list.filePath}"

更新1:

忘记包含我收到的错误..

它告诉我，在我的 HTML 页面中，它无法在第 84 行解析 ${list.filePath} 的 null。这是模式 id 的代码行.. 就像它正在尝试立即解析它，而不是在模态载荷

Answer 1

变量${list}在您的 th:each 中定义-- 并且仅适用于您的 <tr /> 的子标签。当模态 html 被解析时，变量 ${list}不再在范围内。它现在为空，这就是您收到错误消息的原因。

您将必须更改打开模式的方式(可能使用 javascript...除非您想为表格的每一行创建一个模式)。