Как преобразовать таблицу HTML в список с помощью Thymeleaf

Я создаю веб-приложение MVC с весенней загрузкой.

Когда я получаю содержимое от контроллера, я могу правильно отображать его в представлении. Контент - это объект со списком. Список отображается в таблице.

<form th:action="@{/}" th:object="${homeVO}" method="post">

    <div align="center">
        <table width="80%" id="sectionsTable">
            <thead>
            <th width="10%"><label class="tableTextTitle">ORDER</label></th>
            <th width="50%"><label class="tableTextTitle">TITLE</label></th>
            <th width="10%"></th>
            <th width="10%"><label class="tableTextTitle">HIDE</label></th>
            <th width="10%"></th>
            <th width="10%"></th>
            </thead>
            <tbody>
            <tr th:each="section, stat :${homeVO.sections}">
                <td>
                    <input type="number" th:value="${section.id}" hidden="true" id="sectionid" />
                    <input type="number" class="form-control" th:value="${section.position}" id="position"/>
                </td>
                <td>
                    <input type="text" class="form-control" th:value="${section.name}" disabled="true" id="name"/>
                </td>
                <td align="center">
                    <a th:href="@{./sectionprofile(id=${section.id})}" class="btn btn-default">EDIT</a>
                </td>
                <td>
                    <input type="text" class="form-control" th:value="${section.column}" id="column"/>
                </td>
                <td>
                    <select class="form-control" id="condition">
                        <option value="0" th:selected="(${section.condition} == 0)"/>
                        <option value="1" th:text="#{minor}" th:selected="(${section.condition} == 1)"/>
                        <option value="2" th:text='#{minorEq}' th:selected="(${section.condition} == 2)"/>
                        <option value="3" th:text="#{different}" th:selected="(${section.condition} == 3)"/>
                        <option value="4" th:text='#{equals}' th:selected="(${section.condition} == 4)"/>
                        <option value="5" th:text='#{biggerEq}' th:selected="(${section.condition} == 5)"/>
                        <option value="6" th:text='#{bigger}' th:selected="(${section.condition} == 6)"/>
                    </select>
                </td>
                <td>
                    <input type="text" class="form-control" th:value="${section.criteria}" id="criteria"/>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-12">
        <a href="./sectionprofile" class="btn btn-default">Add Section</a>
        <input type="submit" class="btn btn-default" value="SAVE" />
    </div>
</form>

Когда я меняю некоторые значения в таблице, я хочу их сохранить. Когда я сохраняю, я получаю в контроллере объект с пустым списком.

@RequestMapping(method = RequestMethod.POST)
public String set(HomeVO homeVO, Model model) {

    if (homeVO != null) {

        for (SectionVO sectionVO : homeVO.getSections()) {

            Section section = sectionRepository.findOne(sectionVO.getId());
            section.setPosition(sectionVO.getPosition());
            section.setColumn(sectionVO.getColumn());
            section.setCondition(sectionVO.getCondition());
            section.setCriteria(sectionVO.getCriteria());
            sectionRepository.save(section);
        }
    }
    ...
    return "home";
}

Что мне делать, чтобы вернуть элементы таблицы в список?


spring-boot spring-mvc thymeleaf
person Michael Knight    schedule 12.05.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Чтобы выполнить привязку этих строк должным образом, следуйте руководству Thymeleaf Spring, в частности Динамические поля раздел. Существует специальный синтаксис, поэтому ваш HTML должен быть похож на этот:

<tr th:each="row,rowStat : *{rows}">
      <td th:text="${rowStat.count}">1</td>
      <td>
        <select th:field="*{rows[__${rowStat.index}__].variety}">
          <option th:each="var : ${allVarieties}" 
                  th:value="${var.id}" 
                  th:text="${var.name}">Thymus Thymi</option>
        </select>
      </td>
      <td>
        <input type="text" th:field="*{rows[__${rowStat.index}__].seedsPerCell}" />
      </td>
      <td>
        <button type="submit" name="removeRow" 
                th:value="${rowStat.index}" th:text="#{seedstarter.row.remove}">Remove row</button>
      </td>
</tr>
person David Marko    schedule 14.05.2016