Tabulator和上下文菜单双击右键问题

Question

我正在使用Tabulator 4.5，并且编写了headerContext回调函数，以便即时设置和显示上下文菜单（使用contextMenu.js）。问题是，仅当我右键单击标题两次时，上下文菜单才会出现，让我解释一下：

• 页面加载
• 右键单击“名称”标题栏
• 在第一个右键单击上，我的自定义处理程序函数已正确调用（由console.log输出消息确认，但没有显示上下文菜单。
• 在右下角，正确显示了上下文菜单。随后的任何右键单击均按预期工作。

这是JS代码：

let tabledata = [
  {"name": "Bob", "email": "[email protected]"},
  {"name": "Ben", "email": "[email protected]"},
  {"name": "Ted", "email": "[email protected]"}                
]


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月底发布，现在包含内置于Context Menus

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");
            }
        }
    ]
});