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"><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="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><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"><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="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><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><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="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> </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></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"><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="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><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><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="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> </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="+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="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><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教程】

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

推荐信息