Tymianek ma wiele warunków, zmień kolor tła

Jan 16 2021

Komórki tabeli w kolumnach accountDTO.state i accountDTO.accountDTO powinny zmieniać kolor tła w zależności od wartości tekstowej accountDTO.state. Próbowałem tego:

Thymeleaf - Jak zastosować dwa (lub więcej) style oparte na wzajemnie wykluczających się warunkach

i szukałem więcej rozwiązań, ale każdy używa warunków warunkowych dla dwóch możliwych wartości lub w adresie URL powyżej jest wiele warunków. Mam tylko jeden warunek, ale mam 9 możliwych wartości w tym polu. Użytkownik wybiera wartość dla tego pola na innej stronie internetowej. Na tej stronie pokazana jest lista z bazy danych.

Teraz próbowałem z instrukcją th: switch w tagu td, ale potem muszę dodać span lub div wewnątrz td, ale w tym przypadku to nie działa, komórki nie są kolorowe. Szukałem czegoś takiego jak if / else / if structure lub elif, ale wygląda na to, że nie ma. I nie mogę powtórzyć: jeśli w jednym tagu. Mam nadzieję, że mogę użyć th: switch, ale dlaczego to nie działa?

Poniżej znajduje się tylko krótsza wersja przełącznika, tylko niektóre przypadki w tym przykładzie, ale w sumie potrzebuję dziewięciu przypadków.

            <tbody>
                <tr th:each = "accountDTO : ${listOfAccounts}"> <td th:text = "${accountDTO.accountDTO}"></td>
                    <td th:text = "${accountDTO.startBalance}"></td> <td th:text = "${accountDTO.currentBalance}"></td>
                    <td th:text = "${accountDTO.state}" th:switch = "${accountDTO.state}"
                    ><span th:case = "${accountDTO.state} == 'OUT_OF_USE'" th:appendstyle = "'background: red'"></span> <span th:case = "${accountDTO.state} == 'DEVICE'" th:appendstyle = "'background: green'"></span>
                    <span th:case = "${accountDTO.state} == 'LOCKED'" th:appendstyle = "'background: blue'"></span> </td> <td th:text = "${accountDTO.employee.employeeName}"></td>
                    <td><a th:href = "@{/editAccount/{id}(id=${accountDTO.idAccount})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${accountDTO.idAccount}">Edit</a></td>
                </tr>
            </tbody>

Odpowiedzi

1 Richard Jan 16 2021 at 10:00

Rozważ użycie zmiennej jako klasy, aby uprościć Thymeleaf i HTML. Następnie możesz ustawić format zgodnie ze swoim CSS. Twój kod HTML wyglądałby mniej więcej tak:

<tbody>
    <tr th:each = "accountDTO : ${listOfAccounts}"> <td th:text = "${accountDTO.accountDTO}"></td>
        <td th:text = "${accountDTO.startBalance}"></td> <td th:text = "${accountDTO.currentBalance}"></td>
        <td th:text = "${accountDTO.state}" th:classappend = "${accountDTO.state}"></td>
        <td th:text = "${accountDTO.employee.employeeName}"></td> <td><a th:href = "@{/editAccount/{id}(id=${accountDTO.idAccount})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${accountDTO.idAccount}">Edit</a></td>
    <tr>
</tbody>

Następnie spójrz na coś takiego w swoim CSS:

td.OUT_OF_USE {
    background: red;
}
td.DEVICE {
    background: green;
}
td.LOCKED {
    background: blue;
}

Prawdopodobnie przydatne do tworzenia spójnych wyników na oddzielnych stronach.