使用contextMenu插件实现Bootstrap table弹出右键菜单


Posted in Javascript onFebruary 20, 2017

如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中,其中“开发高效,设备兼容”的特点表现得非常明显。再加上它默认的美观的UI组件,简直就是很多前端的大爱啊!!! 今天在这里跟大家分享Bootstrap table弹出右键菜单的实现方法。

最近遇到有一个需求,需要在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>

效果图:

使用contextMenu插件实现Bootstrap table弹出右键菜单

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

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

以上所述是小编给大家介绍的使用contextMenu插件实现Bootstrap table弹出右键菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 #Javascript
Bootstrap table右键功能实现方法
Feb 20 #Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 #Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 #Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 #Javascript
原生js实现轮播图的示例代码
Feb 20 #Javascript
深入理解Javascript中的观察者模式
Feb 20 #Javascript
You might like
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
pandas数据集的端到端处理
2019/02/18 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
销售员岗位职责范本
2014/02/03 职场文书
优质服务演讲稿
2014/05/14 职场文书
节约用水演讲稿
2014/05/21 职场文书
答谢词范文
2015/01/05 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
浅谈JS的二进制家族
2021/05/09 Javascript
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
实现一个简单得数据响应系统
2021/11/11 Javascript