碼上快樂

相關內容    簡體    繁體

SSM批量添加數據

本文轉載自   查看原文   2018-10-29 16:28   3301    spring mvc/ 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>

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ABP 批量添加數據 EF 批量添加數據 Mysql批量添加數據 es 批量添加數據 Thinkphp批量添加數據 PHP批量添加數據 MySQL批量添加數據腳本 laravel實現批量添加數據 java批量添加數據到elasticsearch SQL批量添加數據略談(更新)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM