提交給Spring控制器的JSP表單提交複選框

我想用Spring和JSP創建一個'待辦事項列表'類型的Web應用程序。我的tasks.jsp頁面顯示數據庫中的任務列表。一些JSON被傳遞給視圖並用於通過tasks.js中的JS函數創建HTML表格。導致以下觀點：提交給Spring控制器的JSP表單提交複選框

我現在希望能夠選擇通過複選框（看到每一行的右側）任務，並刪除那些選擇行。任務表是一個表單，「刪除選定的」按鈕用於提交表單。

我使用傳遞到視圖中的任務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; 
    } 
}

來源

2017-08-08 petehallw

你可以使用數組的String [] selectedTasks控制器獲得多個複選框具有相同的名稱。並且訪問每一個，使用它們的索引selectedTasks [0]。 –

@GurkanYesilyurt這似乎不工作 - 我仍然得到一個返回值。我嘗試了'taskDelete（@ModelAttribute（「selectedTasks」）String [] selectedTasks）'，然後檢查數組的長度，該數組仍然是1，並且選中了多個框。 – petehallw

你有沒有嘗試過'taskDelete（@RequestParam String [] selectedTasks）'？ –

更換

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

到

taskDelete(@RequestParam String[] selectedTasks)

來源

2017-08-08 14:49:31

提交給Spring控制器的JSP表單提交複選框

回答

相關問題