站长资源网络编程
BootStrap轻松实现微信页面开发代码分享
简介1. 行长度： 2.modal
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轻松实现微信页面开发代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！