Несколько состояний тимелиста, изменить цвет фона

Jan 16 2021

Ячейки таблицы в столбцах accountDTO.state и accountDTO.accountDTO должны изменить цвет фона в зависимости от текстового значения accountDTO.state. Я пробовал это:

Thymeleaf - Как применить два (или более) стиля на основе взаимоисключающих условий

и я искал еще несколько решений, но все используют условные выражения для двух возможных значений, или в URL-адресе выше есть несколько условий. У меня только одно условие, но у меня есть 9 возможных значений в этом поле. Пользователь выбирает значение для этого поля на другой веб-странице. На этой странице показан список из базы данных.

Теперь я пробовал использовать оператор th: switch внутри тега td, но затем мне нужно добавить span или div внутри td, но в этом случае это не работает, ячейки не окрашены. Я искал что-то вроде структуры if / else / if или elif, но похоже, что нет. И я не могу повторить th: if в одном теге. Я надеюсь, что смогу использовать th: switch, но почему он не работает?

Ниже приведен только более короткий переключатель версии, только некоторые из случаев для этого примера, но мне понадобится всего девять случаев.

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

Ответы

1 Richard Jan 16 2021 at 10:00

Рассмотрите возможность использования переменной как класса, чтобы упростить Thymeleaf и HTML. Затем вы можете установить формат в соответствии с вашим CSS. Ваш HTML-код будет выглядеть примерно так:

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

Затем посмотрите на что-то подобное в своем CSS:

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

Возможно, полезно для согласования аналогичного вывода на отдельных страницах.