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 ...
随机推荐
- Oralce问题之Oracle ORA-28001:某用户密码过期
解决办法: (1).通过CMD打开命令行窗口,以sysdba连接数据库 SqlPlus / as sysdba (2).通过查询dba_user检查哪些用户过期 Sql>Select UserN ...
- Oralce问题之ORA-12560:TNS协议适配器错误
在Windows系统中,通过CMD命令打开命令窗口,通过命令:sqlplus / as sysdba回车后提示 协议适配器错误 可能原因: (1).Oralce数据库监听服务没启动起来 通过开始-&g ...
- E - GCD HDU - 2588
The greatest common divisor GCD(a,b) of two positive integers a and b,sometimes written (a,b),is the ...
- python+selenium之——pip环境变量配置
将pip的路径……\Python37-32\Scripts添加进Path: 而非……\Python37-32\Lib\site-packages\pip-18.1-py3.7.egg
- C++踩坑记录（一）std:;string的析构
之前写服务端程序有一个往消息队列里面推json的过程,然后发现推进去C#端取到的无论如何都是个空指针 简单复现一下现场 string str1 = string("hello1") ...
- 服务器上的UID按钮
定位用的,比如你机柜上有很多台机器,你在前面按下UID灯,机器后面也有一个UID灯会亮起来,这样当你到后面去的时候你就知道刚才在前面看的是哪一台,另外,有人通过ILO远程端口连接到你的服务器的时候,U ...
- ActiveMQ部署和代码尝试(二)
部署和代码尝试 1. 部署在linux 上的acvtiveMQ 要可以通过前台windows 的页面访问,必须把linux 的IP和 windows的 IP 地址配置到同一个网关下 .这种情况一般都是 ...
- Java web中不同浏览器间导出Excel文件名称乱码问题解决方案
问题描述: 对于不同浏览器存在对中文编码格式问题,从而在导出Excel文件时,中文文件名出现乱码的情况,即在程序中给要导出的文件指定一个中文名字时,在浏览器上出现的下载框中的文件名出现了乱码,解决如下 ...
- flutter flutter_cupertino_date_picker 时间插件的用法
https://blog.csdn.net/sinat_37255207/article/details/100041023 https://github.com/wuzhendev/flutter- ...
- 【Android-PopupMenu控件】 自定义标题栏+PopupMenu菜单
效果图 1.布局文件 layout_main.xml 中间标题栏,左右各一个按钮. <LinearLayout xmlns:android="http://schemas.androi ...