質問編集履歴

1

追記:文字数制限のため、Thymeleafを外部サイトに貼り付けました。

2020/09/03 01:13

投稿

soso0programmer
soso0programmer

スコア35

test CHANGED
File without changes
test CHANGED
@@ -4,8 +4,6 @@
4
4
 
5
5
  ご教授お願いいたします。
6
6
 
7
- 文字数制限のためThymeleaf側は部分的に削除しています。scriptタグの内容はhtmlと全く同じです。
8
-
9
7
 
10
8
 
11
9
  参考にしたサイト:https://qiita.com/taktos/items/8c4a951d03d0da869d89
@@ -14,6 +12,14 @@
14
12
 
15
13
 
16
14
 
15
+
16
+
17
+ Thymeleaf
18
+
19
+ https://notepad.pw/2l2y1gu2
20
+
21
+
22
+
17
23
  ```html
18
24
 
19
25
  <!DOCTYPE html>
@@ -138,7 +144,53 @@
138
144
 
139
145
 
140
146
 
141
-
147
+ <!-- Modal -->
148
+
149
+ <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
150
+
151
+ aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
152
+
153
+ <div class="modal-dialog modal-dialog-centered" role="document">
154
+
155
+ <div class="modal-content">
156
+
157
+ <div class="modal-header">
158
+
159
+ <h5 class="modal-title" id="exampleModalCenterTitle">担当者確認画面</h5>
160
+
161
+ <button type="button" class="close" data-dismiss="modal"
162
+
163
+ aria-label="Close">
164
+
165
+ <span aria-hidden="true">&times;</span>
166
+
167
+ </button>
168
+
169
+ </div>
170
+
171
+ <div class="modal-body">
172
+
173
+ <p>こちらの担当者であっていますか?</p>
174
+
175
+ <p>ITソリューション部:山田</p>
176
+
177
+ </div>
178
+
179
+ <div class="modal-footer">
180
+
181
+ <a type="button" class="btn btn-secondary" data-dismiss="modal"
182
+
183
+ href="visitor-top.html">キャンセル</a>
184
+
185
+ <a type="button" class="btn btn-primary" href="visitor-form.html">OK</a>
186
+
187
+ </div>
188
+
189
+ </div>
190
+
191
+ </div>
192
+
193
+ </div>
142
194
 
143
195
 
144
196
 
@@ -315,161 +367,3 @@
315
367
  </html>
316
368
 
317
369
  ```
318
-
319
-
320
-
321
- ```Thymeleaf
322
-
323
-
324
-
325
-
326
-
327
- <body class="nanikore">
328
-
329
-
330
-
331
-
332
-
333
-
334
-
335
-
336
-
337
- <h2 class="mb-5">
338
-
339
- <i class="fas fa-users"></i>担当者を選択してください
340
-
341
- </h2>
342
-
343
- <form th:action="@{/tablet-visitor/select-user}"
344
-
345
- class="form-inline justify-content-center" method="post">
346
-
347
-
348
-
349
- <div class="form-inline">
350
-
351
-
352
-
353
- <div class="search-box form-group mb-2 ml-2">
354
-
355
- <select class="chosen-select form-control" name="department">
356
-
357
- <option value="" style="font-weight: 100;">部署選択</option>
358
-
359
- <option th:each="dep:${dlist}"
360
-
361
- th:text="${dep.deployment_name}" th:value="${dep.id}"></option>
362
-
363
- </select>
364
-
365
- </div>
366
-
367
-
368
-
369
- <div class="form-group mb-2 ml-2 mr-5">
370
-
371
- <select class="chosen-select form-control list"
372
-
373
- th:name="empId">
374
-
375
- <option value="">氏名選択</option>
376
-
377
- <option class="list_item" th:each="user:${ulist}"
378
-
379
- th:text="${user.emp_name}" th:data-department="${user.deployment_id}"></option>
380
-
381
- </select>
382
-
383
- </div>
384
-
385
-
386
-
387
- </div>
388
-
389
-
390
-
391
- <div class="ml-1 mt-5">
392
-
393
- <button type="submit" class="btn btn-primary"
394
-
395
- data-toggle="modal" data-target="#exampleModalCenter">入力完了
396
-
397
- </button>
398
-
399
-
400
-
401
-
402
-
403
-
404
-
405
- </div>
406
-
407
-
408
-
409
-
410
-
411
-
412
-
413
- </form>
414
-
415
-
416
-
417
- </div>
418
-
419
-
420
-
421
- </div>
422
-
423
- </div>
424
-
425
- </div>
426
-
427
-
428
-
429
-
430
-
431
- </div>
432
-
433
-
434
-
435
- <!-- Optional JavaScript -->
436
-
437
- <!-- jQuery first, then Popper.js, then Bootstrap JS -->
438
-
439
- <script
440
-
441
- src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
442
-
443
- <script
444
-
445
- src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
446
-
447
- <script
448
-
449
- src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
450
-
451
- <script
452
-
453
- src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
454
-
455
- <script
456
-
457
- src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
458
-
459
-
460
-
461
-
462
-
463
-
464
-
465
- <script
466
-
467
- src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
468
-
469
- </body>
470
-
471
-
472
-
473
- </html>
474
-
475
- ```