Thymeleaf nhiều điều kiện, thay đổi màu nền

Question

Các ô của bảng trong cột accountDTO.state và accountDTO.accountDTO phải thay đổi màu nền, tùy thuộc vào giá trị văn bản của accountDTO.state. Tôi đã thử cái này:

Thymeleaf - Cách áp dụng hai (hoặc nhiều) kiểu dựa trên các điều kiện loại trừ lẫn nhau

và tôi đã tìm kiếm thêm một số giải pháp, nhưng mọi người đều sử dụng điều kiện cho hai giá trị có thể có hoặc trong URL ở trên có nhiều điều kiện. Tôi chỉ có một điều kiện, nhưng tôi có 9 giá trị có thể có trên trường đó. Người dùng chọn một giá trị cho trường đó trong một trang web khác. Trên trang này, một danh sách từ cơ sở dữ liệu được hiển thị.

Bây giờ tôi đã thử với câu lệnh th: switch bên trong thẻ td nhưng sau đó tôi cần thêm span hoặc div bên trong td, nhưng trong trường hợp này, nó không hoạt động, các ô không được tô màu. Tôi đã tìm kiếm một cái gì đó như cấu trúc if / else / if hoặc elif, nhưng dường như không có. Và tôi không thể lặp lại th: if trong một thẻ duy nhất. Tôi hy vọng tôi có thể sử dụng th: switch nhưng, tại sao nó không hoạt động?

Dưới đây chỉ là một chuyển đổi phiên bản ngắn hơn, chỉ là một số trường hợp cho ví dụ này, nhưng tôi sẽ cần tổng cộng chín trường hợp.

            <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

Cân nhắc sử dụng biến làm lớp để đơn giản hóa Thymeleaf và HTML. Sau đó, bạn có thể đặt định dạng nhất quán với CSS của mình. HTML của bạn sẽ trông giống như sau:

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

Sau đó, hãy xem một cái gì đó như thế này trong CSS của bạn:

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

Có thể hữu ích để làm cho đầu ra tương tự nhất quán trên các trang riêng biệt.