英文:
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="*{requestIds}"
and th:field="*{requestIds.ids}"
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<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); }
}
Request bean
public class Request {
long id;
String name;
String phone;
String email;
// Getters/Setters
}
Controller
@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 page
...
<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>
...
答案1
得分: 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>
英文:
So the answer is that name
and th:field
don't play nice together.
I made the following changes and it worked:
Controller
@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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论