java - Thymeleaf:如何制作不同颜色的 table

Question

有人能说说如何使用 Thymeleaf 制作不同颜色的 table 吗？我有一个具有整数风险权重值的事件列表。我需要根据条件为 html 列(选择类)着色。如果风险小于 20 是绿色，如果风险从 20 到 50 如果是黄色，如果风险大于 50 是红色。如何为一个做几个条件？我的变体不起作用。

<td th:text="${data.riskIndex}" th:if="${data.riskIndex &lt; 20 and data.riskIndex &gt;= 0}" class="green"></td>

Answer 1

在那种情况下，我会使用 th:class 而不是 th:if (或者 th:classappend 如果每列共享一些额外的类)。在 th:class 中，我会提供一个双重 Elvis 运算符(不幸的是)来检查条件。

<td th:text="${data.riskIndex}" th:class="${data.riskIndex lt 20} ? 'green' : (${data.riskIndex le 50} ? 'yellow' : 'red')"></td>

或者，当有更多条件并且您不想涉及 javascript 时，您可以提供一些实用方法，将 riskIndex 转换为适合您的颜色。

例如假设您创建了一个名为 DataRepresentationUtils 的实用程序类，其中包含一个为给定索引计算适当颜色的方法:

package web.utils;

public class DataRepresentationUtils {

    private DataRepresentationUtils() { }

    public static String convertRiskIndexToRGBLiteral(int riskIndex) {

        // some logic here. Example of output: "#00ff00"

    }
} 

然后您可以按照以下方式在模板中使用该方法:

<td th:text="${data.riskIndex}" th:styleappend="'background-color: ' + ${T(web.utils.DataRepresentationUtils).convertRiskIndexToRGBLiteral(data.riskIndex)} + ';'"></td>