Как сгенерировать редактирование модов для каждого элемента в модели?
Я пытаюсь использовать тимилеф для генерации редактирования и удаления модальностей для каждого элемента в модели в моем ModelAndView с помощью th:each,
Модалы действительно созданы и имеют уникальные идентификаторы, основанные на поле идентификатора элементов. У меня проблема в том, что ни одно из значений элементов не разбирается в inputs, чтобы позволить пользователю видеть текущие значения.
Очевидно, что они есть, потому что представление также имеет таблицу, которая отображает значения каждого элемента вместе с якорями, которые переключают модалы.
Вот пример кода того, как я это делаю:
<div th:each="f : ${foos}" th:id="um- + ${f.id}" class="modal fade"
tabindex="-1" role="dialog">
...
<form role="form" th:action="@{/foo/update}" th:object="${foo}" th:method="post">
<input type="hidden" th:field="*{id}" th:value="${f.id}"/>
<fieldset class="form-group">
<label for="bar">Bar</label>
<input th:field="*{bar}" th:value="${f.bar}" class="form-control"
id="bar" type="text" placeholder="Bar"/>
</fieldset>
...
</form>
...
</div>
Как сгенерировать редактирование модов для каждого элемента в модели? Я не уверен, почему тимилеф не может получить значения полей из элементов модели.
1 ответ
Это не очень хороший подход на самом деле. В дополнение к тому, что это не работает, использование цикла явно создает n модалы для коллекции.
Решение, которое работало лучше всего, состояло в том, чтобы обеспечить единый модал, который будет заполнен и отправлен с вызовами Ajax.
Это приложение Spring Boot без излишеств имеет весь соответствующий код.
Я также работал с этой функцией. В моем случае, когда я нажимаю кнопку редактирования, показывается модальное со значением с определенным идентификатором. мой html файл выглядит так.
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sf="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Student List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 style="text-align:center;">Students List</h1>
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Roll</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Setting</th>
</tr>
<tr th:each="student : ${studentList}">
<td th:text="${student.id}"></td>
<td th:text="${student.roll}"></td>
<td th:text="${student.firstName}"></td>
<td th:text="${student.lastName}"></td>
<td th:text="${student.age}"></td>
<td>
<button type="button"
class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"
th:attrappend="data-target=${student.id}">Edit
</button>
<div class="modal fade" id="myModal" role="dialog" th:attrappend="id=${student.id}">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<!--Form code start from here -->
<!-- Form Name -->
<legend>Registration Form</legend>
<form class="form-horizontal" action="#" th:action="@{/doUpdate}"
th:object="${student}" method="post">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label" for="roll">Roll</label>
<div class="col-md-4">
<input id="id" path="id" name="id" type="hidden"
placeholder="id" class="form-control input-md"
th:value="${student.id}"/>
<input id="roll" path="roll" name="roll" type="text"
placeholder="Roll" class="form-control input-md"
th:value="${student.roll}"/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="firstName">First Name</label>
<div class="col-md-4">
<input id="firstName" path="firstName" name="firstName"
type="text" placeholder="firstName"
class="form-control input-md" th:value="${student.firstName}"
/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="lastName">Last Name
</label>
<div class="col-md-4">
<input id="lastName" path="lastName" name="lastName"
type="text" placeholder="lastName"
class="form-control input-md"
th:value="${student.lastName}"/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="age">Age
</label>
<div class="col-md-4">
<input id="age" path="age" name="age"
type="text" placeholder="age" class="form-control input-md"
th:value="${student.age}"/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="pass">Password</label>
<div class="col-md-4">
<input id="pass" path="pass" name="pass"
type="password" placeholder="password"
class="form-control input-md"
th:value="${student.pass}"/>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="register"></label>
<div class="col-md-4">
<button id="register" name="register" class="btn btn-primary">
Register
</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<a th:href="@{/deleteStudent/(id=${student.id})}"
onclick="return confirm('Are you sure you want to delete this item?');">
<button type="button"
class="btn btn-info btn-lg">Delete
</button>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
В этом HTML код внутри <button> тег
data-toggle="modal" data-target="#myModal" th:attrappend="data-target=${student.id}"
а также
<div class="modal fade" id="myModal" role="dialog" th:attrappend="id=${student.id}">
используются для создания динамических модальных с идентификатором студента.