Implementation method of right-click function in Bootstrap table

Recently encountered a requirement to use right-click on Bootstrap table. Searched online for a long time and couldn't find any solution. Finally, found that Bootstrap table does not support right-click (the official document says ... 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/<script src="libs/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/<script src="libs/<head>/script>
</<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, please refer to the implementation of the right-click function in the web page - the use of contextMenu.

For the use of Bootstrap table, please refer to the official documentationBootstrap table.

That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please report any copyright infringement by sending an email to codebox.com (replace # with @ when sending an email), and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.

Basic Tutorial