我正在尝试使用Spring和JSP创建一个“待办事项列表”类型的web应用程序。我的
tasks.jsp
页面显示数据库中的任务列表。一些JSON通过中的JS函数传递到视图并用于创建HTML表
tasks.js
.结果如下:
我现在希望能够通过复选框(见每行的右侧)选择任务,并删除那些选中的行。任务表是一个表单,“删除选定项”按钮用于提交表单。
我使用传递到视图中的任务JSON(ID)中的一个字段作为每个复选框的值,因此每个复选框都有一个与特定行关联的唯一值。
当我单击“删除选定项”时,我可以在打印该值时验证复选框值是否已提交给我的控制器
taskDelete()
.
我的问题是,即使我选中多个框,也只会打印一个值。我怎样才能让我的表单提交一个所有已选中复选框值的列表?
TaskController.jsp
package com.petehallw.todolist.main;
@Controller
public class TaskController {
private static final String TASKS = "/tasks";
private static final String DELETE_TASK = TASKS + "/delete";
@Autowired
private TaskEntityDao taskEntityDao;
ObjectMapper mapper = new ObjectMapper();
@RequestMapping(value = TASKS, method = RequestMethod.GET)
public ModelAndView readTasks()
{
List<TaskEntity> tasks = taskEntityDao.readAllTasks();
String tasksJson;
try {
tasksJson = mapper.writeValueAsString(tasks);
return new ModelAndView("tasks", "tasksJson", tasksJson);
} catch (IOException e) {
// ...
}
}
@RequestMapping(value = DELETE_TASK, method = RequestMethod.POST)
public String taskDelete(@ModelAttribute("selectedTasks") String selectedTasks)
{
System.out.println(selectedTasks);
return "taskDeleted";
}
}
<%@taglib uri = "http://www.springframework.org/tags/form" prefix = "form"%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/stylesheet.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script src="${pageContext.request.contextPath}/js/tasks.js"></script>
</head>
<body>
<h2>My Tasks</h2>
<div>
<form:form action = "tasks/delete">
<table>
<tbody id="tasks_table_body"/>
</table>
<div>
<input type = "submit" value = "Delete Selected"/>
<input type = "submit" value = "Do something else"/>
</div>
</form:form>
</div>
<br>
<div class="actions">
<a href="addTask">Add Task</a>
</div>
<!-- Populate tasks table. -->
<script type="text/javascript">
taskJsonToTable(${tasksJson});
</script>
</body>
</html>
任务.js
/**
* Populate the tasks table from JSON.
* @param tasksJson A JSON array representing the tasks data from the database.
*/
function taskJsonToTable(tasksJson)
{
var tableBody = document.getElementById('tasks_table_body');
var tableHeaders = "<tr><th>Title</th>"
+ "<th>Description</th>"
+ "<th>Due Date</th>"
+ "<th>Priority</th>"
+ "<th>Select</th></tr>";
/* Add the table headers to the table. */
tableBody.innerHTML += tableHeaders;
for (var i = 0; i < tasksJson.length; i++)
{
var tableContent = "<tr>";
tableContent += "<td>" + tasksJson[i].title + "</td>"
+ "<td>" + tasksJson[i].description + "</td>"
+ "<td>" + tasksJson[i].dueDate.toString() + "</td>"
+ "<td>" + tasksJson[i].priority + "</td>"
+ "<td><input type='checkbox' name='selectedTasks' value='" +
+ tasksJson[i].taskId + "'"
+ "/></td></tr>";
/* Add the table row to the table. */
tableBody.innerHTML += tableContent;
}
}
