从表格中使用Spring + Thymeleaf获取选中复选框的ID。

huangapple go评论72阅读模式
英文:

getting Ids from selected checkboxes in a table using Spring + Thymeleaf

问题

我遇到了一个错误,NotReadablePropertyException:bean类的无效属性'userIds'。我不确定为什么会出现这个错误。如果我在复选框上移除th:field属性,表格就会正确填充。我已经尝试了th:field="*{requestIds}"th:field="*{requestIds.ids}"

表单

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

   public List<Long> getIds() { return ids; }
// 我已经尝试过单独和一起使用set方法。
   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;

   // Getter和Setter
}

控制器

@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>
...
英文:

I'm getting an error NotReadablePropertyException: Invalid property 'userIds' of bean class [...ListOfIds]... And I'm not sure why. If I remove the th:field attribute on the checkbox, the table fills in properly. I've tried with th:field=&quot;*{requestIds}&quot; and th:field=&quot;*{requestIds.ids}&quot;
What I'm trying to do is collect the list of ids from the selected checkboxes and pass them back to the controller for the post.

Form

public class ListOfIds {
   List&lt;Long&gt; ids = new ArrayList&lt;&gt;();

   public List&lt;Long&gt; getIds() { return ids; }
// I&#39;ve tried both set methods by themselves and together.
   public void setIds(List&lt;Long&gt; ids) { this.ids = ids; }
   public void setIds(Long[] ids) { this.ids = Arrays.asList(ids); }
}

Request bean

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

   // Getters/Setters
}

Controller

@GetMapping(&quot;/myTable&quot;)
public ModelAndView getMyTable(ModelAndView mav) {
   mav.setViewName(&quot;myTable&quot;);
   List&lt;Request&gt; requests = service.getRequests();
   mav.addObject(&quot;requests&quot;, requests);
   mav.addObject(&quot;requestIds&quot;, new ListOfIds());
   return mav;
}

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

html page

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

答案1

得分: 1

所以答案是,nameth: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>
英文:

So the answer is that name and th:field don't play nice together.

I made the following changes and it worked:

Controller

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

html

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

huangapple
  • 本文由 发表于 2020年9月25日 14:01:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/64058657.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定