Question

我有一张桌子

<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>

此表使用百里香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 ...，除非您想为表的每一行创建一个模式）。

Answer 2

Yout变量为空，您可以在表格的第3个td中添加模态。避免使用javascript

带有HTML表格的“编辑”按钮中的Thymeleaf动态引导程序模式

2 个答案: