BootStrap给table表格的每一行添加一个按钮事件


Posted in Javascript onSeptember 07, 2017

1.在列属性中加入事件

{
          title:'数据量序号',
          field:'sjid'
          // hidden:true
        },{
          field: 'operate',
          title: '操作',
          width: '80px',
           events: operateEvents,
          formatter: operateFormatter
        }

2.写一个函数

function operateFormatter(value, row, index) {
    return [
    '<input type="submit" value="上传" class="RoleOfedit btn btn-primary btn-sm"   data-toggle="modal" style="display:inline">',
    ].join('');
  }

3.记得这个写在表格的前面

window.operateEvents = {
     'click .RoleOfedit': function (e, value, row, index) {
        alert(row.qxxh);
        $("#upload").modal('show');
      }
    };

4.点击“弹出模态框”

<div class="modal fade" id="upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <form action="http://localhost:8080/GD/UploadAction_execute.action" method="post" enctype="multipart/form-data" name="uploadfile">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabelfile">上传文件</h4>
      </div>
      <div class="modal-body">
          <input type="file" name="my" id="file" value="浏览" style="display: none;"
           onchange="document.uploadfile.filePath.value=this.value"/>
           <input type="text" name="filePath" id="filePath"/>
           <input type="button" value="浏览..." onclick="document.uploadfile.my.click()"/><br>
          <input type="submit" value="上传" id="shangchuan">
      </div>
          <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
  </form>
</div>

总结

以上所述是小编给大家介绍的BootStrap给table表格的每一行添加一个按钮事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
js键盘事件的keyCode
Jul 29 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
JS实现闭包中的沙箱模式示例
Sep 07 #Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 #Javascript
详解vue-cli构建项目反向代理配置
Sep 07 #Javascript
vue数字类型过滤器的示例代码
Sep 07 #Javascript
vue监听scroll的坑的解决方法
Sep 07 #Javascript
react高阶组件经典应用之权限控制详解
Sep 07 #Javascript
React + webpack 环境配置的方法步骤
Sep 07 #Javascript
You might like
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
通过cmd进入python的步骤
2020/06/16 Python
python FTP编程基础入门
2021/02/27 Python
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
校本教研工作方案
2014/01/14 职场文书
公司委托书格式范本
2014/09/16 职场文书
教师个人考察材料
2014/12/16 职场文书
民主生活会意见
2015/06/05 职场文书
任命书格式模板
2015/09/22 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android