Bootstrap table右键功能实现方法


Posted in Javascript onFebruary 20, 2017

最近遇到有一个需求,需要在Bootstrap table上使用右键。网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/wenzhixin/bootstrap-table/issues/241 )。

本文介绍使用contextMenu插件实现Bootstrap table右键功能。

代码(test.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="libs/bootstrap-table-v1.11.0/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="libs/bootstrap-table-v1.11.0/bootstrap-table.css" rel="external nofollow" >
<link href="libs/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet"/>


<script src="libs/jQuery/jquery-1.8.3.min.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap.min.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap-table.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap-table-zh-CN.js"></script>
<script src="libs/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>

</head>

<body>

<table id="item_table"></table>

<script>

$('#item_table').bootstrapTable({
 columns: [{
 field: 'id',
 title: 'Item ID'
 }, {
 field: 'name',
 title: 'Item Name'
 }, {
 field: 'price',
 title: 'Item Price'
 }],
 data: [{
 id: 1,
 name: 'Item 1',
 price: '$1'
 }, {
 id: 2,
 name: 'Item 2',
 price: '$2'
 }]
});


$.contextMenu({
 // define which elements trigger this menu
 selector: "#item_table td",
 // define the elements of the menu
 items: {
 foo: {name: "Foo", callback: function(key, opt){ alert("Foo!"); }},
 bar: {name: "Bar", callback: function(key, opt){ alert("Bar!") }}
 }
 // there's more, have a look at the demos and docs...
});

</script>

</body>
</html>

效果图:

Bootstrap table右键功能实现方法

关于contextMenu的使用,可以参考网页中右键功能的实现— contextMenu的使用 。

关于Bootstrap table的使用,可以参考官方文档Bootstrap table。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript的匿名函数小结
Dec 31 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
JS如何判断json是否为空
Jul 06 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 #Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 #Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 #Javascript
原生js实现轮播图的示例代码
Feb 20 #Javascript
深入理解Javascript中的观察者模式
Feb 20 #Javascript
浅谈js中function的参数默认值
Feb 20 #Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 #Javascript
You might like
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
如何给phpadmin一个保护
2006/10/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python如何实现反向迭代
2018/03/20 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
艺术设计专业个人求职信
2013/09/21 职场文书
小学生自我鉴定
2013/10/12 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers