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

2024-01-26

情况

有一个类称为“工具”。这个工具类有一个“分发点”列表。


在用户界面上:

用户从组合框(也称为选项 (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";
   }

Picture of the current Form. Note that, every item added is a represented by another row in the table.

我研究了很多,但我仍然很困惑。任何提示表示赞赏。

参考文献/链接阅读

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 项。

用户单击“保存”,这两项将保存为列表“分发点”的项目


首先,您的标签缺少 name 属性。

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

我希望我能够帮助你。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Thymeleaf/Spring - 将项目添加到从组合框到表格的列表中 的相关文章

随机推荐