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

Question

Я создаю веб-приложение 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"; 
    } 

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

Answer 1

Для выполнения этих переплетных перегородок правильно следовать направляющей пружины Thymeleaf, в частности, 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>