Question

我试图通过jquery在百万美元中为子对象添加一个输入字段，但是我无法在控制器中获取子对象值。

这是我的代码

父类TestList

$`1`
                mpg cyl  disp  hp drat    wt  qsec vs am gear carb
Mazda RX4      21.0   6 160.0 110 3.90 2.620 16.46  0  1    4    4
Mazda RX4 Wag  21.0   6 160.0 110 3.90 2.875 17.02  0  1    4    4
Datsun 710     22.8   4 108.0  93 3.85 2.320 18.61  1  1    4    1
Merc 240D      24.4   4 146.7  62 3.69 3.190 20.00  1  0    4    2
Merc 230       22.8   4 140.8  95 3.92 3.150 22.90  1  0    4    2
Merc 280       19.2   6 167.6 123 3.92 3.440 18.30  1  0    4    4
Merc 280C      17.8   6 167.6 123 3.92 3.440 18.90  1  0    4    4
Fiat 128       32.4   4  78.7  66 4.08 2.200 19.47  1  1    4    1
Honda Civic    30.4   4  75.7  52 4.93 1.615 18.52  1  1    4    2
Toyota Corolla 33.9   4  71.1  65 4.22 1.835 19.90  1  1    4    1
Toyota Corona  21.5   4 120.1  97 3.70 2.465 20.01  1  0    3    1
Fiat X1-9      27.3   4  79.0  66 4.08 1.935 18.90  1  1    4    1
Porsche 914-2  26.0   4 120.3  91 4.43 2.140 16.70  0  1    5    2
Lotus Europa   30.4   4  95.1 113 3.77 1.513 16.90  1  1    5    2
Ferrari Dino   19.7   6 145.0 175 3.62 2.770 15.50  0  1    5    6
Volvo 142E     21.4   4 121.0 109 4.11 2.780 18.60  1  1    4    2

$`2`
                  mpg cyl  disp  hp drat    wt  qsec vs am gear carb
Hornet 4 Drive   21.4   6 258.0 110 3.08 3.215 19.44  1  0    3    1
Valiant          18.1   6 225.0 105 2.76 3.460 20.22  1  0    3    1
Merc 450SE       16.4   8 275.8 180 3.07 4.070 17.40  0  0    3    3
Merc 450SL       17.3   8 275.8 180 3.07 3.730 17.60  0  0    3    3
Merc 450SLC      15.2   8 275.8 180 3.07 3.780 18.00  0  0    3    3
Dodge Challenger 15.5   8 318.0 150 2.76 3.520 16.87  0  0    3    2
AMC Javelin      15.2   8 304.0 150 3.15 3.435 17.30  0  0    3    2

$`3`
                     mpg cyl disp  hp drat    wt  qsec vs am gear carb
Hornet Sportabout   18.7   8  360 175 3.15 3.440 17.02  0  0    3    2
Duster 360          14.3   8  360 245 3.21 3.570 15.84  0  0    3    4
Cadillac Fleetwood  10.4   8  472 205 2.93 5.250 17.98  0  0    3    4
Lincoln Continental 10.4   8  460 215 3.00 5.424 17.82  0  0    3    4
Chrysler Imperial   14.7   8  440 230 3.23 5.345 17.42  0  0    3    4
Camaro Z28          13.3   8  350 245 3.73 3.840 15.41  0  0    3    4
Pontiac Firebird    19.2   8  400 175 3.08 3.845 17.05  0  0    3    2
Ford Pantera L      15.8   8  351 264 4.22 3.170 14.50  0  1    5    4
Maserati Bora       15.0   8  301 335 3.54 3.570 14.60  0  1    5    8

子类ProjectTask

private String inputField;

private List<ProjectTask> projectTasks = new ArrayList<>();

public TestList() {
    projectTasks = new ArrayList<ProjectTask>();
}

我的jquery用于创建动态输入字段，这里索引是一个计数器

String taskName;
boolean isTaskDone;

Answer 1

（即使这个答案有点晚，您可能已经解决或学习了技巧），我了解您要达到的主要目标。没有控制器的代码，我只能帮忙解决我面前的信息。

首先，要了解thymeleaf是服务器端渲染引擎。这意味着th：field =“ $ {propertyXY}”之类的东西将在field =“ theValueOfTheProperty”中解析，然后发送到客户端计算机。

第二个原因是，该jquery仅在客户端计算机上运行。因此，当准备进行百里香叶手术的时间就结束了。

请记住，您的jquery需要更改为链接的内容

$(
            '<input type="text" class="form-control quantity" field="projectTasks['+index+'].taskName}">'
        ).appendTo('#task');

对于更深入的理解和要引用的示例，我建议：https://www.baeldung.com/thymeleaf-list。当您运行示例并在浏览器中查看生成的HTML时，您会发现它很简单。输入标记中的name属性值直接引用子元素，就像在Javascript中一样。

Answer 2

正在回答旧的线程。我遇到了类似的情况，并通过Google找到了解决方案。我有两个实体-人和联系人（一对多）。

@Entity
public class Person {
 @OneToMany(cascade = CascadeType.ALL)
    @JoinColumn(name = "person_id")
    private List<Contact> contactList = new ArrayList<>();
}

和

 @Entity
    public class Contact {
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
  }

在Thymeleaf模板内部，可以进行以下操作：

<tbody id="tblContacts"> <tr th:fragment="contacts" th:each="contact,rowStat : ${person.contactList}"> <td th:text="${rowStat.count}">1</td> <td><input type="hidden" th:field="${person.contactList[__${rowStat.index}__].id}"> <select class="form-control form-control-sm" th:field="${person.contactList[__${rowStat.index}__].contactType}" th:errorclass="is-invalid"> <option selected="selected" readonly value="">Select an option</option> <option value="email">Email</option> <option value="home">Home</option> <option value="business">Business</option> <option value="mobile">Mobile</option> </select> <div th:if="${#fields.hasErrors('${person.contactList[__${rowStat.index}__].contactType}')}" class="invalid-feedback" th:errors="${person.contactList[__${rowStat.index}__].contactType}"></div> </td> <td><input class="form-control form-control-sm" th:field="${person.contactList[__${rowStat.index}__].contactName}" th:errorclass="is-invalid" /> <div th:if="${#fields.hasErrors('${person.contactList[__${rowStat.index}__].contactName}')}" class="invalid-feedback" th:errors="${person.contactList[__${rowStat.index}__].contactName}"></div> </td> <td> <div class="btn-group"> <button type="button" name="removeContact" th:value="${rowStat.index}" class="btn btn-sm btn-outline-danger" data-update-contacts-url="/removeContact"> <i class="fas fa-trash"></i> </button> </div> </td> </tr> </tbody>

我还为此创建了一个Github Repo。 Here it is。希望它可能有用并且可以帮助像我这样的人。

在百里香叶中为List子对象动态添加输入字段

2 个答案: