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 ...
随机推荐
- Google 停止推出 Chrome 79
据 Google 方面表示,新版本的使用率达到了整个用户群的 50% 已经.不过值得注意的是,并非所有提供该更新的设备都已安装了该工具.初步数据显示,只有 10% 的人部署了新版本. 针对用户反馈,开 ...
- Centos7 docker、harbor 安装配置
Docker 安装 wget -O /etc/yum.repos.d/epel.repo http://mirrors.cloud.tencent.com/repo/epel-7.repo wget ...
- 牛客练习赛53 D 德育分博弈政治课 （思维建图，最大流）
牛客练习赛53 D德育分博弈政治课 链接:https://ac.nowcoder.com/acm/contest/1114/D来源:牛客网 题目描述 德育分学长最近玩起了骰子.他玩的骰子不同,他的骰子 ...
- BZOJ 1093 强连通缩点+DAG拓扑DP
缩点后在一个DAG上求最长点权链 和方案数 注意转移条件和转移状态 if (nowmaxn[x] > nowmaxn[v]) { ans[v] = ans[x]; nowmaxn[v] = no ...
- sessionStorage 与 localStorage 重新认识？
之前写过一次关于 js存储的总结,但是今天在项目中遇到一个bug让我重新在认识 sessionStorage 与 localStorage.以下的介绍都是基于同源下进行的,仔细看下面的案例: a.ht ...
- python: json模块 --JSON编码和解码
json 源代码: Lib/json/__init__.py json.dump() import json numbers = [1, 2, 3, 4] with open('linshi.py', ...
- mpvue打小程序预览码
喂,快给我打一个小程序预览码 前端大全 昨天 (点击上方公众号,可快速关注) 来源:写Bug segmentfault.com/a/1190000015336845 需求 开发小程序的朋友们随时都会听 ...
- JS 字符串转字节截取
/* * param str 要截取的字符串 * param L 要截取的字节长度,注意是字节不是字符,一个汉字两个字节 * return 截取后的字符串 */ function CutStr(str ...
- Mariadb多实例启动脚本
#!/bin/bash port=3306 mysql_user="root" mysql_pwd="centos" cmd_path="/app/m ...
- Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '/usr/local/bin/tensorboard'
使用pip install --user tensorflow-serving-api命令即可