Thymeleaf 在 table 中为 <tr> 使用局部变量

Question

我使用普通的 html table 来遍历 thymeleaf 中的对象列表。

我想根据 providerResponse.status 的值更改 <tr> 标签的 class。但是这个值是在迭代开始后才知道的。所以我认为它不能用于相同的 <tr> 行定义。

我还使用了一个局部变量来切换 <td> class。但是局部变量只能在使用的 html 属性的上下文中使用。所以我需要多次编写代码。

是否可以在table的完整上下文中使用局部变量？

有没有办法减少相同代码的重复？

<tr th:each="providerResponse : ${providerResponses}">

  <th:block th:switch="${providerResponse.status}"
    th:with="temp='active'">
    <th:block th:case="'AVAILABLE'">
      <th:block th:with="temp='success'">
        <td th:class="${temp}" th:text="${providerResponse.executeDate}"></td>
        <td th:class="${temp}" th:text="${providerResponse.provider}"></td>
        <td th:class="${temp}" th:text="${providerResponse.status}"></td>
      </th:block>
    </th:block>
    <th:block th:case="'UNKNOWN'">
      <th:block th:with="temp='danger'">
        <td th:class="${temp}" th:text="${providerResponse.executeDate}"></td>
        <td th:class="${temp}" th:text="${providerResponse.provider}"></td>
        <td th:class="${temp}" th:text="${providerResponse.status}"></td>
      </th:block>
    </th:block>
  </th:block>
</tr>

Answer 1

只要你需要考虑的只有两个classes（状态），一个简单的if检查就足够了。这是一个例子：

<tr th:each="providerResponse : ${providerResponses}">
    <th:block
        th:with="temp = ${providerResponse.status == 'AVAILABLE'} ? success : danger">
        <td th:class="${temp}" th:text="${providerResponse.executeDate}"></td>
        <td th:class="${temp}" th:text="${providerResponse.provider}"></td>
        <td th:class="${temp}" th:text="${providerResponse.status}"></td>
    </th:block>
</tr>

此代码仅检查状态是否设置为 'AVAILABLE'。如果有两种以上的可能结果并且您想避免重复代码，我建议您应该编写一个简单的 jquery 函数，将正确的 class 附加到您的代码中。

编辑：这是满足您需求的简单 jQuery 示例：

<script>
    function setClassByStatus(status, id) {
        console.log(status);
        if(status == "AVAILABLE"){
            $('td[name=' +id +']').addClass("success");
        }else if(status == "UNKNOWN"){
            $('td[name=' +id +']').addClass("danger");
        }else if(status == "TEST"){
            $('td[name=' +id +']').addClass("test");
        }
    }
</script>

<tr th:each="providerResponse : ${providerResponses}">
    <script th:inline="javascript">
            /*<![CDATA[*/
            $(function() {
                setClassByStatus([[${providerResponse.status}]], [[${providerResponse.yourId}]]);
            });
            /*]]>*/
        </script>
    <td th:name="${providerResponse.yourId}" th:text="${providerResponse.executeDate}"></td>
    <td th:name="${providerResponse.yourId}" th:text="${providerResponse.provider}"></td>
    <td th:name="${providerResponse.yourId}"
        th:text="${providerResponse.status}"></td>
</tr>

Answer 2

如果你想添加一些 class 参数到基本 class 你可以使用

<tr th:each="providerResponse : ${providerResponses}">
    <th:block
        th:with="temp = ${providerResponse.status == 'AVAILABLE'} ? success : danger">
        <td class="baseClass" th:classappend="${temp}" th:text="${providerResponse.executeDate}"></td>
        <td class="baseClass" th:classappend="${temp}"  th:text="${providerResponse.provider}"></td>
        <td class="baseClass" th:classappend="${temp}"  th:text="${providerResponse.status}"></td>
    </th:block>
</tr>

见answer

Answer 3

这不是很好，但是可以嵌套三元运算符来创建您自己的 if-else-if 块。我更喜欢这个而不是使用 JQuery:

<tr th:each="providerResponse : ${providerResponses}">
    <th:block th:with="temp= ${providerResponse.status == 'AVAILABLE'} ? success 
                    : (${providerResponse.status == 'FOO'} ? otherClass1 
                    : (${providerResponse.status == 'BAR'} ? otherClass2 
                    : (${providerResponse.status == 'UNKNOWN'} ? danger
                    : defaultClass)))">
        <td class="baseClass" th:classappend="${temp}" th:text="${providerResponse.executeDate}"></td>
        <td class="baseClass" th:classappend="${temp}"  th:text="${providerResponse.provider}"></td>
        <td class="baseClass" th:classappend="${temp}"  th:text="${providerResponse.status}"></td>
    </th:block>
</tr>

Thymeleaf 在 table 中为 <tr> 使用局部变量

Thymeleaf use local variable for <tr> in table

html

spring

spring-mvc

thymeleaf

spring-boot