jquery - contextmenu() 与数据表?
问题描述
我想添加一些上下文菜单事件,例如filter、nofilter和delete,这是我的代码。
$("#albums_minimal").contextmenu({
delegate: " .dataTable td",
menu: [{
title: "Filter",
cmd: "filter"
},
{
title: "Remove filter",
cmd: "nofilter"
},
{
title: "Delete",
cmd: "delete"
},
],
select: function(event, ui) {
var celltext = ui.target.text();
var colvindex = ui.target.parent().children().index(ui.target);
var colindex = $('table thead tr th:eq(' + colvindex + ')'.data('column-index'));
switch (ui.cmd) {
case "filter":
table
.column(colindex)
.search('^' + celltext + '$', true)
.draw();
break;
case "nofilter":
table
.search('')
.column().search('')
.draw();
break;
case "delete":
$(ui.target).parent().remove();
break;
}
},
beforeOpen: function(event, ui) {
var $menu = ui.menu,
$target = ui.target,
extraData = ui.extraData;
ui.menu.zIndex(0);
}
});
<div class="col-sm-12">
<table id="albums_minimal" class=" table table-striped table-bordered" style="width:100%" data-ajax="/api/albums/?format=datatables">
<thead>
<tr>
<th data-data="rank">Rank</th>
<th data-data="artist_name" data-name="artist.name">Artist</th>
<th data-data="name">Album name</th>
</tr>
</thead>
</table>
</div>
我点击了这个链接:http: //jsfiddle.net/rathore_gee/5vdb7t0L/
它不适用于我上面的代码。
我应该怎么做才能让它成功运行?
解决方案
与其使用 jQuery UI,不如让我们开始一些简单的事情。我不太确定您的代码正在尝试什么或您的目标是什么,但我相信您可以将其构建到其中。
请参阅使用 boostrap 4 和没有 jquery UI 的工作小提琴。
https://jsfiddle.net/joshmoto/p1qa8gnL/3
jQuery
$('td').on('contextmenu', function(e) {
var top = e.pageY - 10;
var left = e.pageX - 10;
$("#context-menu").css({
display: "block",
top: top,
left: left
});
return false;
}).on("click", function() {
$("context-menu").hide();
});
$("#context-menu a").on("click", function() {
$(this).parent().hide();
});
HTML
<div class="container mt-3">
<div class="row">
<div class="col-sm-12">
<table id="albums_minimal" class=" table table-striped table-bordered" style="width:100%" data-ajax="/api/albums/?format=datatables">
<thead>
<tr>
<th data-data="rank">Rank</th>
<th data-data="artist_name" data-name="artist.name">Artist</th>
<th data-data="name">Album name</th>
</tr>
</thead>
<tbody>
<tr>
<td>83%</td>
<td>Joyce Muniz</td>
<td>Malicia EP</td>
</tr>
<tr>
<td>96%</td>
<td>Kiwi</td>
<td>Rabbit Hole EP</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="context-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
推荐阅读
- python - 在数据框中拆分和排序值
- javascript - 在 JavaScript 中分离 while 循环输出
- postgresql - 使用 PostgreSQL 创建数据透视表
- javascript - 如何在谷歌 AMP 中嵌入 Tawk 聊天脚本
- sql - 用于计算总计而不考虑重复行的 SQL 查询
- java - 通过 Retrofit 中的 Model 类在 GET 请求 URL 中传递 ID
- android - Android Studio 自动完成将对象包装在另一个对象中
- java - 在Java中将字节转换为兆字节变为零
- sql-server - 将 SSAS 数据库从 MSSQL 2005 迁移到 2012
- hibernate - 在grails的单个应用程序中连接不同的数据库(动态)