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+"/"; 
%> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
.quantity-remove, .quantity-add { 
 cursor: pointer; 
} 
.quantity-add.glyphicon, .quantity-remove.glyphicon { 
 display: block; 
 cursor: pointer; 
} 
 
 
物料 
 
 
详细 
 
  
 
 
  
  
  项目名称：${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+"/"; 
%> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
安全/质量填报 
 
 
.file { 
 position: relative; 
 display: inline-block; 
 
 
 
 
 overflow: hidden; 
 
 text-decoration: none; 
 text-indent: 0; 
 
} 
.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; 
} 
 
<%PointQualitySecurityDto pDto = ((PointQualitySecurityDto)request.getAttribute("pointQualitySecurityDto")); %> 
 
安全/质量填报 
 
  
  
  
  
  
  
  
  
  
  
   
     
    工程部位（工点） 
    检查人 
    检查时间 
    
   
   
   
   ${pointQualitySecurityDto.pointProject } 
   ${pointQualitySecurityDto.recordPerson } 
   ${pointQualitySecurityDto.recordDate } 
   
   
  
  
 安全 
  
  
 
     
   检查项目 
   实际得分 
   是否合格 
   附件 
    
   
   
   
   安全施工 
    
    
    
    
    
   checked<%} %>>是 
   checked<%} %>>否 
    
    
<%--    ${pointQualitySecurityDto.sSecurityFileName } --%> 
   /page/project/wechat/m500point/img/camera_picture.png"> 
     
安全/质量填报 
 
 
安全/质量填报 
 
  
  
   
     
    工程部位（工点） 
    检查人 
    检查时间 
    
   
   
   
   ${pointQualitySecurityDto.pointProject } 
   ${pointQualitySecurityDto.recordPerson } 
   ${pointQualitySecurityDto.recordDate } 
   
   
  
  
 安全 
  
  
 
     
   检查项目 
   实际得分 
   是否合格 
   附件 
    
   
   
   
   安全施工 
   ${pointQualitySecurityDto.sSecurityScore } 
    
   ${pointQualitySecurityDto.isSSecurity } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getsSecurityFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   文明施工 
   ${pointQualitySecurityDto.sCiviliztionScore } 
    
   ${pointQualitySecurityDto.isSCiviliztion } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getsCiviliztionFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   脚手架 
   ${pointQualitySecurityDto.sScaffoldScore } 
    
   ${pointQualitySecurityDto.isSScaffold } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getsScaffoldFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   基坑支撑 
   ${pointQualitySecurityDto.sFounationScore } 
    
   ${pointQualitySecurityDto.isSFounation } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getsFounationFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   外用电梯 
   ${pointQualitySecurityDto.sLiftScore } 
    
   ${pointQualitySecurityDto.isSLift } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getsLiftFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   施工用电 
   ${pointQualitySecurityDto.sElectricityScore } 
    
   ${pointQualitySecurityDto.isSElectricity } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getsElectricityFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   施工机械 
   ${pointQualitySecurityDto.sMachineryScore } 
    
   ${pointQualitySecurityDto.isSMachinery } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getsMachineryFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
 
  
 质量 
  
  
 
     
   检查项目 
   实际得分 
   是否合格 
   附件 
    
   
   
   
   石灰质量 
   ${pointQualitySecurityDto.qLimeScore } 
    
   ${pointQualitySecurityDto.isQLime } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getqLimeFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   水泥质量 
   ${pointQualitySecurityDto.qCementScore } 
    
   ${pointQualitySecurityDto.isQCement } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getqCementFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   桩的数量
、类型、
布置形式 
   ${pointQualitySecurityDto.qPileCountScore } 
    
   ${pointQualitySecurityDto.isQPileCount } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getqPileCountFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   材料的配
合比例 
   ${pointQualitySecurityDto.qFillingScore } 
    
   ${pointQualitySecurityDto.isQFilling } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getqFillingFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   施工工艺 
   ${pointQualitySecurityDto.qTechnologyScore } 
    
   ${pointQualitySecurityDto.isQTechnology } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getqTechnologyFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   桩的密实
度 
   ${pointQualitySecurityDto.qPileDensityScore } 
    
   ${pointQualitySecurityDto.isQPileDensity } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getqPileDensityFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
   地基承载
力 
   ${pointQualitySecurityDto.qBearingScore } 
    
   ${pointQualitySecurityDto.isQBearing } 
    
    
   <%if(!StringUtils.isEmpty(pDto.getqBearingFileName())){ %> 
   /page/project/wechat/m500point/img/box_picture.png"> 
   <%} %> 
    
   
   
 
   
 
 
 
 
 
 
  
   
    
 
 
 
 
 
 
     
    
    
     
      
      
     
    
    
    
   
  
 
 
 
 

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轻松实现微信页面开发代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！



转载请注明：文章转载自 www.mshxw.com
本文地址：https://www.mshxw.com/it/93318.html


   上一篇  基于angular中的重要指令详解($eval,$parse和$compile)
 
   下一篇  Javascript 实现简单计算器实例代码
  






JavaScript相关栏目本月热门文章

  1【Linux驱动开发】设备树详解（二）设备树语法详解
  2别跟客户扯细节
  3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
  4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
  5【分页】常见两种SpringBoot项目中分页技巧
  6一文带你搞懂OAuth2.0
  7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
  8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
  9JavaSE - 封装、static成员和内部类
  10树莓派mjpg-streamer实现监控及拍照功能调试
  11用c++写一个蓝屏代码
  12从JDK8源码中看ArrayList和LinkedList的区别
  13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
  14在openwrt使用C语言增加ubus接口（包含C uci操作）
  15Spring 解决循环依赖
  16SpringMVC——基于MVC架构的Spring框架
  17Andy‘s First Dictionary C++ STL set应用
  18动态内存管理
  19我的创作纪念日
  20Docker自定义镜像-Dockerfile







热门相关搜索



路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名







学习工具
代数计算器
三角函数
解析几何
立体几何


知识解答
教育知识
百科知识
生活知识
常识知识


写作必备
作文大全
作文素材
句子大全

实用范文


关于我们
关于我们
联系我们
网站地图


 
名师互学网交流群


名师互学网客服





名师互学网 版权所有 (c)2021-2022      ICP备案号：晋ICP备2021003244-6号
 






关于我们
文章归档
网站地图
联系我们
版权所有 (c)2021-2022 MSHXW.COM
ICP备案号：晋ICP备2021003244-6号

BootStrap轻松实现微信页面开发代码分享

出库信息 出库时间： 出库数量： 出库人： 取消 保存

详细 出库 项目名称：${materialDto.projectName } 物料名称：${materialDto.name } 入库时间：${materialDto.inDate } 物料数量：${materialDto.inQuantity } 入库负责人：${materialDto.inLeader } 出库列表 出库时间： 出库数量： 出库人： ×

出库信息 出库时间： 出库数量： 出库人： 取消 保存 正在保存，请稍后... 保存成功。

JavaScript相关栏目本月热门文章

出库信息
出库时间：出库数量：出库人：

详细项目名称：${materialDto.projectName } 物料名称：${materialDto.name } 入库时间：${materialDto.inDate } 物料数量：${materialDto.inQuantity } 入库负责人：${materialDto.inLeader }
出库列表

出库时间：出库数量：出库人：

出库信息
出库时间：出库数量：出库人：正在保存，请稍后... 保存成功。