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 ...
随机推荐
- python异步编程 （转载）
Python Async/Await入门指南 转自:https://zhuanlan.zhihu.com/p/27258289 本文将会讲述Python 3.5之后出现的async/await的使 ...
- C# 对象遍历 string类型 null转空字符串和去前后空格
using System; using System.Collections.Generic; namespace OA.Common.Extensions { /// <summary> ...
- redis和memcacahe、mongoDB的区别
都是非关系型数据库,性能都非常高,但是mongoDB和memcache.redis是不同的两种类型.后两者主要用于数据的缓存,前者主要用在查询和储存大数据方面,是最接近数据库的文档型的非关系数据库. ...
- nginx解决浏览器跨域问题
1.跨域问题 浏览器出于安全方面的考虑,只允许与本域下的接口交互.不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源. 例如访问www.test1.com 页面, 返回的文件中需要ajax向 ...
- Linux系统上对其他用户隐藏进程的简单方法
mount -o remount,rw,hidepid=2 /proc 我使用的是多用户系统,大部分的用户通过ssh客户端访问他们的资源.我如何(怎么样)避免泄露进程信息给他们?如何(怎么样)在Deb ...
- Codeforces 1187 G - Gang Up
G - Gang Up 思路: 每个点按时间拆点建边,然后跑最小费用流 一次走的人不能太多,假设每次走的人为k (k*k-(k-1)*(k-1))*d <= c+d k <= 24 代码: ...
- springboot2.0入门（五）--swagger2接口API构建
一.特点 代码变,文档变.只需要少量的注解,Swagger 就可以根据代码自动生成 API 文档,很好的保证了文档的时效性. 跨语言性,支持 40 多种语言. Swagger UI 呈现出来的是一份可 ...
- Python JSON Ⅱ
json.loads json.loads 用于解码 JSON 数据.该函数返回 Python 字段的数据类型. 语法 实例 以下实例展示了Python 如何解码 JSON 对象: 以上代码执行结果为 ...
- Python基础--01小项目体现的基础知识
part1:猜拳游戏 #coding=utf-8 #当有汉语时可能编译器不认识,需要定义代码 ''' 多行注释 写这个程序是为了熟悉python的基本语法 这是第一个小例子包含简单的if判断,循环和输 ...
- BZOJ 2834: 回家的路 Dijkstra
按照横,竖为方向跑一个最短路即可,算是水题~ #include <bits/stdc++.h> #define N 200005 #define E 2000000 #define set ...