Home >Web Front-end >JS Tutorial >BootstrapTable load button function code

BootstrapTable load button function code

小云云
小云云Original
2018-02-03 13:58:401623browse

This article mainly introduces to you the detailed code example of the BootstrapTable loading button function. Friends who need it can refer to it. I hope it can help everyone.

1 html

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

2 bootStarp

#3 js to open the pop-up window

 //打开新增或者是更新模态框 
 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 Pop-up window

<p id="operateHotelServiceModal"class="modal" tabindex="-1"> 
 <p class="modal-dialog"> 
  <p class="modal-content"> 
   <p class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">×</button> 
    <h4 class="blue bigger" id="operateHotelServiceType"></h4> 
   </p> 
   <form id="hotelServiceForm"> 
    <p class="modal-body overflow-visible"> 
     <p class="row"> 
      <p class="col-xs-12"> 
       <p class="form-group"> 
        <label class="col-sm-3 control-labelno-padding-right" for="bankName"> 选择银行:</label> 
        <p 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> 
        </p> 
       </p> 
       <p style="height:25px"></p> 
       <p class="form-group"> 
        <label class="col-sm-3control-label no-padding-right" for="realName"> 真实姓名: </label> 
        <p class="col-sm-9"> 
         <input type="text" class="col-xs-10col-sm-12" id="realName" placeholder="请输入真实姓名" /> 
        </p> 
       </p> 
       <p style="height:25px"></p> 
       <p class="form-group"> 
        <label class="col-sm-3 control-labelno-padding-right" for="bankIdcard"> 身份证号: </label> 
        <p class="col-sm-9"> 
         <input type="text" class="col-xs-10col-sm-12" id="bankIdcard" /> 
        </p> 
       </p> 
       <p style="height:25px"></p> 
       <p class="form-group"> 
        <label class="col-sm-3 control-labelno-padding-right" for="bankNumber"> 银行卡号: </label> 
        <p class="col-sm-9"> 
         <input type="text" class="col-xs-10col-sm-12" id="bankNumber" /> 
        </p> 
       </p> 
       <p style="height:25px"></p> 
       <p class="form-group"> 
        <label class="col-sm-3 control-labelno-padding-right" for="bankNameZhi"> 开发支行: </label> 
        <p class="col-sm-9"> 
         <input type="text" class="col-xs-10col-sm-12" id="bankNameZhi" /> 
        </p> 
       </p> 
       <p style="height:25px"></p> 
       <p class="form-group"> 
        <label class="col-sm-3 control-labelno-padding-right" for="bankPhone"> 银行卡预留电话: </label> 
        <p class="col-sm-9"> 
         <input type="text" class="col-xs-10col-sm-12" id="bankPhone" /> 
        </p> 
       </p> 
      </p> 
     </p> 
    </p> 
   </form> 
   <p 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> 
   </p> 
  </p> 
 </p> 
</p><!-- PAGE CONTENT ENDS -->
Related recommendations:

Based on JS to implement the function of sliding left on the mobile terminal to display the delete button

Research on the Input button function of JavaScript type File_Form special effects

jQuery implementation of countdown button function code sharing_jquery

The above is the detailed content of BootstrapTable load button function code. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn