使用复选框将对象添加到列表 - Spring Boot 和 Thymeleaf
Adding objects to a list using checkboxes - Springboot & Thymeleaf
我有一个小应用程序,我在其中显示表单中的成分列表,并且每种成分都有一个复选框。如果成分被选择然后提交,它将进入 IngredientListWrapper 并添加到 Formula 对象。这行得通,除了不只返回选中的框,它还 returns 空的。
下面是问题的几张图片:
控制器映射:
@GetMapping("/add-ingredients-to-formula")
public String addIngredientsToFormula(Model model) {
List<Ingredient> ingredients = ingredientService.getAllIngredients();
IngredientListWrapper ingredientListWrapper = new IngredientListWrapper();
model.addAttribute("list", ingredients);
model.addAttribute("listWrapper",ingredientListWrapper);
return "Add-Ingredients-To-Formula-Form";
}
//creates a new Formula spec and sets the ingredientList to the ingredientListWrapper attribute
@PostMapping("/formula-details")
public String addFormulaDetails(@ModelAttribute("ingredientListWrapper") IngredientListWrapper ingredientListWrapper, Model model) {
Formula formula = new Formula();
formula.setIngredients(ingredientListWrapper.getIngredientListWrapper());
model.addAttribute("formula", formula);
return "Add-Formula-Form";
}
Thymeleaf 形式:添加成分到配方形式
<div class="container table-responsive">
<h1>Ingredient Selection Table</h1>
<table class="table table-striped">
<thead class="table-light">
<tr>
<th>Ingredient ID</th>
<th>Ingredient Name</th>
<th>Type</th>
<th>Manufacturer</th>
<th>Potency</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<form action="#" th:action="@{/formula-details}" method="post" th:object="${listWrapper}">
<tr th:each="ingredient, stat : ${list}">
<td th:text="${ingredient.getIngredientId()}"></td>
<td th:text="${ingredient.getIngredientName()}"></td>
<td th:text="${ingredient.getType()}"></td>
<td th:text="${ingredient.getManufacturer()}"></td>
<td th:text="${ingredient.getPotency()}"></td>
<td>
<input type="checkbox" th:field="*{ingredientListWrapper[__${stat.index}__]}" th:value="${ingredient.ingredientId}">
</td>
</tr>
<button type="submit" class="btn btn-info col-2">Add</button>
</form>
</tbody>
</table>
</div>
添加公式表格
<div class="container table-responsive" >
<div>
<h2>Formula Creation Form</h2>
<form action="#" th:action="@{/generate-formula}" method="post" th:object="${formula}">
<input type="text" th:field="*{formulaId}">
<input type="text" th:field="*{formulaName}">
<input type="text" th:field="*{dosageForm}">
<table class="table table-striped">
<thead class="table-light">
<tr>
<td>Ingredient ID</td>
<td>Ingredient Name</td>
<td>Type</td>
<td>Potency</td>
<td>Label Claim (mg)</td>
<td>Amount (mg)</td>
<td>Manufacturer</td>
</tr>
</thead>
<tbody>
<tr th:each="ingredient, holder : *{ingredients}">
<td><input th:field="*{ingredients[__${holder.index}__].ingredientId}"></td>
<td><input th:field="*{ingredients[__${holder.index}__].ingredientName}"></td>
<td><input th:field="*{ingredients[__${holder.index}__].type}"></td>
<td><input th:field="*{ingredients[__${holder.index}__].potency}"></td>
<td><input th:field="*{ingredients[__${holder.index}__].manufacturer}"></td>
<td><input th:field="*{ingredients[__${holder.index}__].labelClaim}"></td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-info col-2">Save</button>
</form>
</div>
</div>
我想确保只有选定的框被发送到 IngredientListWrapper,而不是空框。
更新 1
在 Add-Ingredients-To-Formula-Form 中发现问题
这个区块:
<td>
<input type="checkbox" th:field="*{ingredientListWrapper[__${stat.index}__]}" th:value="${ingredient.ingredientId}">
</td>
更改为:
<td>
<input type="checkbox" th:field="${ingredientListWrapper.ingredientListWrapper}" th:value="${ingredient.ingredientId}">
</td>
现在我只得到选定的对象!
我有一个小应用程序,我在其中显示表单中的成分列表,并且每种成分都有一个复选框。如果成分被选择然后提交,它将进入 IngredientListWrapper 并添加到 Formula 对象。这行得通,除了不只返回选中的框,它还 returns 空的。
下面是问题的几张图片:
控制器映射:
@GetMapping("/add-ingredients-to-formula")
public String addIngredientsToFormula(Model model) {
List<Ingredient> ingredients = ingredientService.getAllIngredients();
IngredientListWrapper ingredientListWrapper = new IngredientListWrapper();
model.addAttribute("list", ingredients);
model.addAttribute("listWrapper",ingredientListWrapper);
return "Add-Ingredients-To-Formula-Form";
}
//creates a new Formula spec and sets the ingredientList to the ingredientListWrapper attribute
@PostMapping("/formula-details")
public String addFormulaDetails(@ModelAttribute("ingredientListWrapper") IngredientListWrapper ingredientListWrapper, Model model) {
Formula formula = new Formula();
formula.setIngredients(ingredientListWrapper.getIngredientListWrapper());
model.addAttribute("formula", formula);
return "Add-Formula-Form";
}
Thymeleaf 形式:添加成分到配方形式
<div class="container table-responsive">
<h1>Ingredient Selection Table</h1>
<table class="table table-striped">
<thead class="table-light">
<tr>
<th>Ingredient ID</th>
<th>Ingredient Name</th>
<th>Type</th>
<th>Manufacturer</th>
<th>Potency</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<form action="#" th:action="@{/formula-details}" method="post" th:object="${listWrapper}">
<tr th:each="ingredient, stat : ${list}">
<td th:text="${ingredient.getIngredientId()}"></td>
<td th:text="${ingredient.getIngredientName()}"></td>
<td th:text="${ingredient.getType()}"></td>
<td th:text="${ingredient.getManufacturer()}"></td>
<td th:text="${ingredient.getPotency()}"></td>
<td>
<input type="checkbox" th:field="*{ingredientListWrapper[__${stat.index}__]}" th:value="${ingredient.ingredientId}">
</td>
</tr>
<button type="submit" class="btn btn-info col-2">Add</button>
</form>
</tbody>
</table>
</div>
添加公式表格
<div class="container table-responsive" >
<div>
<h2>Formula Creation Form</h2>
<form action="#" th:action="@{/generate-formula}" method="post" th:object="${formula}">
<input type="text" th:field="*{formulaId}">
<input type="text" th:field="*{formulaName}">
<input type="text" th:field="*{dosageForm}">
<table class="table table-striped">
<thead class="table-light">
<tr>
<td>Ingredient ID</td>
<td>Ingredient Name</td>
<td>Type</td>
<td>Potency</td>
<td>Label Claim (mg)</td>
<td>Amount (mg)</td>
<td>Manufacturer</td>
</tr>
</thead>
<tbody>
<tr th:each="ingredient, holder : *{ingredients}">
<td><input th:field="*{ingredients[__${holder.index}__].ingredientId}"></td>
<td><input th:field="*{ingredients[__${holder.index}__].ingredientName}"></td>
<td><input th:field="*{ingredients[__${holder.index}__].type}"></td>
<td><input th:field="*{ingredients[__${holder.index}__].potency}"></td>
<td><input th:field="*{ingredients[__${holder.index}__].manufacturer}"></td>
<td><input th:field="*{ingredients[__${holder.index}__].labelClaim}"></td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-info col-2">Save</button>
</form>
</div>
</div>
我想确保只有选定的框被发送到 IngredientListWrapper,而不是空框。
更新 1
在 Add-Ingredients-To-Formula-Form 中发现问题
这个区块:
<td>
<input type="checkbox" th:field="*{ingredientListWrapper[__${stat.index}__]}" th:value="${ingredient.ingredientId}">
</td>
更改为:
<td>
<input type="checkbox" th:field="${ingredientListWrapper.ingredientListWrapper}" th:value="${ingredient.ingredientId}">
</td>
现在我只得到选定的对象!