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 ...
随机推荐
- storm 的分组策略深入理解（-）
目录 storm的分组策略 根据实例来分析分组策略 common配置: Shuffle grouping shuffle grouping的实例代码 ShuffleGrouping 样例分析 Fiel ...
- C#信号量（Semaphore，SemaphoreSlim）
Object->MarshalByRefObject->WaitHandle->Semaphore 1.作用: 多线程环境下,可以控制线程的并发数量来限制对资源的访问 2.举例: S ...
- solr 中文分词相关（转载）
smartcn和ik的对比,来自http://www.cnblogs.com/hadoopdev/p/3465556.html 一.引言: 年的时候,就曾经有项目涉及到相关的应用(Lunce构建全文搜 ...
- 模块化开发之Amd规范和Cmd规范
CMD规范:是SeaJS 在推广过程中对模块定义的规范化产出的. AMD规范:是 RequireJS 在推广过程中对模块定义的规范化产出的 // CMD define(function(require ...
- Codeforces Good Bye 2017 908F F. New Year and Rainbow Roads
题 OvO http://codeforces.com/contest/908/problem/F CF 908F 解 需要注意细节的模拟题. 如果三种颜色都存在,则记每两个相邻的G组成一个段,对每个 ...
- JavaScript变量、作用域和内存问题总结
㈠理解基本类型和引用类型的值 ⑴JavaScript变量可以用来保存两种类型的值:基本类型值和引用类型值. ⑵基本类型的值源自以下 5 种基本数据类型:Undefined.Null.Boolean. ...
- Java数据库小项目01--实现用户登录注册
先实现数据库和数据表,检测正常后再做其他的 CREATE TABLE users( username ) NOT NULL, PASSWORD ) NOT NULL); INSERT INTO use ...
- react须知
1. JSX是什么? 1)JSX是一种facebook发明的语法.就是将HTML和JS 可以同时书写.其实是一种js的语法糖. 但是浏览器不能识别,需要通过babel-loader来转译. @babe ...
- learning armbian steps(6) ----- armbian 源码分析（一）
为了深入学习armbian,前面已经学习了如何手动构建arm ubuntu rootfs. 由于armbian官方的文档比较的匮乏,所以最终还是决定通过其编译的过程来深入地学习. 为了快速度深入地学习 ...
- IntelliJ 如何显示代码的代码 docs
希望能够在 IntelliJ 代码上面显示方法的 docs. 如何进行显示? 你可以使用 Ctrl + Q 这个快捷键来查看方法的 Docs. https://blog.ossez.com/archi ...