Question

我使用普通的html表来迭代百里香叶中的对象列表。

我想更改<tr>标记的类，更改为providerResponse.status的值。但是这个值在迭代开始后首先被知道。所以我认为它在同一个<tr>行定义中不可用。

我还使用局部变量来切换<td>类。但是局部变量只能在使用的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>

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

此代码仅检查状态是否设置为＆＃39; AVAILABLE＆＃39;。如果有两个以上可能的结果而你想避免重复的代码，我说你应该编写一个简单的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>

Answer 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

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

3 个答案: