bootstrap-table-contextmenu
bootstrap-table-contextmenu copied to clipboard
Published
20 hours ago •
prograhammer
prograhammer
non-contextmenu tables cannot be right clicked
I want to have 2 tables on the page where one uses the context menu and the other one does not. The problem is the right click on my second table which has no context menu gets disabled and I cannot open hyperlinks in a new window. Can you please suggest a work around?
<head>
<link rel="stylesheet" href="./bootstrap-table.min.css">
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css">
<script src="./jquery-2.1.0.js"></script>
<script src="./popper.js"></script>
<script src="./bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="./bootstrap-table.min.js"></script>
<link rel="stylesheet" href="./fontawesome/font-awesome.min.css">
<script src="./bootstrap-table-contextmenu.js"></script>
<script>
function setup_mu_table_menu(){
$('#id_table').bootstrapTable({
contextMenu: '#id_context_menu',
onContextMenuItem: function(row, $el){
if($el.data("item") == "copy"){
alert('copy');
}
}
});
}
$(function() {
setup_mu_table_menu();
})
</script>
</head>
<body>
<table id="id_table" border="2"
data-show-columns="true"
data-striped="true"
data-search="true"
data-query-params="queryParams"
data-pagination="true"
data-height="500"
data-classes="table table-hover">
<thead>
<tr>
<th data-sortable="true">Name</th>
<th data-sortable="true">Stars</th>
<th data-sortable="true">Forks</th>
<th data-sortable="true">Description</th>
<th data-sortable="true">Icons</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="tr-class-1">
<td id="td-id-1" class="td-class-1">
<a href="https://github.com/wenzhixin/bootstrap-table">bootstrap-table</a>
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
<td><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">
<a href="https://github.com/wenzhixin/multiple-select">multiple-select</a>
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
<td><i class="fa fa-star"></i></td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">
<a href="https://github.com/wenzhixin/bootstrap-show-password">bootstrap-show-password</a>
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
<td><i class="fa fa-star"></i></td>
</tr>
<tr id="tr-id-4" class="tr-class-4">
<td id="td-id-4" class="td-class-4">
<a href="https://github.com/wenzhixin/blog">blog</a>
</td>
<td>13</td>
<td>4</td>
<td>my blog</td>
<td><i class="fa fa-star"></i></td>
</tr>
<tr id="tr-id-5" class="tr-class-5">
<td id="td-id-5" class="td-class-5">
<a href="https://github.com/wenzhixin/scutech-redmine">scutech-redmine</a>
<td>6</td>
<td>3</td>
<td>Redmine notification tools for chrome extension.</td>
<td><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
</tr>
</tbody>
</table>
<br/><br/>
<table id="id_table2" border="2"
data-toggle="table"
data-show-columns="true"
data-striped="true"
data-search="true"
data-query-params="queryParams"
data-pagination="true"
data-height="500"
data-classes="table table-hover">
<thead>
<tr>
<th data-sortable="true">Name</th>
<th data-sortable="true">Stars</th>
<th data-sortable="true">Forks</th>
<th data-sortable="true">Description</th>
<th data-sortable="true">Icons</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="tr-class-1">
<td id="td-id-1" class="td-class-1">
<a href="https://github.com/wenzhixin/bootstrap-table">bootstrap-table</a>
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
<td><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">
<a href="https://github.com/wenzhixin/multiple-select">multiple-select</a>
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
<td><i class="fa fa-star"></i></td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">
<a href="https://github.com/wenzhixin/bootstrap-show-password">bootstrap-show-password</a>
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
<td><i class="fa fa-star"></i></td>
</tr>
<tr id="tr-id-4" class="tr-class-4">
<td id="td-id-4" class="td-class-4">
<a href="https://github.com/wenzhixin/blog">blog</a>
</td>
<td>13</td>
<td>4</td>
<td>my blog</td>
<td><i class="fa fa-star"></i></td>
</tr>
<tr id="tr-id-5" class="tr-class-5">
<td id="td-id-5" class="td-class-5">
<a href="https://github.com/wenzhixin/scutech-redmine">scutech-redmine</a>
<td>6</td>
<td>3</td>
<td>Redmine notification tools for chrome extension.</td>
<td><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
</tr>
</tbody>
</table>
<ul id="id_context_menu" class="dropdown-menu" style="position: absolute; left: 392px; top: 371px; z-index: 1100; display: none;">
<li data-item="copy"><a>copy</a></li>
</ul>
</body>
</html>```
