Thymeleaf çoklu koşullar, arka plan rengini değiştir

Question

AccountDTO.state ve accountDTO.accountDTO sütunlarındaki tablo hücreleri, accountDTO.state'in metin değerine bağlı olarak arka plan rengini değiştirmelidir. Bunu denedim:

Thymeleaf - Birbirini dışlayan koşullara göre iki (veya daha fazla) stil nasıl uygulanır?

ve birkaç çözüm daha araştırdım, ancak herkes iki olası değer için koşullu ifadeler kullanıyor veya yukarıdaki URL'de birden çok koşul var. Yalnızca bir koşulum var, ancak bu alanda 9 olası değerim var. Kullanıcı, farklı bir web sayfasında bu alan için bir değer seçer. Bu sayfada veritabanından bir liste gösterilmektedir.

Şimdi td etiketi içindeki th: switch ifadesini denedim ama sonra td'nin içine span veya div eklemem gerekiyor, ancak bu durumda işe yaramıyor, hücreler renkli değil. If / else / if structure veya elif gibi bir şey aradım, ancak göründüğü gibi yok. Ve bunu tekrarlayamam: eğer tek bir etiket içindeyse. Umarım th: switch'i kullanabilirim ama neden çalışmıyor?

Aşağıda sadece daha kısa bir sürüm anahtarı var, bu örnek için sadece bazı durumlar, ancak toplamda dokuz vakaya ihtiyacım olacak.

            <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

Thymeleaf ve HTML'yi basitleştirmek için değişkeni sınıf olarak kullanmayı düşünün. Ardından biçimi CSS'nizle tutarlı bir şekilde ayarlayabilirsiniz. HTML'niz şuna benzer:

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

Ardından CSS'nizde şuna benzer bir şeye bakın:

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

Ayrı sayfalarda benzer çıktıları tutarlı hale getirmek için muhtemelen yararlıdır.