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

网络编程 2024/11/16 佚名

3 1 2

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="/UploadFiles/2021-04-02/jquery.min.js">

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="/UploadFiles/2021-04-02/jquery.min.js">

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="/UploadFiles/2021-04-02/jquery.min.js">

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="/UploadFiles/2021-04-02/jquery.min.js">

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

                                
                                
                                    bootstrap,微信开发页面 
                                华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“BootStrap轻松实现微信页面开发代码分享”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月16日

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

基于angular中的重要指令详解($eval,$parse和$compile)

浅谈angularjs module返回对象的坑(推荐)

评论“BootStrap轻松实现微信页面开发代码分享”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

基于angular中的重要指令详解($eval,$parse和$compile)

浅谈angularjs module返回对象的坑(推荐)

评论“BootStrap轻松实现微信页面开发代码分享”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存