1. 行长度：
<div> </div>
2.modal
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4 id="myModalLabel">出库信息</h4><br> </div> <div> <spring:form id="outMaterialForm" action="" modelAttribute="outMaterialDto"> <spring:hidden path="mId"/> <div> <label>出库时间：</label> <div> <spring:input path="outDate" readonly="true" placeholder="请选择时间" data-bv-notempty="true" data-bv-notempty-message="不能为空"/> </div> </div> <div> <label>出库数量：</label> <div> <div id="1"> <span> <span></span> </span> <spring:input id="1inp" value="6" path="outQuantity" name="option[]" placeholder="1" /> <span> <span></span> </span> </div> </div> </div> <div> <label>出库人：</label> <div> <spring:input path="outLeader"/> </div> </div> </spring:form> </div> <div> <button type="button" data-dismiss="modal">取消</button> <button type="button" id="saveOutMaterialBtn">保存</button> </div> </div> </div> </div>
3. 事例
<%@ 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" %> <html> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link href="<%=basePath%>/page/pf/base/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <link href="<%=basePath%>/page/pf/base/bootstrap/table/bootstrap-table.css" rel="stylesheet"/> <> <script src="http://www.jb51.net/cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <> <script src="http://www.jb51.net/cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script> <script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.min.js?version=09092200010"></script> <script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.fr.js?version=09092200010"></script> <script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.zh-CN.js?version=09092200010"></script> <style type="text/css"> .quantity-remove, .quantity-add { cursor: pointer; } .quantity-add.glyphicon, .quantity-remove.glyphicon { display: block; cursor: pointer; } </style> <script src="<%=basePath%>/page/project/wechat/m600material/js/material_view.js"></script> <title>物料</title> </head> <body> <h4>详细</h4> <div> <button type="button" id="outQuantityBtn">出库</button> </div> <spring:form id="defaultForm" modelAttribute="materialDto"> <input type="hidden" id="id" value="${materialDto.id }"/> <div> <label>项目名称：</label>${materialDto.projectName } </div> <div> <label>物料名称：</label>${materialDto.name } </div> <div> <label>入库时间：</label>${materialDto.inDate } </div> <div> <label>物料数量：</label>${materialDto.inQuantity } </div> <div> <label>入库负责人：</label>${materialDto.inLeader } </div> <table id="outMaterialTable" 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="outDate" data-halign="center">出库时间：</th> <th data-field="outQuantity" data-halign="center">出库数量：</th> <th data-field="outLeader" data-halign="center">出库人：</th> </tr> </thead> <tbody> </tbody> </table> </spring:form> <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4 id="myModalLabel">出库信息</h4><br> </div> <div> <spring:form id="outMaterialForm" action="" modelAttribute="outMaterialDto"> <spring:hidden path="mId"/> <div> <label>出库时间：</label> <div> <spring:input path="outDate" readonly="true" placeholder="请选择时间" data-bv-notempty="true" data-bv-notempty-message="不能为空"/> </div> </div> <div> <label>出库数量：</label> <div> <div id="1"> <span> <span></span> </span> <spring:input id="1inp" value="6" path="outQuantity" name="option[]" placeholder="1" /> <span> <span></span> </span> </div> </div> </div> <div> <label>出库人：</label> <div> <spring:input path="outLeader"/> </div> </div> </spring:form> </div> <div> <button type="button" data-dismiss="modal">取消</button> <button type="button" id="saveOutMaterialBtn">保存</button> </div> </div> </div> </div> <div id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> </div> <div> <a href="#"> 正在保存，请稍后... </a> </div> <div> </div> </div> </div> </div> <div id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> </div> <div> <a href="#"> 保存成功。 </a> </div> <div> </div> </div> </div> </div> </body> </html>
4. js文件
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+"/"; %> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link href="<%=basePath%>/page/pf/base/bootstrap/table/bootstrap-table.css" rel="stylesheet"/> <> <script src="http://www.jb51.net/cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <> <script src="http://www.jb51.net/cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script> <script type="text/javascript" src="<%=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 id="defaultForm" modelAttribute="pointQualitySecurityDto" action="save.do" method="post" enctype="multipart/form-data" > <input type="hidden" name="pId" value="${pointQualitySecurityDto.pId }"/> <input type="hidden" name="sId" value="${pointQualitySecurityDto.sId }"/> <input type="hidden" name="qId" value="${pointQualitySecurityDto.qId }"/> <input type="hidden" name="pointProject" value="${pointQualitySecurityDto.pointProject }"/> <input type="hidden" name="recordPerson" value="${pointQualitySecurityDto.recordPerson }"/> <input type="hidden" name="recordDate" value="${pointQualitySecurityDto.recordDate }"/> <spring:hidden path="scrollTop"/> <spring:hidden path="isSave"/> <input type="hidden" name="category" id="uploadCategory"/> <table id="formQRCode"> <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" width="100">检查时间</th> </tr> </thead> <tbody> <tr> <td>${pointQualitySecurityDto.pointProject }</td> <td>${pointQualitySecurityDto.recordPerson }</td> <td>${pointQualitySecurityDto.recordDate }</td> </tr> </tbody> </table> <table id="securityTable" 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" name="isSSecurity" value="1" <%if("1".equals(pDto.getIsSSecurity())){ %>checked<%} %>>是 <input type="radio" name="isSSecurity" value="0" <%if("0".equals(pDto.getIsSSecurity())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sSecurityFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="sSecurityFile" accept="image/*" onchange="changeFile(this,'sSecurityFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsSecurityFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isSCiviliztion" value="1" <%if("1".equals(pDto.getIsSCiviliztion())){ %>checked<%} %>>是 <input type="radio" name="isSCiviliztion" value="0" <%if("0".equals(pDto.getIsSCiviliztion())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sCiviliztionFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="sCiviliztionFile" accept="image/*" onchange="changeFile(this,'sCiviliztionFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsCiviliztionFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isSScaffold" value="1" <%if("1".equals(pDto.getIsSScaffold())){ %>checked<%} %>>是 <input type="radio" name="isSScaffold" value="0" <%if("0".equals(pDto.getIsSScaffold())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sScaffoldFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="sScaffoldFile" accept="image/*" onchange="changeFile(this,'sScaffoldFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsScaffoldFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isSFounation" value="1" <%if("1".equals(pDto.getIsSFounation())){ %>checked<%} %>>是 <input type="radio" name="isSFounation" value="0" <%if("0".equals(pDto.getIsSFounation())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sFounationFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="sFounationFile" accept="image/*" onchange="changeFile(this,'sFounationFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsFounationFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isSLift" value="1" <%if("1".equals(pDto.getIsSLift())){ %>checked<%} %>>是 <input type="radio" name="isSLift" value="0" <%if("0".equals(pDto.getIsSLift())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sLiftFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="sLiftFile" accept="image/*" onchange="changeFile(this,'sLiftFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsLiftFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isSElectricity" value="1" <%if("1".equals(pDto.getIsSElectricity())){ %>checked<%} %>>是 <input type="radio" name="isSElectricity" value="0" <%if("0".equals(pDto.getIsSElectricity())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sElectricityFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="sElectricityFile" accept="image/*" onchange="changeFile(this,'sElectricityFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsElectricityFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isSMachinery" value="1" <%if("1".equals(pDto.getIsSSecurity())){ %>checked<%} %>>是 <input type="radio" name="isSMachinery" value="0" <%if("0".equals(pDto.getIsSSecurity())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.sMachineryFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="sMachineryFile" accept="image/*" onchange="changeFile(this,'sMachineryFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getsMachineryFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> </tbody> </table> <table id="qualityTable" 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" name="isQLime" value="1" <%if("1".equals(pDto.getIsQLime())){ %>checked<%} %>>是 <input type="radio" name="isQLime" value="0" <%if("0".equals(pDto.getIsQLime())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qLimeFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="qLimeFile" accept="image/*" onchange="changeFile(this,'qLimeFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqLimeFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isQCement" value="1" <%if("1".equals(pDto.getIsQCement())){ %>checked<%} %>>是 <input type="radio" name="isQCement" value="0" <%if("0".equals(pDto.getIsQCement())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qCementFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="qCementFile" accept="image/*" onchange="changeFile(this,'qCementFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqCementFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isQPileCount" value="1" <%if("1".equals(pDto.getIsQPileCount())){ %>checked<%} %>>是 <input type="radio" name="isQPileCount" value="0" <%if("0".equals(pDto.getIsQPileCount())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qPileCountFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="qPileCountFile" accept="image/*" onchange="changeFile(this,'qPileCountFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqPileCountFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isQFilling" value="1" <%if("1".equals(pDto.getIsQFilling())){ %>checked<%} %>>是 <input type="radio" name="isQFilling" value="0" <%if("0".equals(pDto.getIsQFilling())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qFillingFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="qFillingFile" accept="image/*" onchange="changeFile(this,'qFillingFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqFillingFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isQTechnology" value="1" <%if("1".equals(pDto.getIsQTechnology())){ %>checked<%} %>>是 <input type="radio" name="isQTechnology" value="0" <%if("0".equals(pDto.getIsQTechnology())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qTechnologyFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="qTechnologyFile" accept="image/*" onchange="changeFile(this,'qTechnologyFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqTechnologyFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isQPileDensity" value="1" <%if("1".equals(pDto.getIsQPileDensity())){ %>checked<%} %>>是 <input type="radio" name="isQPileDensity" value="0" <%if("0".equals(pDto.getIsQPileDensity())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qPileDensityFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="qPileDensityFile" accept="image/*" onchange="changeFile(this,'qPileDensityFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqPileDensityFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=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" name="isQBearing" value="1" <%if("1".equals(pDto.getIsQBearing())){ %>checked<%} %>>是 <input type="radio" name="isQBearing" value="0" <%if("0".equals(pDto.getIsQBearing())){ %>checked<%} %>>否 </td> <td> <%-- ${pointQualitySecurityDto.qBearingFileName } --%> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/camera_picture.png"> <input type="file" name="qBearingFile" accept="image/*" onchange="changeFile(this,'qBearingFile');"> </a> <%if(!StringUtils.isEmpty(pDto.getqBearingFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> </tbody> </table> <div> <button type="button">保存</button> </div> <div> </div> </spring:form> <> <> <> <> <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <> <> <> <> <> <> <button type="button" data-dismiss="modal">关闭 </button> </div> <div> <a href="#"> <img id="modelPicture" src="" alt=""> </a> </div> <div> </div> </div><> </div><> </div> <div id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> </div> <div> <a href="#"> 图片正在上传，请稍后... <> </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); $("#myModal").modal('show'); } </script>
6. 查看页面
<%@ 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+"/"; %> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link href="<%=basePath%>/page/pf/base/bootstrap/table/bootstrap-table.css" rel="stylesheet"/> <> <script src="http://www.jb51.net/cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <> <script src="http://www.jb51.net/cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script> <script src="<%=basePath%>/page/project/wechat/m500point/js/point_view.js"></script> <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; } td{ valign: middle } </style> <%PointQualitySecurityDto pDto = ((PointQualitySecurityDto)request.getAttribute("pointQualitySecurityDto")); %> <title>安全/质量填报</title> </head> <body> <h4>安全/质量填报</h4> <spring:form id="defaultForm" modelAttribute="pointQualitySecurityDto" action="save.do" method="post" enctype="multipart/form-data" > <input type="hidden" name="pId" value="${pointQualitySecurityDto.pId }"/> <table id="formQRCode"> <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 id="securityTable" 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>${pointQualitySecurityDto.sSecurityScore } </td> <td>${pointQualitySecurityDto.isSSecurity } </td> <td> <%if(!StringUtils.isEmpty(pDto.getsSecurityFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>文明施工</td> <td>${pointQualitySecurityDto.sCiviliztionScore } </td> <td>${pointQualitySecurityDto.isSCiviliztion } </td> <td> <%if(!StringUtils.isEmpty(pDto.getsCiviliztionFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>脚手架</td> <td>${pointQualitySecurityDto.sScaffoldScore } </td> <td>${pointQualitySecurityDto.isSScaffold } </td> <td> <%if(!StringUtils.isEmpty(pDto.getsScaffoldFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>基坑支撑</td> <td>${pointQualitySecurityDto.sFounationScore } </td> <td>${pointQualitySecurityDto.isSFounation } </td> <td> <%if(!StringUtils.isEmpty(pDto.getsFounationFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>外用电梯</td> <td>${pointQualitySecurityDto.sLiftScore } </td> <td>${pointQualitySecurityDto.isSLift } </td> <td> <%if(!StringUtils.isEmpty(pDto.getsLiftFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>施工用电</td> <td>${pointQualitySecurityDto.sElectricityScore } </td> <td>${pointQualitySecurityDto.isSElectricity } </td> <td> <%if(!StringUtils.isEmpty(pDto.getsElectricityFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>施工机械</td> <td>${pointQualitySecurityDto.sMachineryScore } </td> <td>${pointQualitySecurityDto.isSMachinery } </td> <td> <%if(!StringUtils.isEmpty(pDto.getsMachineryFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> </tbody> </table> <table id="qualityTable" 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>${pointQualitySecurityDto.qLimeScore } </td> <td>${pointQualitySecurityDto.isQLime } </td> <td> <%if(!StringUtils.isEmpty(pDto.getqLimeFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>水泥质量</td> <td>${pointQualitySecurityDto.qCementScore } </td> <td>${pointQualitySecurityDto.isQCement } </td> <td> <%if(!StringUtils.isEmpty(pDto.getqCementFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>桩的数量<br>、类型、<br>布置形式</td> <td>${pointQualitySecurityDto.qPileCountScore } </td> <td>${pointQualitySecurityDto.isQPileCount } </td> <td> <%if(!StringUtils.isEmpty(pDto.getqPileCountFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>材料的配<br>合比例</td> <td>${pointQualitySecurityDto.qFillingScore } </td> <td>${pointQualitySecurityDto.isQFilling } </td> <td> <%if(!StringUtils.isEmpty(pDto.getqFillingFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>施工工艺</td> <td>${pointQualitySecurityDto.qTechnologyScore } </td> <td>${pointQualitySecurityDto.isQTechnology } </td> <td> <%if(!StringUtils.isEmpty(pDto.getqTechnologyFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>桩的密实<br>度</td> <td>${pointQualitySecurityDto.qPileDensityScore } </td> <td>${pointQualitySecurityDto.isQPileDensity } </td> <td> <%if(!StringUtils.isEmpty(pDto.getqPileDensityFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> <tr> <td>地基承载<br>力</td> <td>${pointQualitySecurityDto.qBearingScore } </td> <td>${pointQualitySecurityDto.isQBearing } </td> <td> <%if(!StringUtils.isEmpty(pDto.getqBearingFileName())){ %> <a href="javascript:void(0);"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a> <%} %> </td> </tr> </tbody> </table> <div> </div> </spring:form> <> <> <> <> <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <> <> <> <> <> <> <button type="button" data-dismiss="modal">关闭 </button> </div> <div> <a href="#"> <div id="alertContent"></div> <img id="modelPicture" src="" alt=""> </a> </div> <div> </div> </div><> </div><> </div> </body> </html> <script type="text/javascript"> function showPicture(attenchmentId){ $("#modelPicture").attr("src",""); $("#alertContent").html('<div></div>'); if(!attenchmentId){ $("#alertContent").html('<div>未上传图片。</div>'); setTimeout("$('#myModal').modal('hide');",1000); }else{ $("#modelPicture").attr("src","../../attachment/displayjpg.do"+attenchmentId); } $("#myModal").modal('show'); } </script>
7. 列表页面
<!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" %> <html> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <> <script src="http://www.jb51.net/cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <> <script src="http://www.jb51.net/cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="<%=basePath%>/page/pf/base/bootstrap/table/bootstrap-table.css" rel="stylesheet"/> <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script> <title>质量/安全列表</title> <script type="text/javascript" src="<%=basePath%>/page/project/wechat/m500point/js/point_quality_security_list.js?version=09092200010"></script> </head> <body> <div> <h4>质量/安全列表</h4> <table id="pointQualitySecurityTable" data-pagination="false" data-search="false" data-show-refresh="false" data-toggle="card" data-card-view = "true" data-show-toggle="false" data-show-columns="true"> <input type="hidden" id="pId" value="${pointQualitySecurityDto.pId }"/> <thead> <tr> <th data-field="pointProject" data-halign="center" >工程部位（工点）：</th> <th data-field="recordPerson" data-halign="center">记录人：</th> <th data-field="recordDate" data-halign="center">记录时间：</th> <th data-field="checkType" data-halign="center">检查类型：</th> <th data-field="sId" data-visible="false"> <th data-field="qId" data-visible="false"> <th data-field="ck" data-halign="center" data-formatter="showDetail">详细：</th> </tr> </thead> <tbody> </tbody> </table> </div> </body> </html> function initTable() { // 先销毁表格 // $('#cusTable').bootstrapTable('destroy'); // 初始化表格,动态从服务器加载数据 $("#pointQualitySecurityTable").bootstrapTable({ method : "get", // 使用get请求到服务器获取数据 url : "queryQualitySecurityList.do", // 获取数据的Servlet地址 contentType: "application/x-www-form-urlencoded", striped : true, // 表格显示条纹 pagination : false, // 启动分页 pageNumber : 1, // 当前第几页 sidePagination : "server", // 表示服务端请求 // 设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder // 设置为limit可以获取limit, offset, search, sort, order queryParamsType : "undefined", queryParams : function queryParams(params) { // 设置查询参数 var param = { pageNumber : params.pageNumber, pId:$("#pId").val() }; return param; } }); } function showDetail(value,row,index){ return "<a href='toQualitySecurityViewPage.do"&qId="+row.qId+"'>查看</a>"; } $(document).ready(function() { // 调用函数，初始化表格 initTable(); // 当点击查询按钮的时候执行 // $("#search").bind("click", initTable); });
以上所述是小编给大家介绍的BootStrap轻松实现微信页面开发代码分享，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！