Thymeleafの複数の条件、背景色の変更

Jan 16 2021

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 Jan 16 2021 at 10:00

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

別々のページで同様の出力を一貫させるのに役立つ可能性があります。