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>

SSM批量添加数据的更多相关文章

EF批量添加数据性能慢的问题的解决方案
//EF批量添加数据性能慢的问题的解决方案 public ActionResult BatchAdd() { using (var db = new ToneRoad.CEA.DbContext.Db ...
.Net中批量添加数据的几种实现方法比较
在.Net中经常会遇到批量添加数据,如将Excel中的数据导入数据库,直接在DataGridView控件中添加数据再保存到数据库等等. 方法一:一条一条循环添加通常我们的第一反应是采用for或for ...
ThinkPHP批量添加数据和getField()示例
批量添加数据 // 批量添加数据 $User = M('users'); $dataList[] = array('name'=>'thinkphp','email'=>'thinkphp ...
thinkphp3.2 批量添加数据
这是我遇到的thinkphp3.2 当中最让我无语的坑批量添加数据有个方法是 addAll() 这个方法一定要注意数组的键名,一定要整齐!!! 可以在存入数据前,用ksort()方法将数组的键名排序 ...
spring boot之使用通用Mapper批量添加数据
通用Mapper是一款针对mybatis进行扩展的轻量级组件,使用起来非常方便.当调用其针对mysql进行批量添加数据的方法时,发现报错,仔细研究了一番,发现是在使用通用Mapper上出现了问题.下面 ...
Yii2如何批量添加数据
批量添加这个操作,在实际开发中经常用得到,今天小编抽空给大家整理些有关yii2批量添加的问题,感兴趣的朋友一起看看吧. 在上篇文章给大家介绍了关于浅析Yii2 gridview实现批量删除教程,当然, ...
ADO.NET- 中批量添加数据的几种实现方法比较
在.Net中经常会遇到批量添加数据,如将Excel中的数据导入数据库,直接在DataGridView控件中添加数据再保存到数据库等等. 方法一:一条一条循环添加通常我们的第一反应是采用for或for ...
Java使用Mysql数据库实现批量添加数据
EmployeeDao.java //批处理添加数据 public int saveEmploeeBatch(){ int row = 0; try{ con = DBCon.getConn(); S ...
java操作elasticsearch实现批量添加数据（bulk）
java操作elasticsearch实现批量添加主要使用了bulk 代码如下: //bulk批量操作(批量添加) @Test public void test7() throws IOExcepti ...

随机推荐

NORDIC 错误文件
ble_err.h sdk_errors.h nrf_error.h app_error.h
winfrom 自动关闭重新MessageBox.Show("Test");
复制代码自动关闭调用 AutoClosingMessageBox.Show("添加失败", "提示", 1000); #region alert p ...
ContextMenu菜单创建上下文菜单的基本认识q
MainActivity.class public class MainActivity extends AppCompatActivity { @Override protected void on ...
记一次idea后台日志乱码解决办法
mysql——数据库存储引擎
MyISAM INNODB myISAM.innodb.memory MyISAM对事务要求不高,以查询和添加为主,考虑使用. 如bbs中的发帖表,回复表: INNODB存储引擎对事务要求高,保存的 ...
踏步-java工具类
/** * @Title:removeDuplicate * @author:踏步 * @date:2019年5月23日下午2:31:40 * @Description:TODO 去除list的重复 ...
获取DataFrame列名的3种方法
df= pd.DataFrame({'a': range(10, 20), 'b': range(20, 30)}) df 1.链表推倒式 [column for column in df][a,b] ...
在laravel5.8中集成swoole组件----用协程实现的服务端和客户端(二)---静态文件如何部署
目前,较为成熟的技术是采用laravelS组件,注意和laravel 区别laravelS多了一个大写的S,由于laravelS默认监听5200端口,所以laravel项目要做一些调整例如: 静态文 ...
ACM-ICPC 2018 南京赛区网络预赛 K. The Great Nim Game（博弈）
题目链接:https://nanti.jisuanke.com/t/31000 题意:有N堆石子(N为大数),每堆的个数按一定方式生成,问先手取若干堆进行尼姆博弈,必胜的方式有多少种. 题解:因为 k ...
BZOJ 3435 / Luogu 3920 [WC2014]紫荆花之恋 (替罪羊树动态点分治套 Treap)
题意略分析引用PoPoQQQ的话吾辈有生之年终于把这道题切了...QAQ (蒟蒻狂笑) Orz PoPoQQQ,我又抄PoPoQQQ的题解了 - 突然发现有旋Treap没那么难写学习了一波C ...

SSM批量添加数据

SSM批量添加数据的更多相关文章

随机推荐

热门专题