ssm+ajax批量新增
2018-06-18 00:44:10来源:未知 阅读 ()
- 新手码农一个,主要用于代码的记录方便代码的复用性(自用)
- 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>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:mybatis逆向工程生成代码
- RedisTemplate实现消息队列并且批量插入数据。 2020-05-22
- Elasticsearch bulk 批量操作文档 2020-04-18
- 腾讯发布 2019 年研发报告:新增 12.9 亿行代码,74% 技术 L 2020-03-14
- Jedis客户端以及redis中的pipeline批量操作 2020-02-24
- 蓝奏云批量下载工具的实现思路笔记 2020-01-19
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash