質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

2回答

1408閲覧

補足追加Thymeleafの繰り返しの書き方について

a0841_1974

総合スコア29

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2018/08/20 14:04

編集2018/08/21 14:51

いつもお世話になっております。

Tymeleafの繰り返し処理を使って、
以下のHTMLのようなコードを表示したいのですが、
どのような繰り返し処理を組めば、以下のHTMLのような表示が出来るのでしょうか。

【HTML】

<li> <a data-toggle="collapse" href="#menu01" aria-controls="#menu01" aria-expanded="false">受注業務</a> </li> <ul id="menu01" class="collapse"> <li><a id="menu-link" href="/zyutyu/regist/" >受注登録</a></li> <li><a id="menu-link" href="/zyutyu/modify/" >受注修正</a></li> </ul> <li> <a data-toggle="collapse" href="#menu02" aria-controls="#menu02" aria-expanded="false">販売業務</a> </li> <ul id="menu02" class="collapse"> <li><a id="menu-link" href="/hanbai/regist/" >販売登録</a></li> <li><a id="menu-link" href="/hanbai/modify/" >販売修正</a></li> <li><a id="menu-link" href="/hanbai/delete/" >販売削除</a></li> </ul>

(補足)
1.data-toggle="collapse"のある<li>タグは、業務ごとに1つだけ表示したいです。
2.id="menuXX"のある<ul>タグも、業務ごとに1つだけ表示したいです。
3.id="menu-link"のある<li>タグは、実際のメニュー分だけ表示したいです。
4.業務名の数、業務名配下のメニューの数は、決まっていません。

※phpであれば、以下のようなリストを作成して、
最初のデータ、または、gyoumu_meiが変わるたびに
data-toggle="collapse"のある<li>タグ、id="menuXX"のある<ul>タグを表示して、id="menu-link"のある<li>タグは、毎回表示しようかと思いますが、
Tymeleafの場合は、どのように書けばよいか分からないです。

gyoumu_mei menu_mei
受注業務 受注登録
受注業務 受注修正
販売業務  販売登録
販売業務  販売修正
販売業務  販売削除

(補足2)
th:blockを使用したコード】

<th:block th:each="data : ${menu_list}"> <li th:if="${data.gyoumu_mei_hyouji_flg == 1}"> <a data-toggle="collapse" th:href="'#menu'+${data.no}" th:aria-controls="'#menu'+${data.no}" aria-expanded="false" th:text="${data.gyoumu_meisyou}"></a> </li> ☆ <ul th:if="${data.gyoumu_mei_hyouji_flg == 1}" th:id="'menu'+${data.no}" class="collapse"> ☆ <li><a id="menu-link" th:data-menu="'mn'+${data.no}" th:href="'/'+${data.url}+'/'" target="main" th:text="${data.meisyou}"></a></li> ☆ </ul> </th:block>

menu_listには、以下のデータがリスト形式で登録されています。
no gyoumu_mei_hyouji_flg gyoumu_meisyou meisyou url
0 1      受注業務     受注登録 zyutyu/regist
1 0      受注業務      受注修正 zyutyu/modify
2 1       販売業務    販売登録 hanbai/regist
3 0      販売業務     販売修正 hanbai/modify
4 0      販売業務     販売削除 hanbai/delete

このデータを使って、【HTML】のようなコードを表示したいのですが、
☆の部分がうまく制御できません。

☆の部分の実施したい事は、
・gyoumu_mei_hyouji_flg=1の時は、<ul>タグを表示する。
<li><a>タグはgyoumu_mei_hyouji_flgの値に関係なく毎回表示する。
</ul>タグは、次の明細のgyoumu_mei_hyouji_flg=1または最終行のデータの時は、</ul>タグを表示する。
です。

何か良い方法はありますでしょうか。

以上です。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

A-pZ

2018/08/21 04:57

data-toggle="collapse"にある行の要素<li> は、親要素が抜けているようですが、表示に問題ないでしょうか?(liは、olまたはulの子要素に含める)
a0841_1974

2018/08/22 08:29

ご連絡ありがとうございます。現状は表示に問題ありませんでした。
guest

回答2

0

自己解決

menu_listを以下のように持たせて、html側でループ処理を入れ子にしたら解決しました。

no:int型、gyoumu_meisyou:String型、menu_list:List型
※menu_listには、meisyou,urlを1つのクラスにして、リストにしております。

no gyoumu_meisyou menu_list
1 受注業務      ☆1
2 販売業務       ☆2

☆1には、以下のデータをリストにしました。
meisyou url
受注登録 zyutyu/regist
受注修正 zyutyu/modify

☆2には、以下のデータをリストにしました。
meisyou url
販売登録 hanbai/regist
販売修正 hanbai/modify
販売削除 hanbai/delete

この状態でhtmlは、以下の様に記述しました。

<th:block th:each="data : ${menu_list}"> <li> <a data-toggle="collapse" th:href="'#menu'+${data.no}" th:aria-controls="'#menu'+${data.no}" aria-expanded="false" th:text="${data.gyoumu_meisyou}"></a> </li> <ul th:id="'menu'+${data.no}" class="collapse"> <li th:each="menu_data : ${data.menu_list}" ><a id="menu-link" th:data-menu="'mn'+${data.no}" th:href="'/'+${menu_data.url}+'/'" target="main" th:text="${menu_data.meisyou}"></a></li> </ul> </th:block>

投稿2018/08/22 08:40

a0841_1974

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

<th:block> </th:block>

を利用すれば可能ですね。

ですがHTML の規約違反ですので

<li> <a data-toggle="collapse" href="#menu02" aria-controls="#menu02" aria-expanded="false">販売業務</a> <ul id="menu02" class="collapse"> <li><a id="menu-link" href="/hanbai/regist/" >販売登録</a></li> <li><a id="menu-link" href="/hanbai/modify/" >販売修正</a></li> <li><a id="menu-link" href="/hanbai/delete/" >販売削除</a></li> </ul> </li>

と UL を内包するほうがいいでしょう。
CSS などはうまく合わせてください。

投稿2018/08/20 14:09

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

a0841_1974

2018/08/20 23:28

ご連絡ありがとうございます。 やってみます。
a0841_1974

2018/08/21 14:53

<th:block>を実施したのですが、うまく制御が出来ません。 大変申し訳ございませんが、補足2に状況を追加しましたので、 何か良い方法がありましたらアドバイスを頂けますでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問