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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
JS实现多功能计算器
Oct 28 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
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
PHP培训要多少钱
2017/06/06 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
分享Python字符串关键点
2015/12/13 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
Python和Go语言的区别总结
2019/02/20 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
如何在存储过程中使用Loop
2016/01/05 面试题
留学生如何写好自荐信
2013/12/27 职场文书
公立医院改革实施方案
2014/03/14 职场文书
仓库文员岗位职责
2014/04/06 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
计划生育证明书写要求
2014/09/17 职场文书
校长四风对照检查材料
2014/09/27 职场文书
银行授权委托书格式
2014/10/10 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python