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 相关文章推荐
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
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作的文本留言本的例子(五)
2006/10/09 PHP
php项目打包方法
2008/02/18 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
js left,right,mid函数
2008/06/10 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
python修改注册表终止360进程实例
2014/10/13 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
详解python3百度指数抓取实例
2016/12/12 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
生物学学生自我评价
2014/01/17 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
用JS创建一个录屏功能
2021/11/11 Javascript
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL