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表单

此时使用form表单的话如有多个tr的批量数据

后台的话就需要借助一定集合类来实现了

 

package com.dz147.entity;

import java.util.List;

public class EmpList {
    public List<Employee> addEmp;


    @Override
    public String toString() {
        return "EmpList{" +
                "addEmp=" + addEmp +
                '}';
    }

    public List<Employee> getAddEmp() {
        return addEmp;
    }

    public void setAddEmp(List<Employee> addEmp) {
        this.addEmp = addEmp;
    }
}

 

里面是个员工集合字段做为存储批量数据的作用

通过form表单POST方法提交到controller

方法第二参数为集合类对象

 @RequestMapping(value = "/empAdd", method = RequestMethod.POST)
    public String empAdd(Model model,EmpList empList){
        for (Employee emp:empList.addEmp) {
            employeeMapper.insert(emp);
        }
        return "redirect:/emp";
    }

通过对象得到List集合对象

循环取出单个对象再往数据库添加

前端如何实现对集合对象赋值呢

表单的name 通过addEmp[0].id(通过存储对象[0]表示第一个对象点某个字段)

EmpList 类相当于中转站一样存储对象。
<%@ 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">
        table tr{
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        table tr:hover{
            background-color: #F8F8F8;
        }
    </style>
</head>
<body>
<form action="/empAdd" method="post">
    <table border="0px" align="center" width="60%" bordercolor="#E2E2E2" id="emps_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="addEmp[0].number"/></td>
            <td><input type="text" name="addEmp[0].empName"/></td>
            <td>
                <select name="addEmp[0].empSex">
                <option>请选择</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </td>
            <td>
                <select name="addEmp[0].education">
                    <option>请选择</option>
                    <option value="本科">本科</option>
                    <option value="专科">专科</option>
                    <option value="硕士">硕士</option>
                    <option value="博士">博士</option>
                </select>
            </td>
            <td><input type="number" name="addEmp[0].monthly"/></td>
            <td><input type="button" value="+" onclick="add()"/></td>
            <td><input type="button" value="-"/></td>
        </tr>
        </tbody>
    </table>
    <input type="submit" value="批量添加" style="display: block;width: 100px;height: 40px; margin: 0 auto" />
</form>
<table 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-1.12.3.min.js"></script>
<script type="text/javascript">

    /*数组*/

    var i=0;
    function add(){
        i++;
        var t="<tr><td><input type='text' name='addEmp["+i+"].number'/>" +
            "</td><td><input type='text' name='addEmp["+i+"].empName'/>" +
            "</td><td><select name='addEmp["+i+"].empSex'><option value='本科'>请选择</option>" +
            "<option value='男'>男</option>" +
            "<option value='女'>女</option></select></td>" +
            "<td><select name='addEmp["+i+"].education'> <option value='本科'>请选择</option>" +
            "<option value='专科'>专科</option>" +
            "<option value='硕士'>硕士</option>" +
            "<option value='博士'>博士</option></select></td>" +
            "<td><input type='number' name='addEmp["+i+"].monthly'/></td>" +
            "<td><input type='button' value='+' onclick='add()'/></td>" +
            "<td><input type='button' value='-' onclick='rem(this)'/></td></tr>";
        var table=document.getElementById("emps_table").innerHTML;
        table+=t;
        document.getElementById("emps_table").innerHTML=table;
    }
    function rem(obj){
        if (i>0){
            i--;
            obj.parentElement.parentElement.remove();
        } else{
            alert("不能再移除了！")
        }
    }
</script>
</html>

 

 

posted on 2018-10-29 16:28  东子z  阅读(5390)  评论(0)  编辑  收藏  举报

导航