Как отобразить входные значения в таблице данных с динамическими столбцами с использованием тимелина

Question

Я пытаюсь создать список форм с таблицей данных, куда я помещаю некоторые входные значения из коллекции. Дело в том, что я не знаю, как отображать значения с подключением к контроллеру для правильного отображения и регистрации значений из ввода.

Это DTO, которое я хочу отобразить в виде списка форм:

@Data
public class ComponentPeriodValues {

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

}

Все записи имеют одинаковое количество периодов, и я пытаюсь построить таблицу данных, как показано ниже:

My HTML is like below:

 Описание      Сохранить    

Но, когда я использую это поле ввода, я получаю эту ошибку:

Вызывается: org.springframework.beans.NotReadablePropertyException: недопустимое свойство 'v' класса бина [java.util.ArrayList]: свойство бина 'v' недоступно для чтения или имеет недопустимый метод получения: соответствует ли возвращаемый тип получателя параметрутип установщика?

Когда я использую текстовое поле, оно работает ..

Итак, мой вопрос: как я могу использовать поля ввода здесь, чтобы отразить изменения в DTO и затем работатьс моим обновленным DTO для обработки обновления в базе данных?

Answer 1

Я не очень разбираюсь в синтаксисе листьев тимьяна, но понимаю, как работает связывание данных 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"/>

В соответствии с этим 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>