Thymeleaf beberapa kondisi, ubah warna latar belakang

Question

Sel tabel di kolom accountDTO.state dan accountDTO.accountDTO harus mengubah warna latar belakang, bergantung pada nilai teks accountDTO.state. Saya sudah mencoba ini:

Thymeleaf - Bagaimana menerapkan dua (atau lebih) gaya berdasarkan kondisi yang saling eksklusif

dan saya telah mencari beberapa solusi lagi, tetapi setiap orang menggunakan kondisional untuk dua kemungkinan nilai, atau di URL di atas ada beberapa kondisi. Saya hanya memiliki satu syarat, tetapi saya memiliki 9 kemungkinan nilai di bidang itu. Pengguna memilih nilai untuk bidang itu di halaman web yang berbeda. Di halaman ini, daftar dari database ditampilkan.

Sekarang saya sudah mencoba dengan pernyataan th: switch di dalam tag td tetapi kemudian saya perlu menambahkan span atau div di dalam td, tetapi dalam kasus ini tidak berhasil, sel tidak diwarnai. Saya telah mencari sesuatu seperti if / else / if structure atau elif, tetapi tampaknya tidak ada. Dan saya tidak dapat mengulangi th: jika dalam satu tag. Saya harap saya bisa menggunakan th: switch tapi, mengapa tidak berhasil?

Di bawah ini hanyalah peralihan versi yang lebih pendek, hanya beberapa kasing untuk contoh ini, tetapi saya akan memerlukan sembilan kasing secara 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

Pertimbangkan untuk menggunakan variabel sebagai kelas untuk menyederhanakan Thymeleaf dan HTML. Kemudian Anda dapat mengatur format secara konsisten dengan CSS Anda. HTML Anda akan terlihat seperti ini:

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

Kemudian lihat sesuatu seperti ini di CSS Anda:

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

Mungkin berguna untuk membuat hasil yang serupa konsisten di halaman terpisah.