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

时间：2021-05-28

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:///bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script> <title>质量/安全列表</title> <script type="text/javascript" src="<%=basePath%>/page/project/wechat/m500point/js/point_quality_security_list.js?version=09092200010"></script> </head> <body> <div class="container"> <h4 class="page-header">质量/安全列表</h4> <table class="table table-hover" id="pointQualitySecurityTable" data-pagination="false" data-search="false" data-show-refresh="false" data-toggle="card" data-card-view = "true" data-show-toggle="false" data-show-columns="true"> <input type="hidden" id="pId" value="${pointQualitySecurityDto.pId }"/> <thead> <tr> <th data-field="pointProject" data-halign="center" >工程部位（工点）：</th> <th data-field="recordPerson" data-halign="center">记录人：</th> <th data-field="recordDate" data-halign="center">记录时间：</th> <th data-field="checkType" data-halign="center">检查类型：</th> <th data-field="sId" data-visible="false"> <th data-field="qId" data-visible="false"> <th data-field="ck" data-halign="center" data-formatter="showDetail">详细：</th> </tr> </thead> <tbody> </tbody> </table> </div> </body> </html> 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 "<a href='toQualitySecurityViewPage.do?sId="+row.sId+"&qId="+row.qId+"'>查看</a>"; } $(document).ready(function() { // 调用函数，初始化表格 initTable(); // 当点击查询按钮的时候执行 // $("#search").bind("click", initTable); });

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章