Implementation of Bootstrap table pop-up right-click menu using contextMenu plugin

Now that Bootstrap, this front-end framework, has been accepted and applied in different projects by many people, its characteristics of "high efficiency and device compatibility" are very obvious. Added to this is its default beautiful UI components, which are simply the love of many front-end developers!!! Today, I will share with everyone the implementation method of the Bootstrap table pop-up right-click menu.

Recently, I encountered a requirement to use the right-click on Bootstrap table. After searching online for a long time, I couldn't find anything. Finally, I found out that Bootstrap table does not support right-click (the official document's answer https://github.com/wenzhixin/bootstrap-table/issues/241 )

This article introduces how to implement the right-click function for Bootstrap table using the contextMenu plugin.

Code (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>

Illustration:

For the use of contextMenu, you can refer to the implementation of the right-click function on the webpage— the use of contextMenu.

For the use of Bootstrap table, you can refer to the official documentation.Bootstrap table.

The above is a tutorial by the editor on how to implement a right-click menu using the contextMenu plugin for Bootstrap table, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in a timely manner. At the same time, the editor would also like to express sincere gratitude to everyone for their support of the Naihua tutorial website!

Basic Tutorial