Thymeleaf/Spring - 将项目从组合框添加到表中

Posted 2023-02-26

【中文标题】Thymeleaf/Spring - 将项目从组合框添加到表中

【英文标题】：Thymeleaf/Spring - Add items to a list from a combobox to a table

【发布时间】：2021-04-06 08:07:41

【问题描述】：

情况

有一个类叫做“工具”。这个工具类有一个“分布点”列表。

---

在用户界面上：

用户从组合框又名选项（html）中选择一个项目（分发位置）并将其添加到表中。 之后，用户点击表单上的“提交”，表格上的所有内容都绑定到一个列表中。

---

问题

Spring 不会将表“项目”作为列表发送。它不起作用。 尝试了几件事，但都没有奏效。

---

代码片段

    ....
<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

How to bind an object list with thymeleaf?

---

编辑：

1- 用户从组合框中选择一项。 2-用户点击添加 3- 从组合框中选择的项目进入表格。 4-用户从组合框中选择另一个随机项目。 5-用户点击添加 6- 从组合框中选择的项目进入表格。

表格现在有 2 个项目。

用户点击保存，这两项保存为列表'Distribution Points'的项目

【参考方案1】：

首先，您的标签缺少名称属性。

<select id="distributionPoint" th:object="$distributionPoints" class="form-control">

添加名称=“”

名称应与工具类中列表字段的名称相同。如果是distribution_points，那么在select标签里面，name="distribution_points"。

并且，对于salvar方法，在参数中使用@ModelAttribute注解。

@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";
   

希望能帮到你。

【讨论】：

这几乎可以工作。 Thymeleaf 从组合框中选择选定的项目。但是，我希望百里香从桌子上挑选所有物品。我将更新问题以更好地解释它应该如何工作。

我明白了。我添加了 name='distributionPoints' :

现在它可以正常工作了。惊人的。太感谢了。我不敢相信事情就这么简单。你是怎么知道的？

哈哈，谢谢。如果您想将任何内容绑定到您的 java 类，只需在表单和 java 类字段中使用相同的名称。

没错。表格的每一行都是从添加到表格的组合框中选择的项目。

很高兴能为您提供帮助。