SSM批量添加数据

Posted 2021-01-16 dzcici

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SSM批量添加数据相关的知识，希望对你有一定的参考价值。

如何应对面临批量数据时如何提交给后台

技术分享图片

方式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批量添加数据的主要内容，如果未能解决你的问题，请参考以下文章

基于SSM+Jquery+ajax实现批量删除功能

Ajax-SSM第四课车型管理系统-全选反选批量删除功能

SSM项目实现Excel数据批量导入 #私藏项目实操分享#

如何从选项卡片段中的 AsyncTask Resftful WS 加载批量数据

mybatis的批量更新实例