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

前端之家收集整理的这篇文章主要介绍了使用contextMenu插件实现Bootstrap table弹出右键菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

代码(test.html):

$('#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",opt){ alert("Bar!") }} } // there's more,have a look at the demos and docs... });

效果图:

这里写图片描述

关于contextMenu的使用,可以参考网页中

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

以上所述是小编给大家介绍的使用contextMenu插件实现Bootstrap table弹出右键菜单。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Bootstrap相关文章