使用 Spring + Thymeleaf 从表中的选定复选框中获取 Id答案

【问题标题】：getting Ids from selected checkboxes in a table using Spring + Thymeleaf使用 Spring + Thymeleaf 从表中的选定复选框中获取 Id
【发布时间】：2020-09-25 06:01:17
【问题描述】：

我收到一个错误 NotReadablePropertyException: Invalid property 'userIds' of bean class [...ListOfIds]... 我不知道为什么。如果我删除复选框上的 th:field 属性，表格会正确填写。我试过th:field="*{requestIds}" 和th:field="*{requestIds.ids}" 我要做的是从选定的复选框中收集 id 列表并将它们传递回控制器以进行发布。

表格

public class ListOfIds {
   List<Long> ids = new ArrayList<>();

   public List<Long> getIds() { return ids; }
// I've tried both set methods by themselves and together.
   public void setIds(List<Long> ids) { this.ids = ids; }
   public void setIds(Long[] ids) { this.ids = Arrays.asList(ids); }
}

请求 bean

public class Request {
   long id;
   String name;
   String phone;
   String email;

   // Getters/Setters
}

控制器

@GetMapping("/myTable")
public ModelAndView getMyTable(ModelAndView mav) {
   mav.setViewName("myTable");
   List<Request> requests = service.getRequests();
   mav.addObject("requests", requests);
   mav.addObject("requestIds", new ListOfIds());
   return mav;
}

@PostMapping("/myTable")
public ModelAndView postRequests(ModelAndView mav, @ModelAttribute("requestIds") ListOfIds ids) {
   ...
}

html页面

...
<form method="post" th:action="@{/myTable}" th:object="${requestIds}">
   <table class="table ...">
      <thead>
      <tr>
         <th><input type="checkbox" class="selectall" data-target="requests-all"/></th>
         <th>Name</th>
         <th>Phone</th>
         <th>Email</th>
      </tr>
      </thead>
      <tbody>
      <tr role="row" th:each="request : ${requests}">
         <td>
            <input type="checkbox" name="requestId" data-target="requests-all" 
                   th:value="${request.id}" th:field="*{requestIds}"/>
         </td>
         <td th:text="${request.name}"></td>
         <td th:text="${request.phone}"></td>
         <td th:text="${request.email}"></td>
      </tr>
      </tbody>
   </table>
   <button class="btn btn-primary show-selected">Process</button>
</form>
...
<script>
$(document).ready(function() {
   $('button').click(function(e) {
      if !(confirm("Are you sure you wish to process these requests")) {
         e.preventDefault();
      }
   });
});
</script>
...

【问题讨论】：

标签： java spring thymeleaf

【解决方案1】：

所以答案是name 和th:field 不能一起玩。

我进行了以下更改并且效果很好：

控制器

@PostMapping("/myTable")
public ModelAndView postRequests(ModelAndView mav, 
                                 @ModelAttribute("requestIds") Long[] ids) {
   ...
}

html

<form id="postMyTable" method="post" th:action="@{/myTable}">
<table ...
     <input type="checkbox" name="requestId" data-target="requests-all" 
                   th:value="${request.id}"/>
...
<script>
   $(document).ready(function() {
   $('button').click(function(e) {
      if !(confirm("Are you sure you wish to process these requests")) {
         e.preventDefault();
      } else {
         $("#postMyTable").submit();
      }
   });
});
</script>

【讨论】：