bootstrap 微信开发页面
1. 行长度：
2.modal
3. 事例
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
物料
详细
${materialDto.projectName }
${materialDto.name }
${materialDto.inDate }
${materialDto.inQuantity }
${materialDto.inLeader }
出库列表
出库时间：
出库数量：
出库人：
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" %>
<%@ 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" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
安全/质量填报
<%PointQualitySecurityDto pDto = ((PointQualitySecurityDto)request.getAttribute("pointQualitySecurityDto")); %>
安全/质量填报
工程部位（工点）
检查人
检查时间
${pointQualitySecurityDto.pointProject }
${pointQualitySecurityDto.recordPerson }
${pointQualitySecurityDto.recordDate }
安全
检查项目
实际得分
是否合格
附件
安全施工
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.sSecurityFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getsSecurityFileName())){ %>
<%} %>
文明施工
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.sCiviliztionFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getsCiviliztionFileName())){ %>
<%} %>
脚手架
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.sScaffoldFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getsScaffoldFileName())){ %>
<%} %>
基坑支撑
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.sFounationFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getsFounationFileName())){ %>
<%} %>
外用电梯
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.sLiftFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getsLiftFileName())){ %>
<%} %>
施工用电
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.sElectricityFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getsElectricityFileName())){ %>
<%} %>
施工机械
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.sMachineryFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getsMachineryFileName())){ %>
<%} %>
质量
检查项目
实际得分
是否合格
拍照
石灰质量
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.qLimeFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getqLimeFileName())){ %>
<%} %>
水泥质量
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.qCementFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getqCementFileName())){ %>
<%} %>
桩的数量
、类型、
布置形式
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.qPileCountFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getqPileCountFileName())){ %>
<%} %>
材料的配
合比例
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.qFillingFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getqFillingFileName())){ %>
<%} %>
施工工艺
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.qTechnologyFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getqTechnologyFileName())){ %>
<%} %>
桩的密实
度
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.qPileDensityFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getqPileDensityFileName())){ %>
<%} %>
地基承载
力
checked<%} %>>是
checked<%} %>>否
<%-- ${pointQualitySecurityDto.qBearingFileName } --%>
<%if(!StringUtils.isEmpty(pDto.getqBearingFileName())){ %>
<%} %>
6. 查看页面
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags/form" %>
<%@ 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" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%PointQualitySecurityDto pDto = ((PointQualitySecurityDto)request.getAttribute("pointQualitySecurityDto")); %>
安全/质量填报
安全/质量填报
工程部位（工点）
检查人
检查时间
${pointQualitySecurityDto.pointProject }
${pointQualitySecurityDto.recordPerson }
${pointQualitySecurityDto.recordDate }
安全
检查项目
实际得分
是否合格
附件
安全施工
${pointQualitySecurityDto.sSecurityScore }
${pointQualitySecurityDto.isSSecurity }
<%if(!StringUtils.isEmpty(pDto.getsSecurityFileName())){ %>
<%} %>
文明施工
${pointQualitySecurityDto.sCiviliztionScore }
${pointQualitySecurityDto.isSCiviliztion }
<%if(!StringUtils.isEmpty(pDto.getsCiviliztionFileName())){ %>
<%} %>
脚手架
${pointQualitySecurityDto.sScaffoldScore }
${pointQualitySecurityDto.isSScaffold }
<%if(!StringUtils.isEmpty(pDto.getsScaffoldFileName())){ %>
<%} %>
基坑支撑
${pointQualitySecurityDto.sFounationScore }
${pointQualitySecurityDto.isSFounation }
<%if(!StringUtils.isEmpty(pDto.getsFounationFileName())){ %>
<%} %>
外用电梯
${pointQualitySecurityDto.sLiftScore }
${pointQualitySecurityDto.isSLift }
<%if(!StringUtils.isEmpty(pDto.getsLiftFileName())){ %>
<%} %>
施工用电
${pointQualitySecurityDto.sElectricityScore }
${pointQualitySecurityDto.isSElectricity }
<%if(!StringUtils.isEmpty(pDto.getsElectricityFileName())){ %>
<%} %>
施工机械
${pointQualitySecurityDto.sMachineryScore }
${pointQualitySecurityDto.isSMachinery }
<%if(!StringUtils.isEmpty(pDto.getsMachineryFileName())){ %>
<%} %>
质量
检查项目
实际得分
是否合格
附件
石灰质量
${pointQualitySecurityDto.qLimeScore }
${pointQualitySecurityDto.isQLime }
<%if(!StringUtils.isEmpty(pDto.getqLimeFileName())){ %>
<%} %>
水泥质量
${pointQualitySecurityDto.qCementScore }
${pointQualitySecurityDto.isQCement }
<%if(!StringUtils.isEmpty(pDto.getqCementFileName())){ %>
<%} %>
桩的数量
、类型、
布置形式
${pointQualitySecurityDto.qPileCountScore }
${pointQualitySecurityDto.isQPileCount }
<%if(!StringUtils.isEmpty(pDto.getqPileCountFileName())){ %>
<%} %>
材料的配
合比例
${pointQualitySecurityDto.qFillingScore }
${pointQualitySecurityDto.isQFilling }
<%if(!StringUtils.isEmpty(pDto.getqFillingFileName())){ %>
<%} %>
施工工艺
${pointQualitySecurityDto.qTechnologyScore }
${pointQualitySecurityDto.isQTechnology }
<%if(!StringUtils.isEmpty(pDto.getqTechnologyFileName())){ %>
<%} %>
桩的密实
度
${pointQualitySecurityDto.qPileDensityScore }
${pointQualitySecurityDto.isQPileDensity }
<%if(!StringUtils.isEmpty(pDto.getqPileDensityFileName())){ %>
<%} %>
地基承载
力
${pointQualitySecurityDto.qBearingScore }
${pointQualitySecurityDto.isQBearing }
<%if(!StringUtils.isEmpty(pDto.getqBearingFileName())){ %>
<%} %>
7. 列表页面
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
质量/安全列表
质量/安全列表
工程部位（工点）：
记录人：
记录时间：
检查类型：
详细：
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 "查看";
}
$(document).ready(function() {
// 调用函数，初始化表格
initTable();
// 当点击查询按钮的时候执行
// $("#search").bind("click", initTable);
});