Question

我正在努力创建一个待办事项清单＆＃39;使用Spring和JSP键入Web应用程序。我的tasks.jsp页面显示数据库中的任务列表。一些JSON传递给视图并用于通过tasks.js中的JS函数创建HTML表。导致以下观点：

我现在希望能够通过复选框（在每行的右侧看到）选择任务并删除所选的行。任务表是一个表单，并且“删除已选择”表格。按钮用于提交表单。

我使用传递给视图的任务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";
    }
}

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;
    }
}

Answer 1

替换

taskDelete(@ModelAttribute("selectedTasks") String[] selectedTasks)

到

taskDelete(@RequestParam String[] selectedTasks)

将JSP表单提交中的复选框提交给Spring控制器

1 个答案: