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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
js charAt的使用示例
Feb 18 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
EsLint入门学习教程
Feb 17 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
浅谈vue加载优化策略
Mar 19 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中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
安装dbus-python的简要教程
2015/05/05 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
辞职信范文大全
2015/03/02 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
党员证明模板
2015/06/19 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
Redis唯一ID生成器的实现
2022/07/07 Redis