springmvc后端用list传递的参数,写一个前端页面用EL表达式展示遍历用户账号密码的操作列表页,可以全选或者不全选,进行删除联动ajax
时间: 2024-02-03 13:14:30 浏览: 84
假设后端的Controller方法如下:
```java
@RequestMapping("/users")
public String userList(Model model) {
List<User> users = userService.findAllUsers();
model.addAttribute("users", users);
return "userList";
}
@RequestMapping(value="/deleteUsers", method=RequestMethod.POST)
public String deleteUsers(@RequestParam("userIds") List<Long> userIds) {
userService.deleteUsers(userIds);
return "redirect:/users";
}
```
其中,User类有两个属性:id和username。
那么,在前端页面中,我们可以这样写:
```html
<table>
<thead>
<tr>
<th><input type="checkbox" onchange="toggleCheckbox(this)" /></th>
<th>ID</th>
<th>用户名</th>
</tr>
</thead>
<tbody>
<c:forEach var="user" items="${users}">
<tr>
<td><input type="checkbox" name="userIds" value="${user.id}" /></td>
<td>${user.id}</td>
<td>${user.username}</td>
</tr>
</c:forEach>
</tbody>
</table>
<button type="button" onclick="deleteUsers()">删除选中用户</button>
<script>
function toggleCheckbox(checkbox) {
var checkboxes = document.getElementsByName("userIds");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = checkbox.checked;
}
}
function deleteUsers() {
var checkboxes = document.getElementsByName("userIds");
var selectedIds = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selectedIds.push(checkboxes[i].value);
}
}
if (selectedIds.length == 0) {
alert("请选择要删除的用户!");
} else {
if (confirm("确定要删除选中的用户吗?")) {
$.ajax({
url: "/deleteUsers",
type: "POST",
data: {userIds: selectedIds},
success: function() {
location.reload();
},
error: function() {
alert("删除用户失败!");
}
});
}
}
}
</script>
```
在上面的代码中,我们使用了EL表达式`${users}`来遍历用户列表,并将每个用户的id作为checkbox的value属性,以便于在删除用户时获取用户id。同时,我们在全选checkbox的`onchange`事件中,使用了JavaScript来实现全选或全不选的功能,并在删除用户时,通过jQuery的ajax方法,将选中的用户id发送给后端Controller进行删除操作。在删除成功后,我们使用了`location.reload()`方法来重新加载页面,以展示删除后的用户列表。
阅读全文