var MaterialManager = {}; $(document).ready(function() { MaterialManager.query = function(){ $('#outMaterialTable').bootstrapTable('destroy'); //初始化表格,动态从服务器加载数据 $("#outMaterialTable").bootstrapTable({ url:'../../supManage/material/queryOutMaterialList.do', method: "get", //使用get请求到服务器获取数据 contentType: "application/x-www-form-urlencoded", striped: true, //表格显示条纹 pageSize: 10, //每页显示的记录数 pageNumber:1, //当前第几页 pageList: [5, 10, 15, 20, 25], //记录数可选列表 sidePagination: "server", //表示服务端请求 //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder //设置为limit可以获取limit, offset, search, sort, order queryParamsType : "undefined", queryParams: function queryParams(params) { //设置查询参数 var param = { currentPage: params.pageNumber, recordsPerPage: params.pageSize, mId:$("#id").val() }; return param; } }); }; MaterialManager.query(); $("#saveOutMaterialBtn").click(function(){ $("#loadingModal").modal('show'); $("#myModal").modal('hide'); $.ajax({ type: "POST", url: "../../supManage/material/saveOutMaterial.do", data:$("#outMaterialForm").serialize(), dataType: "json", success: function(data){ $("#loadingModal").modal('hide'); $("#alertModal").modal('show'); MaterialManager.query(); setInterval(function(){$("#alertModal").modal('hide');},2000); } }); }); // 出库按钮 $("#outQuantityBtn").click(function(){ $("#myModal").modal('show'); }); $('#outDate').datetimepicker({ format: 'yyyy-mm-dd hh:ii:ss', language:'zh-CN', autoclose:true, startDate:'2016-09-01', endDate:'2025-12-12' }); $(".quantity-add").click(function(e){ //Vars var count = 1; var newcount = 0; //Wert holen + Rechnen var elemID = $(this).parent().attr("id"); var countField = $("#"+elemID+'inp'); var count = $("#"+elemID+'inp').val(); var newcount = parseInt(count) + 1; //Neuen Wert setzen $("#"+elemID+'inp').val(newcount); }); //Remove $(".quantity-remove").click(function(e){ //Vars var count = 1; var newcount = 0; //Wert holen + Rechnen var elemID = $(this).parent().attr("id"); var countField = $("#"+elemID+'inp'); var count = $("#"+elemID+'inp').val(); var newcount = parseInt(count) - 1; //Neuen Wert setzen $("#"+elemID+'inp').val(newcount); }); });
5 , 添加页面
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags/form" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@page import="com.base.project.wechat.m500point.dto.PointQualitySecurityDto" %> <%@page import="com.base.pf.base.util.StringUtils" %> <html> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"https://www.jb51.net/"; %> <head> <meta content="user-scalable=no, width=device-width, initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link href="https://www.jb51.net/<%=basePath%>/page/pf/base/bootstrap/table/bootstrap-table.css"/> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/js/point_quality_security.js"></script> <title>安全/质量填报</title> </head> <style type="text/css"> .file { position: relative; display: inline-block; /* background: #D0EEFF; */ /* border: 1px solid #99D3F5; */ /* border-radius: 4px; */ /* padding: 4px 12px; */ overflow: hidden; /* color: #1E88C7; */ text-decoration: none; text-indent: 0; /* line-height: 20px; */ } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } .file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; } </style> <%PointQualitySecurityDto pDto = ((PointQualitySecurityDto)request.getAttribute("pointQualitySecurityDto")); %> <body> <h4>安全/质量填报</h4> <spring:form modelAttribute="pointQualitySecurityDto" action="save.do" method="post" enctype="multipart/form-data" > <input type="hidden" value="${pointQualitySecurityDto.pId }"/> <input type="hidden" value="${pointQualitySecurityDto.sId }"/> <input type="hidden" value="${pointQualitySecurityDto.qId }"/> <input type="hidden" value="${pointQualitySecurityDto.pointProject }"/> <input type="hidden" value="${pointQualitySecurityDto.recordPerson }"/> <input type="hidden" value="${pointQualitySecurityDto.recordDate }"/> <spring:hidden path="scrollTop"/> <spring:hidden path="isSave"/> <input type="hidden"/> <table> <thead> <tr> <th data-field="name" data-halign="center" valign="middle">工程部位（工点）</th> <th data-field="qrcode" data-halign="center" valign="middle">检查人</th> <th data-field="url" data-halign="center">检查时间</th> </tr> </thead> <tbody> <tr> <td>${pointQualitySecurityDto.pointProject }</td> <td>${pointQualitySecurityDto.recordPerson }</td> <td>${pointQualitySecurityDto.recordDate }</td> </tr> </tbody> </table> <table data-pagination="false" data-search="false" data-show-refresh="false" data-toggle="card" data-card-view = "true" data-show-toggle="false" data-show-columns="false" data-page-list="[10,20,50,100]"> <caption>安全</caption> <thead> <thead> <tr> <th data-field="" data-halign="center">检查项目</th> <th data-field="" data-halign="center">实际得分</th> <th data-field="" data-halign="center">是否合格</th> <th data-field="" data-halign="center">附件</th> </tr> </thead> <tbody> <tr> <td>安全施工 </td> <td> <spring:input path="sSecurityScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsSSecurity())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsSSecurity())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sSecurityFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'sSecurityFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsSecurityFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>文明施工</td> <td> <spring:input path="sCiviliztionScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsSCiviliztion())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsSCiviliztion())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sCiviliztionFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'sCiviliztionFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsCiviliztionFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>脚手架</td> <td> <spring:input path="sScaffoldScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsSScaffold())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsSScaffold())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sScaffoldFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'sScaffoldFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsScaffoldFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>基坑支撑</td> <td> <spring:input path="sFounationScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsSFounation())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsSFounation())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sFounationFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'sFounationFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsFounationFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>外用电梯</td> <td> <spring:input path="sLiftScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsSLift())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsSLift())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sLiftFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'sLiftFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsLiftFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>施工用电</td> <td> <spring:input path="sElectricityScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsSElectricity())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsSElectricity())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sElectricityFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'sElectricityFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsElectricityFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>施工机械</td> <td> <spring:input path="sMachineryScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsSSecurity())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsSSecurity())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sMachineryFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'sMachineryFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsMachineryFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> </tbody> </table> <table data-pagination="false" data-search="false" data-show-refresh="false" data-toggle="card" data-card-view = "true" data-show-toggle="false" data-show-columns="false" data-page-list="[10,20,50,100]"> <caption>质量</caption> <thead> <thead> <tr> <th data-field="" data-halign="center">检查项目</th> <th data-field="" data-halign="center">实际得分</th> <th data-field="" data-halign="center">是否合格</th> <th data-field="" data-halign="center">拍照</th> </tr> </thead> <tbody> <tr> <td>石灰质量</td> <td> <spring:input path="qLimeScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsQLime())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsQLime())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qLimeFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'qLimeFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqLimeFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>水泥质量</td> <td> <spring:input path="qCementScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsQCement())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsQCement())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qCementFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'qCementFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqCementFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>桩的数量<br>、类型、<br>布置形式</td> <td> <spring:input path="qPileCountScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsQPileCount())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsQPileCount())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qPileCountFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'qPileCountFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqPileCountFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>材料的配<br>合比例</td> <td> <spring:input path="qFillingScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsQFilling())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsQFilling())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qFillingFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'qFillingFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqFillingFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>施工工艺</td> <td> <spring:input path="qTechnologyScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsQTechnology())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsQTechnology())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qTechnologyFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'qTechnologyFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqTechnologyFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>桩的密实<br>度</td> <td> <spring:input path="qPileDensityScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsQPileDensity())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsQPileDensity())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qPileDensityFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'qPileDensityFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqPileDensityFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>地基承载<br>力</td> <td> <spring:input path="qBearingScore"/> </td> <td> <input type="radio" value="1" <%if("1".equals(pDto.getIsQBearing())){ %>checked<%} %>>是 <input type="radio" value="0" <%if("0".equals(pDto.getIsQBearing())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qBearingFileName } --%> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" accept="image/*" onchange="changeFile(this,'qBearingFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqBearingFileName())){ %> <a href="javascript:void(0);"><img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> </tbody> </table> <div> <button type="button">保存</button> </div> <div> </div> </spring:form> <!-- <button data-toggle="modal" data-target="#myModal"> --> <!-- 开始演示模态框 --> <!-- </button> --> <!-- 模态框（Modal） --> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <!-- <button type="button" data-dismiss="modal" aria-hidden="true"> --> <!-- × --> <!-- </button> --> <!-- <h4> --> <!-- 图片<img alt="" src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"> --> <!-- </h4><br> --> <button type="button" data-dismiss="modal">关闭 </button> </div> <div> <a href="#"> <img src="" alt=""> </a> </div> <div> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> </div> <div> <a href="#"> 图片正在上传，请稍后... <!-- <img src="https://imgsrc.baidu.com/forum/w%3D580/sign=203354c7a864034f0fcdc20e9fc27980/1a52738da9773912d8d31f7bfb198618377ae281.jpg"> --> </a> </div> <div> </div> </div> </div> </div> </body> </html> <script type="text/javascript"> window.scrollTo(1,'${pointQualitySecurityDto.scrollTop}'); // setTimeout("$('#loadingModal').modal('hide');",1000); //选择文件; 图片上传 function changeFile(obj,name){ $("#loadingModal").modal('show'); var scrollTop = document.body.scrollTop; $("#scrollTop").val(scrollTop); $("#uploadCategory").val(name); $("#defaultForm").submit(); } // 保存 function saveForm(){ $("#isSave").val("yes"); $("#defaultForm").submit(); } function showPicture(attenchmentId){ if(!attenchmentId) return; $("#modelPicture").attr("src","../../attachment/displayjpg.do?attenchmentId="+attenchmentId); $("#myModal").modal('show'); } </script>
6. 查看页面