表格和上下文菜单双击问题

Question

我使用的是Tabulator 4.5，我编写了一个headerContext回调函数，以便动态设置和显示上下文菜单(使用contextMenu.js(。问题是，只有当我右键单击标题两次时，上下文菜单才会出现，让我解释一下：

• 页面加载
• 右键单击"名称"标题列
• 在第一次右键单击时，我的自定义处理程序函数被正确调用(由console.log输出消息确认(，但没有显示上下文菜单
• 在第二个右侧，上下文菜单正确显示。以下任何右键单击都可以正常工作

这是JS代码：

let tabledata = [
{"name": "Bob", "email": "[e-mail]"},
{"name": "Ben", "email": "[e-mail]"},
{"name": "Ted", "email": "[e-mail]"}                
]

function customHeaderContext(e, column) {
console.log("Header Context handler triggered!")
e.preventDefault();
let element = column.getElement();
$(element).contextMenu({
selector: '.tabulator-col-content',
build: function($triggerElement, e) {
console.log("Trigger element:", $triggerElement);
return {
callback: function(key, options) {
console.log("Callback called with selection:", key);
console.log("Callback called with options:", options);
},
items: {
"cut": {name: "Cut Option", icon: "cut"},
"copy": {name: "Cut Option", icon: "copy"},
} // end items
}  // end return
} // end build
});  // end contextmenu def
}

var table = new Tabulator("#example-table-1", {
//height:211,
layout:"fitColumns",
data:tabledata,
columns:[
{title:"Name", field:"name", headerContext:customHeaderContext},
{title:"Email", field:"email"},
],
});

我知道我可以使用contextMenu.js嵌入的事件处理，但我想保留Tabulator，因为我需要访问右键单击所在列中包含的数据。

我写了一个Codepen重现这个问题的例子。https://codepen.io/giplusplus/pen/mdJrjqw

我哪里做错了？

谢谢大家！

Answer 1

4.6版于2020年3月底发布，现在包含内置上下文菜单

var table = new Tabulator("#example-table", {
rowContextMenu: [
{
label:"Hide Column",
action:function(e, column){
column.hide();
}
},
{
separator:true,
},
{
disabled:true,
label:"Move Column",
action:function(e, column){
column.move("col");
}
}
]
});