BootStrap轻松实现微信页面开发代码分享
程序员文章站
2022-04-22 19:09:18
...
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教程】