首页 > 编程 > JavaScript > 正文

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

2019-11-19 15:20:12
字体:
来源:转载
供稿:网友

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加载按钮功能实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表