javascript - Thymeleaf - 在表中保存多条记录

Question

抱歉，如果这个问题已在其他地方提出并回答，但我找不到太多帮助，所以我想我会在这里问。我对 Thymeleaf 很陌生，仍在尝试理解事物。所以这就是我想要做的，
目标：从数据库中提取数据并以表格形式（即行和列）显示在一个简单的网页上。所有字段都可以通过最后的提交和重置按钮进行编辑。像这样的东西，

问题：所以我面临的问题是，如果只有一行数据，更新记录没有问题，但是如果我编辑记录并按下时有超过1条记录Submit，更新的记录保持不变和以前一样，但列表中的第一条记录将更新后的文本连接到各自列中的现有文本。此行为如下图所示，

如上图所示，我有两条记录......甚至没有更改记录，我按下Submit按钮，现在我可以看到记录 1 的第 2 行文本连接到其现有文本。

这是我的代码，

HTML

<form
  action="#"
  th:action="@{/saveMapping}"
  th:object="${hanaMappingT}"
  method="post"
>
  <table id="mappings">
    <thead>
      <tr>
        <th>ID</th>
        <th>WBSNAME</th>
        <th>ITEMDESCRIPTION</th>
        <th>WBSCANDYCODE</th>
        <th>WBSHENAME</th>
      </tr>
    </thead>
    <tbody>
      <tr th:each="mapping : ${allMappings}">
        <td>
          <input
            type="text"
            field="*{id}"
            th:name="id"
            th:value="${mapping.id}"
          />
        </td>
        <td>
          <input
            type="text"
            field="*{wbsName}"
            th:name="wbsName"
            th:value="${mapping.wbsName}"
          />
        </td>
        <td>
          <input
            type="text"
            id="itemDescription"
            field="*{itemDescription}"
            th:name="itemDescription"
            th:value="${mapping.itemDescription}"
          />
        </td>
        <td>
          <input
            type="text"
            field="*{wbsCandyCode}"
            th:name="wbsCandyCode"
            th:value="${mapping.wbsCandyCode}"
          />
        </td>
        <td>
          <input
            type="text"
            field="*{wbsHeName}"
            th:name="wbsHeName"
            th:value="${mapping.wbsHeName}"
          />
        </td>
      </tr>
    </tbody>
  </table>
  <input type="submit" value="Submit" />
  <input type="reset" value="Reset" />
</form>;

控制器类

@PostMapping("/saveMapping")
  public String saveMapping(
    @ModelAttribute HanaMappingT mapping, Model model) {        
      try {
        log.info(mapping.toString());
        List<HanaMappingT> mappingList = new ArrayList<HanaMappingT>();
        mappingList.add(mapping);
        log.info("List : " + mappingList.toString());
        hanaService.updateMapping(mappingList);            
      } catch (Exception e) {
        log.error("Unable to save mapping data - ", e);
      }
      return "result";
  }

HanaMappingT 类

@Data
@Entity
@Table(name = "MAPPING_T")
public class HanaMappingT {

  @Id
  @Column(name = "ID")
  private Integer id;

  @Column(name = "WBSNAME")
  private String wbsName;
  @Column(name = "ITEMDESCRIPTION")
  private String itemDescription;
  @Column(name = "WBSCANDYCODE")
  private String wbsCandyCode;
  @Column(name = "WBSHENAME")
  private String wbsHeName;
}

我不确定如何处理多条记录，如何使用一个提交按钮将所有记录存储在各自的列和行中。

如果您需要进一步澄清，请随时提出问题，我会尽力回答。

标签： javascripthtmlthymeleaf