Question

有人会说如何使用Thymeleaf制作不同颜色的桌子吗？我有一个具有风险权重整数值的事件列表。我需要按条件着色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转换为适合您的颜色。

E.g。假设您创建了一个名为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>

Thymeleaf：如何制作不同颜色的桌子

1 个答案: