情况
有一个类称为“工具”。这个工具类有一个“分发点”列表。
在用户界面上:
用户从组合框(也称为选项 (HTML))中选择一个项目(分发位置)并将其添加到表中。
然后,用户单击表单上的“提交”,表格上的所有内容都会绑定到一个列表。
Problem
Spring 不会将表 '' items 作为列表发送。这不起作用。
尝试了几件事,但没有一个奏效。
代码片段
....
<form method="POST" th:object="${tool}" th:action="@{/tools/add}">
....
<!--(Distribution Points) -->
<div class="w-100 col-md-6">
<table id="tabledistributionPoints" class="w-100 tab" border="2" th:field="${tool.distributionPoints}">
<tr id="head">
<th>Distribution Point</th>
</tr>
<tr th:each="ponto, index: ${tool.distributionPoints}">
<td th:value="${ponto.id}" th:field="${tool.distributionPoints[index]}" th:text="${ponto.distributionPoint}"></td>
</tr>
</table>
<div class="row col-md-6">
<select id="distributionPoint" th:object="${distributionPoints}" class="form-control">
<option></option>
<option th:id="${ponto.id}" th:each="ponto : ${distributionPoints}" th:value="${ponto.id}" th:text="${ponto.distributionPoint}"></option>
</select>
<input id="AddPonto" type="button" value="Add" name="Add" onclick="AdddistributionPoint()" />
<input id="RemovePonto" type="button" value="Remove" name="Remove" onclick="RemovedistributionPoint()" />
</div>
</div>
....
</form>
<script>
function AdddistributionPoint() {
var ponto = $("#distributionPoint option:selected").text();
var pontoId = $("#distributionPoint option:selected").attr("id");
var pontoClean = cleanString(ponto);
var rows = $("#tabledistributionPoints tr").length - 1;
if (ponto.toString() !== "") {
//
if ($("#tabledistributionPoints").find("#" + pontoClean).length === 0) {
var k = '<input th:field="${tool.distributionPoints[' + rows + '].id}" th:value="' + ponto + '" th:name="${ponto.distributionPoint}" th:text="' + ponto + '" value="' + ponto + '" type="text" readonly="readonly "> </>';
$("#tabledistributionPoints > tBody:last").append("<tr><td id=" + pontoClean + " >" + k + "</td></tr>");
}
}
$("#tabledistributionPoints").on("click", "tr", function () {
$(this).addClass("clicked").siblings().removeClass("clicked");
});
}
function RemovedistributionPoint() {
var rowCount = $("#tabledistributionPoints tr").length;
if (rowCount > 1) {
var selected = $("#tabledistributionPoints > tbody > tr.clicked");
if (selected !== null && selected.length > 0) {
selected.remove();
} else {
$("#tabledistributionPoints tr:last").remove();
}
}
}
</script>
@GetMapping("/tools/add")
public ModelAndView formadd() {
ModelAndView mv = new ModelAndView("addtool");
Tool tool = new Tool();
mv.addObject(doc);
mv.addObject("distributionPoints",pontoDistribuicaoDAO.findAll());
return mv;
}
@RequestMapping(value = "/tools/add", method = RequestMethod.POST)
public String salvar(tool tool) {
System.out.println(tool.getdistributionPoints());
this.toolDAO.save(tool);
return "redirect:/tools";
}
我研究了很多,但我仍然很困惑。任何提示表示赞赏。
参考文献/链接阅读
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#dynamic-fields https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#dynamic-fields
如何将对象列表与 thymeleaf 绑定? https://stackoverflow.com/questions/36500731/how-to-bind-an-object-list-with-thymeleaf
Edit:
1- 用户从组合框中选择一项。
2-用户点击添加
3- 从组合框中选择的项目将进入表格。
4-用户从组合框中选择另一个随机项目。
5-用户点击添加
6- 从组合框中选择的项目将进入表格。
该表现在有 2 项。
用户单击“保存”,这两项将保存为列表“分发点”的项目