Thymeleafの複数の条件、背景色の変更
accountDTO.state列とaccountDTO.accountDTO列のテーブルセルは、accountDTO.stateのテキスト値に応じて背景色を変更する必要があります。私はこれを試しました:
Thymeleaf-相互に排他的な条件に基づいて2つ(またはそれ以上)のスタイルを適用する方法
さらにいくつかの解決策を検索しましたが、誰もが2つの可能な値に条件を使用しているか、上記のURLに複数の条件があります。条件は1つだけですが、そのフィールドには9つの可能な値があります。ユーザーは、別のWebページでそのフィールドの値を選択します。このページには、データベースのリストが表示されます。
tdタグ内でth:switchステートメントを試してみましたが、td内にspanまたはdivを追加する必要がありますが、この場合は機能せず、セルは色付けされません。if / else / if構造やelifのようなものを検索しましたが、ないようです。そして、単一のタグでth:ifを繰り返すことはできません。th:switchを使用できるといいのですが、なぜ機能しないのですか?
以下は短いバージョンのスイッチで、この例のいくつかのケースですが、合計9つのケースが必要になります。
<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
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;
}
別々のページで同様の出力を一貫させるのに役立つ可能性があります。