如何將HTML表格轉換爲使用Thymeleaf的列表

Question

我正在創建一個spring-boot MVC web應用程序。

當我從控制器獲取內容時，我可以在視圖上正確顯示它們。內容是帶有List的對象。該列表顯示在一張桌子上。

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

當我更改表格中的某些值時，我想保存它們。當我保存時，我在控制器中得到一個空List的對象。

 @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彈簧導specificaly 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>