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


Posted in Javascript onSeptember 22, 2017

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

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

3      js打开弹窗

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

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

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

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

Javascript 相关文章推荐
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
js实现div弹出层的方法
Nov 20 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
javascript基本算法汇总
Mar 09 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
Bootstrap Table 删除和批量删除
Sep 22 #Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 #Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 #Javascript
详解在express站点中使用ejs模板引擎
Sep 21 #Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 #Javascript
vue-router 权限控制的示例代码
Sep 21 #Javascript
react router 4.0以上的路由应用详解
Sep 21 #Javascript
You might like
深入了解php4(1)--回到未来
2006/10/09 PHP
php header()函数使用说明
2008/07/10 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
vue实例的选项总结
2020/06/09 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python实现截屏的函数
2015/07/25 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Python表达式的优先级详解
2020/02/18 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
承诺书模板
2014/08/30 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
2014年接待工作总结
2014/11/26 职场文书
安全保证书怎么写
2015/02/28 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
MongoDB支持的数据类型
2022/04/11 MongoDB