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

2020-05-24 21:34:10易采站长站整理

<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>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<a href="#" class="thumbnail">
正在保存,请稍后...
</a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<a href="#" class="thumbnail">
保存成功。
</a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</body>
</html>

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",