BootstrapTable加载按钮功能实例代码详解

1      html

<!--工具栏-->
<div id="toolbar" class="btn-group">
 <div style="float:left;margin-right: 10px">
  <button class="btn btn-danger"onclick="openModal('add',0,'')">增加</button>
 </div>
</div>
<!--工具栏-->
<div id="toolbar" class="btn-group">
 <div style="float:left;margin-right: 10px">
  <button class="btn btn-danger" onclick="openModal('add',0,'')">增加</button>
 </div>
</div> 

2      bootStarp

3      js打开弹窗

 //打开新增或者是更新模态框
 function openModal(type,id,value){
  globalType=type;
  globalId=id;
  if(type=='add'){
//   $('#money').val('');
   $('#hotelServiceName').val('');
   $('#loginPassword').text("登录密码");
   $('#operateHotelServiceModal').modal('show');
  }
//  else if(type=='update'){
//   $('#operateHotelServiceType').text("更新酒店设施(若不更新图片则无需选择图片,保持图片为空)");
//   //设置设施ID
//   $('#money').val(id);
//   //设置设施名称
//   $('#hotelServiceName').val(value);
//   //设置图片
//   $('#operateHotelServiceModal').modal('show');
//  }
 } 

4      弹窗

<div id="operateHotelServiceModal"class="modal" tabindex="-1">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h4 class="blue bigger" id="operateHotelServiceType"></h4>
   </div>
   <form id="hotelServiceForm">
    <div class="modal-body overflow-visible">
     <div class="row">
      <div class="col-xs-12">
       <div class="form-group">
        <label class="col-sm-3 control-labelno-padding-right" for="bankName"> 选择银行:</label>
        <div class="col-sm-9">
         <select class="form-control" id="bankName">
          <option value="中国工商银行">中国工商银行</option>
          <option value="中国银行">中国银行</option>
          <option value="中国农业银行">中国农业银行</option>
          <option value="中国邮政银行">中国邮政银行</option>
          <option value="中国建设银行">中国建设银行</option>
         </select>
        </div>
       </div>
       <div style="height:25px"></div>
       <div class="form-group">
        <label class="col-sm-3control-label no-padding-right" for="realName"> 真实姓名： </label>
        <div class="col-sm-9">
         <input type="text" class="col-xs-10col-sm-12" id="realName" placeholder="请输入真实姓名" />
        </div>
       </div>
       <div style="height:25px"></div>
       <div class="form-group">
        <label class="col-sm-3 control-labelno-padding-right" for="bankIdcard"> 身份证号： </label>
        <div class="col-sm-9">
         <input type="text" class="col-xs-10col-sm-12" id="bankIdcard" />
        </div>
       </div>
       <div style="height:25px"></div>
       <div class="form-group">
        <label class="col-sm-3 control-labelno-padding-right" for="bankNumber"> 银行卡号： </label>
        <div class="col-sm-9">
         <input type="text" class="col-xs-10col-sm-12" id="bankNumber" />
        </div>
       </div>
       <div style="height:25px"></div>
       <div class="form-group">
        <label class="col-sm-3 control-labelno-padding-right" for="bankNameZhi"> 开发支行： </label>
        <div class="col-sm-9">
         <input type="text" class="col-xs-10col-sm-12" id="bankNameZhi" />
        </div>
       </div>
       <div style="height:25px"></div>
       <div class="form-group">
        <label class="col-sm-3 control-labelno-padding-right" for="bankPhone"> 银行卡预留电话： </label>
        <div class="col-sm-9">
         <input type="text" class="col-xs-10col-sm-12" id="bankPhone" />
        </div>
       </div>
      </div>
     </div>
    </div>
   </form>
   <div class="modal-footer">
    <button class="btn btn-sm" data-dismiss="modal">
     <i class="icon-remove"></i>
     取消
    </button>
    <button class="btn btn-sm btn-primary" onclick="saveBank()">
     <i class="icon-ok"></i>
     提交审核
    </button>
   </div>
  </div>
 </div>
</div><!-- PAGE CONTENT ENDS --> 

总结

以上所述是小编给大家介绍的BootstrapTable加载按钮功能实例代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！