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

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

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

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

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

Spring Boot

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

Q&A

解決済

1回答

10380閲覧

SpringBoot Bootstrapを用いたThymleafでのModal表示について。

kazu5942

総合スコア6

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

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

Spring Boot

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

0グッド

1クリップ

投稿2020/08/26 04:42

編集2020/08/26 04:43

前提・実現したいこと

SpringBoot、Thymleaf、BootStrapを用いて、テーブルのレコード削除ボタンを押した際に、
モーダルウィンドウを表示させたいのですが、その際モーダル内の表示内容を各レコードに応じて変更させたいです。
どこにModalを置けばいいかわからずに困っています。

Thymeleaf

<!-- 表 --> <!-- datatables --> <table id="example" class="table table-striped table-bordered" style="width: 100%"> <thead> <tr> <th>ソート順</th> <th>名前</th> <th>メールアドレス</th> <th>部署</th> <th>編集</th> <th>削除</th> <th>初期化</th> <th>管理者権限</th> </tr> </thead> <tbody> <tr th:each="emp:${empData}"> <td class="text-center"><input type="text" class="form-control" min="0" max="999" name="sort_num" th:value="*{sort_num}" form="sort"></td> <td th:text=${emp.emp_name}>ユーザー名</td> <td th:text=${emp.emp_name}>メールアドレス</td> <td th:text=${emp.deployment_id}>部署</td> <td class="text-center"> <form action="/deleteEmp" method="POST" id="edit"> <input type="hidden" name="emp_id" th:value="${emp.id}"> <input type="submit" class="btn btn-dark text-center" value="編集" form="edit"> </form> </td> <!-- モーダル出力 --> <td class="text-center"><a href="" class="btn btn-danger text-center" data-toggle="modal" data-target="#deleteModal+${emp.id}">削除</a></td> <!-- モーダル出力 --> <td class="text-center"><a href="" class="btn btn-danger text-center" data-toggle="modal" data-target="#exampleModal1+${emp.id}">初期化</a></td> <!-- 権限の有無 --> <td class="text-center"> <div th:if="${emp.identify}=='0'"> <h5>なし</h5> </div> <div th:if="${emp.identify}=='1'"> <img src="@{/img/lock.png}" alt="権限付与"> </div> </td> </tr> </tbody> </table> </div> <!-- Modal --> <div class="modal fade" id="deleteModal+${emp.id}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">削除確認画面</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <form action="/deleteEmp" method="POST" id="delete"> <div class="modal-body"> <p th:text="${emp.emp_name}+${emp.emp_mail}"></p> <input type="hidden" name="emp_id" th:value="*{emp_id}" form="delete"> <p>上記データの削除を実行します</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button> <input type="submit" class="btn btn-danger" form="delete">削除 </div> </form> </div> </div> </div> <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="#exampleModal1+${emp.id}" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">初期化確認画面</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <form action="/grant" method="POST" id="gran"> <div class="modal-body"> <p th:text="${emp.emp_name}+${emp.emp_mail}"></p> <input type="hidden" name="selectEditId" value="${emp.emp_id}" form="gran"> <p>上記社員のパスワード初期化を実行します</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button> <input type="submit" class="btn btn-danger" value="削除" form="gran"> </div> </form> </div> </div> </div>

試したこと

現状はこのようになっています。Modalを<tr th:each="emp:${empData}">のループの中に入れないといけないと考えていろいろな箇所に試したのですが、うまくいきませんでした。
正しい配置を教えていただけますと幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

Modalはループ外に1個置いておいて、モーダルトリガーのボタンとかにIDなど主キー情報をdata属性で埋め込んでおき、別途押下時のイベントを設けてそこからAjaxでデータを取得すると良いと思います。

※一覧に出ている情報がモーダルに持っていきたい情報全てなら主キー情報以外も全部data属性にもっておいて拾うのでも良いと思いますが。

とりあえず下記で各レコードのIDは取れます。

html

1<a href="" class="btn btn-danger text-center deletemodalbtn" data-toggle="modal" data-target="#deleteModal" th:data-id="${emp.id}">削除</a>

js

1$(document).on('click','.deletemodalbtn',function(e){ 2 let id = $(e.currentTarget).data('id'); 3});

「データをセットするまでモーダル出現は待機したい」ならこのクリックイベントで.modal('show')を別途呼び出すと良いです。

投稿2020/08/26 04:45

編集2020/08/26 04:51
m.ts10806

総合スコア80765

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

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

kazu5942

2020/08/26 05:00

ご回答いただきましてありがとうございます。data属性にもたせて、Modalで拾うやり方で実装しようと思うのですが、拾い方について詳しく教えていただけますでしょうか。
m.ts10806

2020/08/26 05:02

もしかしたらコメントと入れ違いになっていたかもしれませんが、13:51に編集で追記しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問