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提交form表单,并传递参数的实现方法
May 25 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
原生javascript实现分页效果
Apr 21 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
react中props 的使用及进行限制的方法
Apr 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
如何开发一个虚拟域名系统
2006/10/09 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
jquery text()要注意啦
2009/10/30 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
Python复制文件操作实例详解
2015/11/10 Python
详解Python爬虫的基本写法
2016/01/08 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python随机读取文件实现实例
2017/05/25 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
会计主管岗位职责
2014/01/03 职场文书
对教师的评语
2014/04/28 职场文书
感恩节活动策划方案
2014/05/16 职场文书
售房委托书
2014/08/30 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
2015年计划生育责任书
2015/05/08 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
小学大队委竞选口号
2015/12/25 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书