时间戳

首页 > 解决方案 > Thymeleaf 多重条件，改变背景颜色

html - Thymeleaf 多重条件，改变背景颜色

问题描述

accountDTO.state 和 accountDTO.accountDTO 列中的表格单元格应根据 accountDTO.state 的文本值更改背景颜色。我试过这个：

Thymeleaf - 如何根据互斥条件应用两种（或更多）样式

而且我已经搜索了更多解决方案，但是每个人都使用条件来表示两个可能的值，或者在上面的 URL 中有多个条件。我只有一个条件，但我在该字段上有 9 个可能的值。用户在不同的网页中为该字段选择一个值。在此页面上，显示了来自数据库的列表。

现在我尝试在 td 标记内使用 th:switch 语句，但是我需要在 td 内添加 span 或 div，但在这种情况下它不起作用，单元格没有着色。我已经搜索过 if/else/if 结构或 elif 之类的东西，但似乎没有。而且我不能在单个标签中重复 th:if。我希望我可以使用 th:switch 但是，为什么它不起作用？

下面只是一个较短的版本切换，只是这个例子的一些案例，但我总共需要九个案例。

            <tbody>
                <tr th:each = "accountDTO : ${listOfAccounts}">
                    <td th:text = "${accountDTO.accountDTO}"></td>
                    <td th:text = "${accountDTO.startBalance}"></td>
                    <td th:text = "${accountDTO.currentBalance}"></td>
                    <td th:text = "${accountDTO.state}" th:switch = "${accountDTO.state}"
                    ><span th:case = "${accountDTO.state} == 'OUT_OF_USE'" th:appendstyle = "'background: red'"></span>
                    <span th:case = "${accountDTO.state} == 'DEVICE'" th:appendstyle = "'background: green'"></span>
                    <span th:case = "${accountDTO.state} == 'LOCKED'" th:appendstyle = "'background: blue'"></span>
                    </td>
                    <td th:text = "${accountDTO.employee.employeeName}"></td>
                    <td><a th:href = "@{/editAccount/{id}(id=${accountDTO.idAccount})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${accountDTO.idAccount}">Edit</a></td>
                </tr>
            </tbody>

标签： htmlcssthymeleaf

解决方案

考虑使用变量作为类来简化 Thymeleaf 和 HTML。然后你可以设置与你的 CSS 一致的格式。您的 HTML 看起来像这样：

<tbody>
    <tr th:each = "accountDTO : ${listOfAccounts}">
        <td th:text = "${accountDTO.accountDTO}"></td>
        <td th:text = "${accountDTO.startBalance}"></td>
        <td th:text = "${accountDTO.currentBalance}"></td>
        <td th:text = "${accountDTO.state}" th:classappend = "${accountDTO.state}"></td>
        <td th:text = "${accountDTO.employee.employeeName}"></td>
        <td><a th:href = "@{/editAccount/{id}(id=${accountDTO.idAccount})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${accountDTO.idAccount}">Edit</a></td>
    <tr>
</tbody>

然后在你的 CSS 中查看类似这样的内容：

td.OUT_OF_USE {
    background: red;
}
td.DEVICE {
    background: green;
}
td.LOCKED {
    background: blue;
}

可能有助于使类似的输出在单独的页面上保持一致。

推荐阅读