Thymeleaf/Spring - 将项目从组合框添加到列表到表格 [英] Thymeleaf/Spring - Add items to a list from a combobox to a table
问题描述
情况
有一个类叫做工具".这个工具类有一个分布点"列表.
在用户界面上:
用户从组合框又名选项 (HTML) 中选择一个项目(分发位置)并将其添加到表格中.之后，用户点击表单上的提交"，表格中的所有内容都绑定到一个列表中.
问题
Spring 不会将表 '' 项作为列表发送.它不起作用.尝试了几件事，但都没有奏效.
代码片段
....<表单方法=POST"th:object="${tool}";th:action="@{/tools/add}">....<!--(分布点)--><div class="w-100 col-md-6"><table id="tabledistributionPoints";class="w-100 tab";边界=2"th:field=${tool.distributionPoints}"><tr id="head"><th>分发点</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><div class="row col-md-6"><select id="distributionPoint";th:object="${distributionPoints}";class =表单控件"><选项></选项><option th:id="${ponto.id}";th:each="ponto : ${distributionPoints}";th:value="${ponto.id}";th:text="${ponto.distributionPoint}"></option></选择><input id="AddPonto";类型=按钮"值=添加"名称=添加"onclick="AdddistributionPoint()";/><input id="RemovePonto";类型=按钮"值=删除"名称=删除"onclick="RemoveddistributionPoint()";/>....</表单><脚本>函数添加分布点(){var ponto = $("#distributionPoint option:selected").text();var pontoId = $("#distributionPoint option:selected").attr("id");var pontoClean = cleanString(ponto);var rows = $("#tabledistributionPoints tr").length - 1;如果(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 + '"值="'+ ponto + '"类型=文本"只读=只读"></>';$("#tabledistributionPoints > tBody:last>).append(<tr><td id="pontoClean +">>>k+</td></tr>");}}$("#tabledistributionPoints").on("click", "tr", function () {$(this).addClass("clicked").siblings().removeClass("clicked");});}函数移除分布点(){var rowCount = $("#tabledistributionPoints tr").length;如果(行数> 1){var selected = $(#tabledistributionPoints > tbody > tr.clicked");if (selected !== null && selected.length > 0) {选择.remove();}其他{$("#tabledistributionPoints tr:last").remove();}}}
@GetMapping("/tools/add")公共 ModelAndView formadd() {ModelAndView mv = new ModelAndView(addtool");工具工具=新工具()；mv.addObject(doc);mv.addObject(distributionPoints",pontoDistribuicaoDAO.findAll());返回 mv;}@RequestMapping(value = "/tools/add", method = RequestMethod.POST)公共字符串salvar(工具工具){System.out.println(tool.getdistributionPoints());this.toolDAO.save(工具);返回重定向:/工具"；}我已经研究了很多，但我仍然很困惑.任何提示表示赞赏.
阅读的参考文献/链接
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#dynamic-fields
1- 用户从组合框中选择一项.2- 用户点击添加3- 从组合框中选择的项目进入表格.4- 用户从组合框中选择另一个随机项目.5- 用户点击添加6- 从组合框中选择的项目进入表格.
表格现在有 2 个项目.
用户点击保存，这两个项目被保存为列表'Distribution Points'的项目
首先，你的标签缺少 name 属性.
添加名称="
名称应与工具类中的列表字段名称相同.如果是 distribution_points，则在 select 标签内，name="distribution_points".
并且，对于salvar方法，在参数中使用@ModelAttribute注解.
@RequestMapping(value = "/tools/add", method = RequestMethod.POST)public String salvar(@ModelAttribute("tool") 工具工具) {System.out.println(tool.getdistributionPoints());this.toolDAO.save(工具);返回重定向:/工具"；}希望能帮到你.
Situation
There is a class called 'Tool'. And this Tool class has a list of "Distribution Points".
On The User Interface:
A user selects an item (Distribution location) from a combobox aka Option(HTML) and add it to a table. Afterwards, the user click on 'submit' on the form, everything on the table is binded to a list.
Problem
Spring doesnt send the table '' items as a list. It doesnt work. Attempted several things but none of them work.
Code Snippet
....
<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";
}
Ive researched a lot but im still confused. Any tip is appreciated.
References/Links read
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#dynamic-fields
How to bind an object list with thymeleaf?
Edit:
1- The user select one item from the combobox. 2- The user clicks add 3- The selected item from the combobox goes to the table. 4- The user selects another random item from the combobox. 5- The user clicks add 6- The selected item from the combobox goes to the table.
The table has now 2 items.
The user clicks saves and these two items are saved as the items of the list 'Distribution Points'
First of all, your tag is missing name attribute.
<select id="distributionPoint" th:object="${distributionPoints}" class="form-control">
Add name = ""
Name should be same as the name of list field in your Tool class. If it is distribution_points then, inside select tag, name="distribution_points".
And, for salvar method, use @ModelAttribute annotation in the parameter.
@RequestMapping(value = "/tools/add", method = RequestMethod.POST)
public String salvar(@ModelAttribute("tool") Tool tool) {
System.out.println(tool.getdistributionPoints());
this.toolDAO.save(tool);
return "redirect:/tools";
}
I hope I was able to help you.
这篇关于Thymeleaf/Spring - 将项目从组合框添加到列表到表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
