javascript - Thymeleaf+spring+Jquery动态添加表单

Question

从 thymeleaf 中动态添加的下拉列表中获取值时遇到问题。

这是我的第一个

<select th:field="${offer.offerItemList[__${iterationStatus.index}__].mapa}" class="form-control input-sm ofa">
<option value="0" >---Choose option---</option>
<option th:each="attribute : ${offer.offerProductAttribute}" th:value="${attribute.id}" th:text="${attribute.name}"></option>
</select>

根据此下拉列表中的选择，我正在生成另一个下拉列表，其代码类似于以下内容:

var options = '<select th:field="offer.list"  class="form-control input-sm"> <option th:value="0">--Choose--</option>';
$.each(value.offerProductAttributeValuesList, function (index, value) {
                            options += '<option th:value="' + value.id + '">' + value.value+ '</option>';
                        });
                        options+= '</select>';
                        of.closest('tr').find('td:last').html(options);

Dom 元素生成良好。一切正常，但值永远不会与其余输入字段一起提交。

我已经这样做过很多次了，但是之前渲染过

<select>

服务器端的下拉菜单，我只需appendTo()选项，但在这种情况下我不能这样做，因为根据客户从先前下拉菜单中的选择，我可能有超过20个下拉菜单。

我希望我对我的问题足够清楚。

Answer 1

我要回答我自己的问题，因为我花了相当长的时间来解决这个问题，我的解决方案可能会在将来帮助别人。

问题是:我有对象列表，每个对象都有另一个对象列表。

1. 如果您只是从后端渲染整个 View (我使用的是 thymeleaf)，那么问题就更容易解决。这样你就可以使用 thymeleaf 表达式来正确映射所有内容 像这样:

2. 首先，您需要每个迭代顶级列表

<tr th:each="item,iterationStatus : ${offer.offerItemList}">

您需要使用 iterationStatus 来迭代嵌套列表，如下所示:

<select th:field="${offer.offerItemList[__${iterationStatus.index}__].mapa}">

这段小代码__${iterationStatus.index}__基本上将使用迭代索引，您最终会得到每次迭代的数字，渲染 View 将如下所示 offer.offerItemList[0].mapa 、1 和 2 等等。

这样值将被正确映射，但是，如果您想动态添加字段，事情会变得有点复杂。

1. 存在 jquery 问题。由于 jquery 在页面呈现时几乎绑定(bind)了选择器，即使您编写添加另一个元素，例如 <div class="temp"> 并编写完美的 jquery 函数，如下所示 $('.temp').on('click',function(){ console.log("clicked")}); 因为 jquery 没有将新创建的元素绑定(bind)到任何选择/事件监听器，所以什么都不会发生。解决方案是使用(文档)。

$(document).on("click",".temp",function(){console.log('clicked');})

好的，我们已经修复了前端问题，现在新创建的项目可以工作，但是我如何告诉 spring 将它们绑定(bind)到列表中的每个对象，该列表是另一个列表的一部分？那么你将不得不再次使用迭代索引:

1. 渲染 View 时，您需要在每个元素中保存迭代索引值(使用隐藏字段)
2. 将每个输入字段的值获取到 jquery var，如下所示:var iteration = $(this).closest('tbody').find('td:first-child').find('input').attr('value'); ofc 这是我放置隐藏输入字段的路径，您必须告诉 jquery 根据您的结构在哪里查找。
3. 您将像这样模拟数组和索引号 var options = '<select name="offerItemList['+iteration+'].mapaValues">';
4. 您需要注意的最后一件事是:假设您有通常从 Controller 发送的对象，如下所示 model.addAttribute("offer",offer);对象 Offer 具有属性、产品列表，因此您可以使用简单的 offer.productsList 访问该列表。 ，但每个产品都有 AttributeValues 列表。所以最终设置看起来像这样 offer.products[0].attributes[0].name products 是 Product 类对象的数组列表，attributes 是 AttributeValues 类对象的数组列表，name 是字符串。为了让 spring 创建 AttributeValues 类的对象，并使用 spring 从前端动态(和非动态)创建的表单接收的信息，您需要教他如何操作。如果您的新表单的输入类型为“text”，您将发送回字符串，因此您将需要创建一个自定义构造函数 你的类 AttributeValues 将接收一个 String 并告诉 Spring 如何用 String “构造”该类的实例。

最后创建两个构造函数，一个是默认构造函数，一个以 String 作为值: public AttributeValues(){};另一个字符串 public AttributeValues(String n){this.name = n;};