BootStrap轻松实现微信页面开发代码分享
网络编程 2021-07-04 20:01www.168986.cn编程入门
本文给大家分享一段代码关于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://.springframework./tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://.w3./TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun./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./bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss./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./jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss./bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="http://cdn.bootcss./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--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",
suess: 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://.springframework./tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://.w3./TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun./jsp/jstl/core" prefix="c" %>
<%@page import=".base.project.wechat.m500point.dto.PointQualitySecurityDto" %>
<%@page import=".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./bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss./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./jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss./bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="http://cdn.bootcss./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;
: 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" aept="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" aept="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" aept="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" aept="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" aept="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" aept="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" aept="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" aept="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" aept="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" aept="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" aept="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" aept="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" aept="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" aept="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./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://.springframework./tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://.w3./TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun./jsp/jstl/core" prefix="c" %>
<%@page import=".base.project.wechat.m500point.dto.PointQualitySecurityDto" %>
<%@page import=".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./bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss./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./jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss./bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="http://cdn.bootcss./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;
: 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://.w3./TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun./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./bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss./bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss./jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss./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./bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="http://cdn.bootcss./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--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轻松实现微信页面开发代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程