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="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="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="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="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="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="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="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<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轻松实现微信页面开发代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
赞 (0)
相关推荐
-
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst
-
AngularJs bootstrap搭载前台框架——基础页面
1.用AngularJs app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了,首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css(当然是bootstrap的),代码如下: <script src="lib/angular/angular.min.js"></script> <script src="lib/jquery/jquery-1.10.2.min.js"></scrip
-
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本是固定的,所以展示的时候图片出现了变形.在网上找了很多中方式也没有解决(过程曲折,不再赘述),直到找到了这款Jquery的缩放插件--jqthumb.js.下面来看看如何使用它以及如何利用它来控制轮播控件中图片的大小,而且能够做到不变形,可以显示图片的主要部分(类似于微信朋友圈的图片混排效果--不知
-
Bootstrap页面缩小变形的快速解决办法
bootstrap布局是应用得很广泛的一种网页布局方法,例如:我们用一种中间内容很流行的布局分布:3-6-3式布局.代码如下 <style type="text/css"> body{width:1350px; } header{ background-color:#d9534f; height:120px; } .center{ background-color:#31b0d5; border:1px solid #ff0000; height:300px; margin
-
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Bootstrap如同前台框架,它已经布置好不少的CSS,前端开发的使用需要则直接调用即可.其网站的网址就是http://www.bootcss.com.使用Bootstrap能减少前端开发时候在CSS样子的布置时间 需要使用Bootstrap先在官网(点击打开链接)下载组件即可,用于生产环境的Bootstrap版本(点击打开链接),Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3. 将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点
-
Bootstrap登陆注册页面开发教程
Bootstrap登陆注册功能比较简单, 主要参考bootstrap 表单功能(http://v3.bootcss.com/css/#forms) 大家也可以参考这篇关于bootstrap 表单基本知识点的文章进行学习:<Bootstrap每天必学之表单> 遇到的问题 点击submit 提交, 抓包工具没有抓取到相应的表单数据, 问题原因在于, form 表单的数据都是通过 表单中 的name 属性进行提交的, 而我们之前直接从 bootstrap 上拷贝的代码中没有name 属性, 因而导致
-
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"> <
-
Android高仿微信聊天界面代码分享
微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们来看一下整个小项目的主体结构: 下面是Activity的代码: package com.way.demo; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import jav
-
vue.js 微信支付前端代码分享
实例如下所示: onBridgeReady: function () { const openId = localStorage.getItem('openId') payService.payment(this.$route.params.orderId, 1, openId).then(rt => { //1:支付类型,可不填 this.message = rt.t WeixinJSBridge.invoke( 'getBrandWCPayRequest', { 'appId': this.
-
Bootstrap Modal遮罩弹出层代码分享
下面这段代码并非是Bootstrap的遮罩,只是简单版的遮罩效果,Bootstrap那个太啰嗦了.如果你钟情Bootstrap的那个遮罩,来看看这篇文章"完全版:Bootstrap弹出层遮罩". <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:void(0);" title="关闭&qu
-
PHP开发微信支付的代码分享
微信支付,即便交了保证金,你还是处理测试阶段,不能正式发布.必须到你通过程序测试提交订单.发货通知等数据到微信的系统中,才能申请发布. 然后,因为在微信中是通过JS方式调用API,必须在微信后台设置支付授权目录,而且要到二级三级目录下去,这对于使用MVC框架来说,是个小问题. 使用MVC,在开发环境,url往往是native url格式,不能保证一定是带有路径/的形式 所以,比较可靠的方式,是创建实体的子文件夹,这样的化,在系统整体url方面,需要进行一些改造. 另外,最后一步,js调用时,对于
-
PHP微信红包生成代码分享
本文实例为大家分享了PHP微信公众号自动发送红包API代码,分享给大家供大家参考.具体如下: 贴出核心接口代码至于数据自己填写,接口测试OK wechat_packet.php <!--?php /** * 发送红包接口 * Created by PhpStorm. * User: ADKi * Date: 2016/4/25 0025 * Time: 15:25 */ class wechat_packet{ private $url = 'https://api.mch.weixin.qq.
-
js实现类似MSN提示的页面效果代码分享
这是一篇基于javascript实现了模仿MSN消息提示的效果,推荐给大家,感兴趣的小伙伴们可以参考一下. 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的模仿MSN消息提示的效果代码如下 <html> <head> <meta http-equiv="Content-Type" content="text/htm
-
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
在 Extjs 开发中,我们需要屏蔽一些键盘按键,来避免用户在使用键盘操作的过程中不小心按到这些快捷键造成输入信息丢失等问题. Ext.onReady(function(){ Ext.WindowMgr.zseed = 10000; Ext.QuickTips.init(); Ext.getDoc().on("contextmenu", function(e){ e.stopEvent(); }); if(document.addEventListener){ document.add
-
c#打印预览控件中实现用鼠标移动页面功能代码分享
该功能本来可以通过拉动水平和垂直滚动条来实现,但实际使用中,用户更趋向于直接用鼠标拖动页面来实现,很多看图类软件都有这种类似的功能.而.net的打印预览控件却很遗憾的没有提供这一功能,只来自己想办法来实现啦. 我的办法就是用代码来控制打印预览控件中的水平来垂直滚动条的位置,间接实现和用鼠标直接拖动滚动条一样的效果. 在实现这一功能的过程中,最大的困难是打印预览控件并没有让程序员直接调用的关于滚动条的方法或属性.所以只好向WinAPI求助了. 以下API函数和常量就是实现上述功能的关键了: 复制代
-
微信页面倒计时代码（解决safari不兼容date的问题）
话不多说,请看下面代码 PC: 1.html页面: <div class="aTime"> <em id="t_d"></em> <em id="t_h"></em> <em id="t_m"></em> <em id="t_s"></em> </div> 2.js: <script