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){ //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"> <!-- 新 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轻松实现微信页面开发代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！
新闻热点
疑难解答
