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); 
}); 

以上所述是小编给大家介绍的BootStrap轻松实现微信页面开发代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！