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 ...
随机推荐
- sql 分页查询 （每次6行 ）
-- 对比 数据 是否 相同 select * from [dbo].[ProjecrInfo] where Project_state='已审核' -- 查询 已经 审核 有多少数据 -- 每次 ...
- 构建之法个人作业5——alpha2项目测试
[相关信息] Q A 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/ 这个作业要求在 ...
- Elasticsearch下载安装
本文链接:https://blog.csdn.net/yjclsx/article/details/81302041注:Elasticsearch 需要 Java 8 环境,在安装Elasticsea ...
- MyBatis-09-Lombok
9.Lombok Project Lombok is a java library that automatically plugs into your editor and build tools, ...
- 修改 SQL SERVER 2008 編輯前200筆 資料表問題？ 转载自：http://www.dotblogs.com.tw/easy1201/archive/2008/12/04/6179.aspx
小弟前幾天 下載安裝了 SQL SERVER 2008 感覺系統效能還不錯 但是要編輯 資料表卻出現 很苦惱 但經過一番波折 終於了解如何改善 先執行SQL Server Management Stu ...
- 灵活部署django缓存，并使用
使用django内置的redis=============>pip3 install django-redisCACHES = { 'default':{ 'BACKEND':'django_r ...
- ACM-ICPC 2016 大连赛区现场赛 K. Guess the number && HDU 5981（思维+DP）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5981 题意:A在[L, R]之间随机选取一个数X,之后B来猜这个数,如果猜的数比X小,那么A就告诉B猜 ...
- libev+TCP服务器事件轮询实例demo
#include <stdio.h> #include <netinet/in.h> #include <arpa/inet.h> #include <std ...
- keras计算指定层的输出
import keras model = keras.models.Sequential([ keras.layers.Dense(4, activation='relu', input_dim=1, ...
- JavaScript三元运算符
㈠条件运算符也叫做三元运算符 ⑴语法:条件表达式?语句1:语句2: ⑵执行的流程: ①条件运算符在执行时,首先对条件表达式进行求值 ▶如果该值为true,则执行语句1,并返回执行结果 ▶如果该值为fa ...