Thymeleaf plusieurs conditions, changer la couleur de fond

Question

Les cellules de tableau dans les colonnes accountDTO.state et accountDTO.accountDTO doivent changer la couleur d'arrière-plan, en fonction de la valeur de texte de accountDTO.state. J'ai essayé ceci:

Thymeleaf - Comment appliquer deux styles (ou plus) basés sur des conditions mutuellement exclusives

et j'ai cherché d'autres solutions, mais tout le monde utilise des conditions pour deux valeurs possibles, ou dans l'URL ci-dessus, il y a plusieurs conditions. Je n'ai qu'une seule condition, mais j'ai 9 valeurs possibles sur ce champ. L'utilisateur sélectionne une valeur pour ce champ dans une autre page Web. Sur cette page, une liste de la base de données s'affiche.

Maintenant, j'ai essayé avec l'instruction th: switch dans la balise td, mais je dois ensuite ajouter span ou div dans td, mais dans ce cas, cela ne fonctionne pas, les cellules ne sont pas colorées. J'ai cherché quelque chose comme if / else / if structure ou elif, mais il n'y en a pas, semble-t-il. Et je ne peux pas répéter th: si dans une seule balise. J'espère pouvoir utiliser th: switch mais, pourquoi ça ne marche pas?

Ci-dessous se trouve juste un changement de version plus courte, juste quelques-uns des cas pour cet exemple, mais j'aurai besoin de neuf cas au total.

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

Answer 1

Pensez à utiliser la variable comme classe pour simplifier la feuille de thymel et le HTML. Ensuite, vous pouvez définir le format de manière cohérente avec votre CSS. Votre code HTML ressemblerait à ceci:

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

Ensuite, regardez quelque chose comme ça dans votre CSS:

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

Peut-être utile pour rendre une sortie similaire cohérente sur des pages séparées.