Thymeleaf कई स्थितियाँ, पृष्ठभूमि का रंग बदलती हैं

Question

स्तंभों में तालिका कोशिकाएँ खाताDD.state और accountDTO.accountDTO को खाता का पाठ मान के आधार पर पृष्ठभूमि का रंग बदलना चाहिए। मैंने यह कोशिश की है:

Thymeleaf - पारस्परिक रूप से अनन्य स्थितियों के आधार पर दो (या अधिक) शैलियों को कैसे लागू किया जाए

और मैंने कुछ और समाधान खोजे हैं, लेकिन हर कोई दो संभावित मूल्यों के लिए सशर्त का उपयोग करता है, या इसके बाद के संस्करण में कई शर्तें हैं। मेरी एक ही शर्त है, लेकिन उस क्षेत्र में मेरे 9 संभावित मूल्य हैं। उपयोगकर्ता एक अलग वेब पेज में उस फ़ील्ड के लिए एक मान का चयन करता है। इस पृष्ठ पर, डेटाबेस से एक सूची दिखाई गई है।

अब मैंने वें के साथ कोशिश की है: td टैग के अंदर स्विच स्टेटमेंट लेकिन फिर मुझे td के अंदर स्पैन या डिव जोड़ने की जरूरत है, लेकिन इस मामले में यह काम नहीं करता है, सेल रंगीन नहीं हैं। मैंने कुछ इस तरह से खोजा है जैसे कि / और / यदि संरचना या एलिफ, लेकिन ऐसा कुछ नहीं है। और मैं वें को नहीं दोहरा सकता: यदि किसी एकल टैग में। मुझे उम्मीद है कि मैं वें का उपयोग कर सकता हूं: लेकिन, यह काम क्यों नहीं करता है?

नीचे एक छोटा संस्करण स्विच है, इस उदाहरण के लिए बस कुछ मामले, लेकिन मुझे कुल नौ मामलों की आवश्यकता होगी।

            <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 और HTML को सरल बनाने के लिए वर्ग के रूप में चर का उपयोग करने पर विचार करें। फिर आप अपने सीएसएस के साथ लगातार प्रारूप सेट कर सकते हैं। आपका 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>

फिर अपने सीएसएस में कुछ इस तरह से देखें:

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

संभवतः अलग पृष्ठों पर समान आउटपुट को सुसंगत बनाने के लिए उपयोगी है।