prograhammer / bootstrap-table-contextmenu Goto Github PK
View Code? Open in Web Editor NEWContext menu support for wenzhixin Bootstrap-table
License: MIT License
Context menu support for wenzhixin Bootstrap-table
License: MIT License
When you right click on the table row to open the contextMenu it closes itself immediately after the right click. Tje contextMenu does not stay open.
It works fine on Chrome.
Your latest release is broken! It has been fixed in a commit but not yet released. Bower install fails. Make a new release :)
When the onContextMenuItem function is called, the row parameter contains the wrong row. I suspect it is identifying the row based on its index in the data array, rather than identifying it based on the element. Since the Reorder Rows plugin modifies the order of the elements (and not the data array), this causes the context menu to pick the wrong row.
Thanks for making this. It's made adding actions to tables much easier.
Most links on the internet seem to allow a user to right click on them to bring up the native browser context menu and then selecting to open them in a new tab for example. They also usually open in a new tab when clicking on them using the middle mouse click.
Is there a way I could inject the href into each menu item before opening the menu, and keep the menu open when right clicked so as to show the native link context menu?
Thanks again for your work on this plugin.
@prograhammer In the past, I sent you an e-mail for this title.
I have a solution like this. It's working. Do you think there is another way? eg: (that******('check', $tr.data('index'));
)
that.trigger('contextmenu-row', item, $tr);
if (that.options.contextMenuAutoClickRow && that.options.contextMenuTrigger == 'right') {
// select row
$(that.$el).bootstrapTable('check', $tr.data('index'));
that.trigger('click-row', item, $tr);
}
regards
baris
How to show the context menu in bootstrap-tables that are inside a modal window ..
It is shown but under the modal window. what is needed to show over the modal window ?
Best Regards..
Durval Henke
使用这个bootstrap-table-contextmeun无法引用外部的函数,不是this问题,它找不到外部函数
Hello ..
The left menu button isn't firing the context-menu..
I'm on a mac with safari and firefox.. both not working
Hi. I'd like to know if there's possible to create sub groups in the context menu like this:
https://swisnl.github.io/jQuery-contextMenu/screenshots/jquery-contextMenu.subs.png
Thanks.
Hi,
I use Context Menu for my project.
ContextMenu works perfectly. I dynamically insert a line on my table with ajax and suddenly, contextMenu does not work anymore.
How to use the delegate or live function of jquery in my code?
$('#mytable').bootstrapTable({ contextMenu: '#context-menu', onContextMenuItem: function (row, $el) { if ($el.data("item") == "add") { alert('Tt works') } if ($el.data("item") == "edit") { alert('Tt works') } if ($el.data("item") == "delete") { alert('Tt works') } } });
Thanks
what is the proper method to override the initData function?
!function($) {
'use strict';
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initData = BootstrapTable.prototype.initData;
BootstrapTable.prototype.initData = function(data, type) {
if (type === 'append') {
this.options.data = this.options.data.concat(data);
} else if (type === 'prepend') {
this.options.data = [].concat(data).concat(this.options.data);
} else {
data = data || this.options.data;
this.options.data = Array.isArray(data) ? data : data[this.options.dataField];
}
this.data = _toConsumableArray(this.options.data);
if (this.options.sortReset) {
this.unsortedData = _toConsumableArray(this.data);
}
if (this.options.sidePagination === 'server') {
return;
}
this.initSort();
};
}(jQuery);
How can I make this keyboard navigable (rather than just mouse) to improve accessibility and help screen readers?
What I'm going for is something like how the regular bootstrap dropdowns let you focus and move up/down with the cursor keys.
Hi, can you add an extension.json
file to your repo.
Like this: extension.json, and then the extension will show in this page: http://bootstrap-table.wenzhixin.net.cn/extensions/
If creating a contextmenu in each row with different actions, the contextMenu-Button-click wil loop through each row contextmenu, when a contextmenu-button was clicked (example with twig-template)
HTML:
<tbody>
{% for key, item in items %}
<tr>
<td> id </td>
<td> title </td>
<td> actions
<ul id="context-menu" class="dropdown-menu">
{% if item['status'] > 1%}
<li data-item="publish"><a href="#">Publish</a></li>
<li data-item="delete"><a href="#">Delete</a></li>
{% else %}
<li data-item="spellcheck"><a href="#">Spellcheck</a></li>
{% endif %}
</ul>
<div class='btn-group btn-group-xs'>
<button type='button' class='btn btn-default dropdown-toggle action-button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
<span class='glyphicon glyphicon-list'></span>
<span class='sr-only'>Toggle Dropdown</span>
</button>
</div>
</td>
</tr>
{% endfor %}
</tbody>
ID | Titel | Actions |
---|
JS:
$('#myTable').bootstrapTable({
contextMenu: '#context-menu',
contextMenuButton: '.action-button',
contextMenuAutoClickRow: true,
onContextMenuItem: function(row, $el){
if($el.data("item") == "publish"){
alert("Publish: " + row.objectId + ' ' + row.title );
} else if($el.data("item") == "delete"){
alert("Un-Publish: " + row.objectId + ' ' + row.title );
} else if($el.data("item") == "spellcheck"){
alert("Imprimatur: " + row.objectId + ' ' + row.title );
}
}//code
});
Hello,
Thank you for the nice plugin.
I have a table that displays items of different types { folders and files }.
I want to have different contextMenu for each type.
Is it possible to do that with the plugin?
Is it possible to add row index parameter to onContextMenuItem event?
I need something like this:
onContextMenuItem: function(row, index, $el) {
if($el.data("item") == "update" {
row.name = 'something';
$table.bootstrapTable('updateRow', {
index: index,
row: row
});
}
}
Hi!
(I hope this is the right place to ask this question...)
I use bootstrap-table within a form. My problem is when the user presses enter in the search field the form gets submitted. How can I prevent this behaviour? The option "data-searchOnEnterKey" (true or false) has no influence on it...
Regards
Leif
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>```
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.