1. 程式人生 > >SSM批量添加數據

SSM批量添加數據

http com 移除 接受 ati cti oca on() UNC

如何應對面臨批量數據時如何提交給後臺

技術分享圖片

方式1:

使用JSON格式

後臺功能接受實現使用@ResponseBody

前端當有多行數據的時候添加到一個數組再通過JSON格式到後臺List接收

@RequestMapping(value = "/emp01",method = RequestMethod.POST, produces = "application/json")
    @ResponseBody
    public String empAdd02(@RequestBody List<Employee> list){
        for (Employee e: list) {
            employeeMapper.insert(e);
        }
        
return "{\"msg\":\"succeed\"}"; }

該參數為一個員工對象集合

以下是前端:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>批量添加員工</title>
    <style type="text/css">
        .tab{
            text
-align: center; height: 40px; line-height: 40px; } .tab{ background-color: #F8F8F8; } </style> </head> <body> mar <table > <thead> <tr> <th>編號</th><th>姓名</th><th>性別</th><th>學歷</th><th>月薪</th><th>添加</th><th>移除</th> </tr> </thead> <tbody id="tbody01"> <tr> <td><input type="text" name="number"/></td> <td><input type="text" name="empName"/></td> <td> <select name="empSex"> <option>請選擇</option> <option value="男">男</option> <option value="女">女</option> </select> </td> <td> <select name="education"> <option>請選擇</option> <option value="本科">本科</option> <option value="專科">專科</option> <option value="碩士">碩士</option> <option value="博士">博士</option> </select> </td> <td><input type="number" name="monthly"/></td> <td><input type="button" value="+" class
="empAdd"/></td> <td><input type="button" value="-" class="empRem"/></td> </tr> </tbody> </table> <input type="button" id="addAll" value="批量添加" style="display: block;width: 100px;height: 40px; margin: 0 auto" /> <table class="tab" border="1" align="center" width="60%" bordercolor="#E2E2E2"> <tr class="th"> <th>編號</th><th>姓名</th><th>性別</th><th>學歷</th><th>月薪</th> </tr> <c:forEach var="emp" items="${emps}"> <tr> <td>${emp.number}</td> <td>${emp.empName}</td> <td>${emp.empSex}</td> <td>${emp.education}</td> <td>${emp.monthly}</td> </tr> </c:forEach> </table> </body> <script src="../../js/jquery.js"></script> <script type="text/javascript"> $(function () { var tbody = $("#tbody01"); trNode = tbody.clone(); tbody.on("click", " .empAdd", function () { $("#tbody01").append(trNode.clone()); }); tbody.on("click",".empRem",function () { var num = $("tr",tbody).length; if( num === 1){ alert("最後一行不能刪除"); return false; } $(this).parent().parent().remove(); }); }); /*數組*/ $("#addAll").click(function(){ var list = []; $("#tbody01 tr").each(function (i,obj) { list.push( { number:$("input[name=number]",obj).val(), empName:$("input[name=empName]",obj).val(), empSex:$("select[name=empSex]",obj).val(), education:$("select[name=education]",obj).val(), monthly:$("input[name=monthly]",obj).val() } ); }); console.log(list); $.post({ url:"/emp01", contentType:"application/json;charset=utf-8", data:JSON.stringify(list) }).done(function (data) { if(data.msg === "succeed"){ window.location.href = "/eee"; } }); }); </script> </html>

方式2:

傳統的form表單

SSM批量添加數據