如何使用 Thymeleaf 将 HTML 表格转换为列表

Question

我正在创建一个 spring-boot MVC Web 应用程序。

当我从控制器获取内容时，我可以在视图上正确显示它们。内容是一个带有列表的对象。列表显示在表格上。

<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";
}

我应该怎么做才能让表格元素回到列表中？

Answer 1

要正确完成此行绑定，请遵循 Thymeleaf Spring 指南，特别是 Dynamic Fields 部分。有一个特殊的语法，所以你的 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>