BootStrap轻松实现微信页面开发代码分享

1. 行长度：

<div class="col-md-12"> </div>

2.modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"> <div class="modal-content"><div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">出库信息</h4><br></div><div class="modal-body"> <spring:form id="outMaterialForm" action="" class="form-horizontal" modelAttribute="outMaterialDto"><spring:hidden path="mId"/><div class="form-group"> <label class="col-sm-2 control-label">出库时间：</label> <div class="col-sm-4"><spring:input class="form-control" path="outDate" readonly="true" placeholder="请选择时间" data-bv-notempty="true" data-bv-notempty-message="不能为空"/> </div></div><div class="form-group"> <label class="col-sm-2 control-label">出库数量：</label> <div class="col-sm-4"><div id="1" class="input-group input-group-option quantity-wrapper"> <span class="input-group-addon input-group-addon-remove quantity-remove btn"><span class="glyphicon glyphicon-minus"></span> </span> <spring:input id="1inp" value="6" path="outQuantity" name="option[]" class="form-control quantity-count" placeholder="1" /> <span class="input-group-addon input-group-addon-remove quantity-add btn"><span class="glyphicon glyphicon-plus"></span> </span></div> </div></div><div class="form-group"> <label class="col-sm-2 control-label">出库人：</label> <div class="col-sm-4"><spring:input class="form-control" path="outLeader"/> </div></div> </spring:form> </div><div class="modal-footer" style="text-align: center;"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" 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"> <！-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <！-- 可选的Bootstrap主题文件（一般不用引入） --> <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"/> <！-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <！-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//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 class="container"> <h4 class="page-header">详细</h4> <div style="text-align: right;"><button type="button" id="outQuantityBtn" class="btn btn-primary">出库</button> </div> <spring:form id="defaultForm" class="form-horizontal" modelAttribute="materialDto"><input type="hidden" id="id" value="${materialDto.id }"/><div class="form-group"> <label class="col-sm-2 control-label">项目名称：</label>${materialDto.projectName }</div><div class="form-group"> <label class="col-sm-2 control-label">物料名称：</label>${materialDto.name }</div><div class="form-group"> <label class="col-sm-2 control-label">入库时间：</label>${materialDto.inDate }</div><div class="form-group"> <label class="col-sm-2 control-label">物料数量：</label>${materialDto.inQuantity }</div><div class="form-group"> <label class="col-sm-2 control-label">入库负责人：</label>${materialDto.inLeader }</div> <table class="table table-hover table-bordered" 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 class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"> <div class="modal-content"><div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">出库信息</h4><br></div><div class="modal-body"> <spring:form id="outMaterialForm" action="" class="form-horizontal" modelAttribute="outMaterialDto"><spring:hidden path="mId"/><div class="form-group"> <label class="col-sm-2 control-label">出库时间：</label> <div class="col-sm-4"><spring:input class="form-control" path="outDate" readonly="true" placeholder="请选择时间" data-bv-notempty="true" data-bv-notempty-message="不能为空"/> </div></div><div class="form-group"> <label class="col-sm-2 control-label">出库数量：</label> <div class="col-sm-4"><div id="1" class="input-group input-group-option quantity-wrapper"> <span class="input-group-addon input-group-addon-remove quantity-remove btn"><span class="glyphicon glyphicon-minus"></span> </span> <spring:input id="1inp" value="6" path="outQuantity" name="option[]" class="form-control quantity-count" placeholder="1" /> <span class="input-group-addon input-group-addon-remove quantity-add btn"><span class="glyphicon glyphicon-plus"></span> </span></div> </div></div><div class="form-group"> <label class="col-sm-2 control-label">出库人：</label> <div class="col-sm-4"><spring:input class="form-control" path="outLeader"/> </div></div> </spring:form> </div><div class="modal-footer" style="text-align: center;"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="saveOutMaterialBtn">保存</button></div> </div></div> </div> <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"> <div class="modal-content"><div class="modal-header"></div><div class="modal-body"> <a href="#" class="thumbnail">正在保存，请稍后... </a></div><div class="modal-footer"></div> </div></div> </div> <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"> <div class="modal-content"><div class="modal-header"></div><div class="modal-body"> <a href="#" class="thumbnail">保存成功。 </a></div><div class="modal-footer"></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）{//Varsvar count = 1;var newcount = 0;//Wert holen + Rechnenvar 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）{//Varsvar count = 1;var newcount = 0;//Wert holen + Rechnenvar 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"> <！-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <！-- 可选的Bootstrap主题文件（一般不用引入） --> <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"/> <！-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <！-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//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 class="container"> <h4 class="page-header">安全/质量填报</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" class="table table-striped table-hover table-bordered"> <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 class="table table-hover table-bordered" 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 style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sSecurityFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>文明施工</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sCiviliztionFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>脚手架</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sScaffoldFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>基坑支撑</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sFounationFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>外用电梯</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sLiftFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>施工用电</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sElectricityFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>施工机械</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sMachineryFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> </tbody> </table><table class="table table-hover table-bordered" 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 style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qLimeFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>水泥质量</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qCementFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>桩的数量<br>、类型、<br>布置形式</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qPileCountFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>材料的配<br>合比例</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qFillingFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>施工工艺</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qTechnologyFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>桩的密实<br>度</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qPileDensityFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> <tr><td>地基承载<br>力</td><td><spring:input style="width: 40px;" 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）;" class="file"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qBearingFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> </tbody> </table><div style="text-align:center;"> <button type="button" onclick="saveForm（）;" class="btn btn-default">保存</button></div><div style="text-align:center;"> </div> </spring:form> <！-- <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> --> <！--开始演示模态框 --> <！-- </button> --> <！-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"> <div class="modal-content"><div class="modal-header"> <！-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> --> <！--× --> <！-- </button> --> <！-- <h4 class="modal-title" id="myModalLabel"> --> <！--图片<img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"> --> <！-- </h4><br> --> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button></div><div class="modal-body"> <a href="#" class="thumbnail"><img id="modelPicture" src="" alt=""> </a></div><div class="modal-footer"></div> </div><！-- /.modal-content --></div><！-- /.modal --> </div> <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"> <div class="modal-content"><div class="modal-header"></div><div class="modal-body"> <a href="#" class="thumbnail">图片正在上传，请稍后... <！--<img id="modelPicture" src="http://imgsrc.baidu.com/forum/w%3D580/sign=203354c7a864034f0fcdc20e9fc27980/1a52738da9773912d8d31f7bfb198618377ae281.jpg"> --> </a></div><div class="modal-footer"></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. 查看页面

<%@ 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"> <！-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <！-- 可选的Bootstrap主题文件（一般不用引入） --> <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"/> <！-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <！-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//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 class="container"> <h4 class="page-header">安全/质量填报</h4> <spring:form id="defaultForm" class="form-horizontal" modelAttribute="pointQualitySecurityDto" action="save.do" method="post" enctype="multipart/form-data" ><input type="hidden" name="pId" value="${pointQualitySecurityDto.pId }"/><table id="formQRCode" class="table table-striped table-hover table-bordered"> <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 class="table table-hover table-bordered" 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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sSecurityFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sCiviliztionFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sScaffoldFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sFounationFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sLiftFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sElectricityFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.sMachineryFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> </tbody> </table><table class="table table-hover table-bordered" 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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qLimeFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qCementFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qPileCountFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qFillingFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qTechnologyFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qPileDensityFileId}"）;"><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）;" class="file" onclick="showPicture（"${pointQualitySecurityDto.qBearingFileId}"）;"><img alt="" src="<%=basePath%>/page/project/wechat/m500point/img/box_picture.png"></a><%} %></td> </tr> </tbody> </table><div style="text-align:center;"> </div> </spring:form> <！-- <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> --> <！--开始演示模态框 --> <！-- </button> --> <！-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"> <div class="modal-content"><div class="modal-header"> <！-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> --> <！--× --> <！-- </button> --> <！-- <h4 class="modal-title" id="myModalLabel"> --> <！--图片查看 --> <！-- </h4><br> --> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button></div><div class="modal-body"> <a href="#" class="thumbnail"><div id="alertContent"></div><img id="modelPicture" src="" alt=""> </a></div><div class="modal-footer"></div> </div><！-- /.modal-content --></div><！-- /.modal --> </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="+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"> <！-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <！-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <！-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <！-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//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 class="container"> <h4 class="page-header">质量/安全列表</h4> <table class="table table-hover" 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?sId="+row.sId+"&qId="+row.qId+"">查看</a>"; } $（document）.ready（function（） {// 调用函数，初始化表格initTable（）;// 当点击查询按钮的时候执行// $（"#search"）.bind（"click", initTable）; }）;

以上所述是小编给大家介绍的BootStrap轻松实现微信页面开发代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！