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字典探测用户名工具
Oct 05 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
python去除字符串中的换行符
2017/10/11 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Django 路由控制的实现
2019/07/17 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
人事主管的岗位职责
2013/11/16 职场文书
行政部主管岗位职责
2013/12/28 职场文书
感恩节活动策划方案
2014/05/16 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
房屋维修协议书范本
2014/09/25 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技