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 相关文章推荐
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
编写React组件项目实践分析
Mar 04 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
让mocha支持ES6模块的方法实现
Jan 14 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
那些年一起学习的PHP(二)
2012/03/21 PHP
php注册登录系统简化版
2020/12/28 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
调试php程序的简单步骤
2019/10/04 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
javascript生成大小写字母
2015/07/03 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
django admin 自定义替换change页面模板的方法
2019/08/23 Python
Python数据存储之 h5py详解
2019/12/26 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Python修改DBF文件指定列
2020/12/19 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
《散步》教学反思
2014/03/02 职场文书
租房协议书
2014/04/10 职场文书
公民授权委托书范本
2014/09/17 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书