0
SpringとJSPを使用して 'to-do list'タイプのWebアプリケーションを作成しようとしています。私のtasks.jspページには、データベースからのタスクのリストが表示されます。一部のJSONはビューに渡され、tasks.jsのJS関数を介してHTMLテーブルを作成するために使用されます。ビューの下で結果：SpringのコントローラへのJSPフォーム提出のチェックボックスを提出する
私は今、チェックボックスを経由してタスクを選択します（各行の右側に見られる）と、それらの選択した行を削除できるようにしたいです。タスクテーブルはフォームで、フォームを送信するには[選択項目を削除]ボタンを使用します。
私は、各チェックボックスの値としてビューに渡されたタスクJSON（ID）を使用しているため、それぞれが特定の行に関連付けられた一意の値を持っています。
[選択したアイテムを削除]をクリックすると、その値をtaskDelete()に印刷するときに、チェックボックスの値がコントローラに送信されることを確認できます。
私の問題は、複数のボックスをチェックしても1つの値しか印刷されないということです。確認済みのすべてのチェックボックス値のリストを送信するには、フォームを取得するにはどうすればよいですか？
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";
}
}
tasks.jsp
<%@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>
tasks.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;
}
}
から
を交換してください。そして、それぞれにアクセスするには、selectedTasks [0]のインデックスを使用します。 –
@GurkanYesilyurtそれは動作していないようです - 私はまだ1つの値が返されます。私は 'taskDelete（@ModelAttribute（" selectedTasks "）String [] selectedTasks）'を試してみました。そして配列の長さをチェックしました。 – petehallw
あなたは 'taskDelete（@RequestParam String [] selectedTasks）'を試してみましたか？ –