ssm+ajax批量新增基于aceAdmin

  • 新手码农一个,主要用于代码的记录方便代码的复用性(自用)
  • HTML(全部要上传其实主要看js)
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="${ctx}">
<!-- 下拉框 -->
<link rel="stylesheet" href="static/ace/css/chosen.css" />
<!-- jsp文件头和头部 -->
<%@ include file="../top.jsp"%>
<!-- 日期框 -->
<link rel="stylesheet" href="static/ace/css/datepicker.css" />
</head>
<body class="no-skin">

    <!-- /section:basics/navbar.layout -->
    <div class="main-container" id="main-container" style="height: 450px;overflow: scroll;">
        <!-- /section:basics/sidebar -->
        <div class="main-content">
            <div class="main-content-inner">
                <div class="page-content">
                    <div class="row">
                        <div class="col-xs-12">
                        <!-- 检索  -->
                        <form  method="post" name="userForm" id="userForm">
                        <table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-top:5px;">
                            <thead>
                                <tr>
                                    <th class="center">选择</th>
                                    <th class="center" style="width:50px;">序号</th>
                                    <th class="center">设备编号</th>
                                    <th class="center">设备名称</th>
                                    <th class="center">IMEI</th>
                                    <th class="center">播放地址</th>
                                    <th class="center" style="width:180px;">入库日期</th>
                                </tr>
                            </thead>
                            <tbody>
                            <!-- 开始循环 -->    
                                <c:choose>
                                    <c:when test="${not empty pList}">
                                        <c:forEach items="${pList}" var="user" varStatus="vs">
                                            <tr>
                                                <td><input type="checkbox" value="${user.device_code }" id="checked" name="check"></td>
                                                <td class='center' style="width: 30px;">${vs.index+1}</td>
                                                <td class="center">${user.device_code }</td>
                                                <td class="center">${user.device_name}</td>
                                                <td class="center">${user.device_imei }</td>
                                                <td class="center">${user.device_url}</td>
                                                <td class="center">${user.device_date}</td>
                                            </tr>
                                        </c:forEach>
                                    </c:when>
                                    <c:otherwise>
                                        <tr class="main_info">
                                            <td colspan="100" class="center" >没有相关数据</td>
                                        </tr>
                                    </c:otherwise>
                                </c:choose>
                            </tbody>
                        </table>                    
                        </form>
                         </div>
                         
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                
                <!-- /.page-content -->
            </div>
        </div>
        <!-- /.main-content -->
        <!-- 返回顶部 -->
        <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
            <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
        </a>
    </div>
                                                    
                        <div>
                        <table style="width:100%;">
                            <tr>
                                <td style="vertical-align:top;">
                                <div style="float: right;padding-top: 0px;margin-top: 0px;">
                    <button type="button" class="btn btn-danger" onclick="addPersionDevice();" style="margin-right: 15px">确定</button>
                    <button type="button" onclick="top.Dialog.close();" style="margin-right: 2px" class="btn" >取消</button>
                                </div>
                                </td>
                            </tr>
                        </table>
                        </div>
    <!-- /.main-container -->
    <!-- basic scripts -->
    <!-- 页面底部js¨ -->
    <%@ include file="../foot.jsp"%>
    <!-- 删除时确认窗口 -->
    <script src="static/ace/js/bootbox.js"></script>
    <!-- ace scripts -->
    <script src="static/ace/js/ace/ace.js"></script>
    <!-- 日期框 -->
    <script src="static/ace/js/date-time/bootstrap-datepicker.js"></script>
    <!-- 下拉框 -->
    <script src="static/ace/js/chosen.jquery.js"></script>
    <!--提示框-->
    <script type="text/javascript" src="static/js/jquery.tips.js"></script>
    </body>
     <script type="text/javascript">
        function addPersionDevice() {
            var empObjList=[];
            var cks=document.getElementsByName("check");
            var persionId = ${persion_id_card};
            for (var i = 0; i < cks.length; i++) {
                if (cks[i].checked) {
                    var code = cks[i].value;
                    var emp = {
                            "persion_id_card" : persionId,
                            "device_code" : code,
                    };
                  empObjList.push(emp);
                }
            } 
            $.ajax({
                url:"<%=request.getContextPath()%>/persion/toaddPersionDevice.do",
                contentType : 'application/json',//指定为json类型  
                type:"post",
                dataType:"text",
                data:JSON.stringify(empObjList),
                traditional: true,
                success:function(){
                    //关闭弹出框
                    alert("走successs了!");
                    top.Dialog.close();
                },
                error:function(){
                    top.Dialog.close();
                }
            })
        }
        


        </script>
</html>
  • controller
    /**
     * 
        * @Title: addPersionDevice  
        * @Description: TODO(人员新增设备)  
        * @param @param uPersionDevice    参数  
        * @return void    返回类型  
        * @throws
     */
    @RequestMapping(value = "/toaddPersionDevice")
    public void toaddPersionDevice(@RequestBody ArrayList<UPersionDevice> uPersionDevice) {
        try {
            uPersionDeviceService.toaddPersionDevice(uPersionDevice);
            System.out.println("人员新增设备成功!");
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
  • mapper文件
    <!-- 批量新增 -->
    <insert id="toaddPersionDevice" parameterType="java.util.List">
        insert into
        u_persion_device(persion_id_card,device_code)
        values
        <foreach collection="list" item="item" index="index" separator="," >
        (#{item.persion_id_card},#{item.device_code})
        </foreach>
    </insert>

猜你喜欢

转载自www.cnblogs.com/ITzhangda/p/9100184.html