时间戳

首页 > 解决方案 > 如何使用 thymeleaf 在具有动态列的数据表中显示输入值

java - 如何使用 thymeleaf 在具有动态列的数据表中显示输入值

问题描述

我正在尝试使用数据表创建一个表单列表，在其中放置一些来自集合的输入值。事实是我不知道如何显示与控制器连接的值以正确显示和注册输入中的值。

这是我要显示为表单列表的 DTO：

@Data
public class ComponentPeriodValues {

private int idComponent;
private String description;
private List<String> periods;
private List<BigDecimal> values;

}

所有记录都有相同数量的周期，我正在尝试构建一个如下所示的数据表：

我的 HTML 如下所示：

<div id="data" th:unless="${cpv == null}" style="width:100%;height:500px;overflow:auto;">
    <form action="#" th:action="@{/planning-components/save}"
        th:object="${cpv}" method="POST">

        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>Description</th>
                    <th:block th:each="p : ${cpv[0].periods}">
                        <th th:text="${p}"></th>
                    </th:block>
                </tr>
            </thead>

            <tbody>
                <tr th:each="c : ${cpv}">
                    <td th:text="${c.description}" />
                    <th:block th:each="v : ${c.values}">
                        <td>
                            <input type="text" th:field="*{v}"
                                class="form-control mb-4 col-4"/>
                        </td>
                    </th:block>
                </tr>
            </tbody>        
        </table>

        <button type="submit" class="btn btn-info col-2">Save</button>
    </form>
</div>

但是，当我使用这个输入字段时，我得到了这个错误：

原因：org.springframework.beans.NotReadablePropertyException：bean 类 [java.util.ArrayList] 的无效属性“v”：bean 属性“v”不可读或具有无效的 getter 方法：getter 的返回类型是否匹配设置器的参数类型？

当我使用纯文本字段时，它可以工作..

所以，我的问题是：如何在此处使用输入字段来反映 DTO 中的更改，然后使用更新的 DTO 以将更新处理到数据库中？

标签： javaspringspring-bootspring-mvcthymeleaf

解决方案

我不太了解百里香叶语法，但我了解 spring-mvc 数据绑定的工作原理。您可能需要更改一些百里香叶语法，但这是您需要做的 -

像这样将您的列表包装ComponentPeriodValues在另一个类中

@Data
public class ComponentPeriodCommand implements Serializable {

    private static final long serialVersionUID = 1L;

    private List<ComponentPeriodValues> cpvs;
}

现在要将值绑定到您的列表，您的 html 需要在第一行第二列中看起来像这样，依此类推

    <input type="text" name="cpvs[0].values[1]" class="form-control mb-4 col-4"/>

根据this baeldung post，您可以在百里香中获得索引，例如

<div id="data" th:unless="${cpv == null}" style="width:100%;height:500px;overflow:auto;">
    <form action="#" th:action="@{/planning-components/save}"
        th:object="${command}" method="POST">

        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>Description</th>
                    <th:block th:each="p : ${cpv[0].periods}">
                        <th th:text="${p}"></th>
                    </th:block>
                </tr>
            </thead>

            <tbody>
                <tr th:each="c, iterC : ${command.cpvs}">
                    <td th:text="${c.description}" />
                    <th:block th:each="v, iter : ${c.values}">
                        <td>
                            <input type="text" th:field="*{cpvs[__${iterC.index}__].values[__${iter.index}__]}" class="form-control mb-4 col-4"/>
                        </td>
                    </th:block>
                </tr>
            </tbody>        
        </table>

        <button type="submit" class="btn btn-info col-2">Save</button>
    </form>
</div>

推荐阅读