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

Posted 2023-03-05

【中文标题】Thymeleaf 在表中为 <tr> 使用局部变量

【英文标题】：Thymeleaf use local variable for <tr> in table

【发布时间】：2016-06-05 07:28:08

【问题描述】：

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

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

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

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

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

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

【参考方案1】：

只要您只需要考虑两个类（状态），一个简单的 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>

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

编辑：这是一个满足您需求的简单 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>

【讨论】：

感谢您的回答。对于两个可能性，它是一个很好的解决方案，但就像你说的，我需要两个以上的解决方案。而且我认为很难在<tr> 标签中使用变量而不是<td> 标签，对吧？

贴了一个可以处理两种以上状态的jQuery例子

【参考方案2】：

如果你想在基础类中添加一些类参数你可以使用

<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

【参考方案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>