J'essaie de créer une liste de formulaires avec une table de données où je place des valeurs d'entrée à partir d'une collection. Le fait est que je ne sais pas comment afficher les valeurs en connexion avec le contrôleur pour afficher et enregistrer correctement les valeurs de l'entrée.

Voici le DTO que je souhaite afficher sous forme de liste de formulaires:

@Data
public class ComponentPeriodValues {

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

}

Tous les enregistrements ont un nombre égal de périodes et j'essaie de créer un tableau de données comme ci-dessous:

Mon HTML est comme ci-dessous:

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

Mais, lorsque j'utilise ce champ de saisie, j'ai eu cette erreur:

Causée par: org.springframework.beans.NotReadablePropertyException: propriété 'v' non valide de la classe de bean [java.util.ArrayList]: la propriété de bean 'v' n'est pas lisible ou a une méthode getter non valide: le type de retour de la getter correspond-il le type de paramètre du setter?

Lorsque j'utilise un champ de texte brut, cela fonctionne ..

Donc, ma question est: comment puis-je utiliser les champs de saisie ici pour refléter les changements dans le DTO et ensuite travailler avec mon DTO mis à jour afin de traiter la mise à jour dans la base de données?

0
Guilherme Gomes Correia 4 nov. 2019 à 08:43

1 réponse

Je ne sais pas grand-chose sur la syntaxe des feuilles de thym, mais je comprends comment fonctionne la liaison de données Spring-MVC. Vous devrez peut-être modifier la syntaxe de quelques feuilles de thym, mais voici ce que vous devez faire -

Enveloppez votre liste de ComponentPeriodValues dans une autre classe comme celle-ci

@Data
public class ComponentPeriodCommand implements Serializable {

    private static final long serialVersionUID = 1L;

    private List<ComponentPeriodValues> cpvs;
}

Comment lier des valeurs à votre liste, votre code HTML doit ressembler à ceci pour la première ligne, la deuxième colonne, etc.

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

Selon ce poteau de baeldung vous pouvez obtenir un index dans thymeleaf comme

<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>
0
saifulislamplabon 5 nov. 2019 à 04:59