質問編集履歴
1
追記:文字数制限のため、Thymeleafを外部サイトに貼り付けました。
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">×</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
|
-
```
|