Tabulator и контекстное меню двойного щелчка правой кнопкой мыши - PullRequest
Новая
       66

Tabulator и контекстное меню двойного щелчка правой кнопкой мыши

0 голосов
/ 20 февраля 2020

Я использую Tabulator 4.5 и написал функцию обратного вызова headerContext для установки и отображения контекстного меню на лету (используя contextMenu. js). Проблема в том, что контекстное меню появляется только в том случае, если дважды щелкнуть заголовок правой кнопкой мыши, позвольте мне объяснить:

  • Загрузка страниц
  • Щелкните правой кнопкой мыши столбец заголовка «Имя»
  • При первом щелчке правой кнопкой мыши мой пользовательский обработчик вызывается правильно (подтверждается выходными сообщениями console.log), но контекстное меню не отображается.
  • Во втором правом окне контекстное меню отображается правильно. Любые последующие щелчки правой кнопкой мыши работают как ожидалось.

Это код JS: 

let tabledata = [
  {"name": "Bob", "email": "bob@somewhere.com"},
  {"name": "Ben", "email": "ben@somewhere.com"},
  {"name": "Ted", "email": "ted@somewhere.com"}                
]


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 встроенную обработку событий, но Я хотел бы оставить Табулятор один, потому что мне нужен доступ к данным, содержащимся в столбцах, где произошел щелчок правой кнопкой мыши.

Я написал пример Codepen, воспроизводящий проблему. https://codepen.io/giplusplus/pen/mdJrjqw

Где я не так делаю?

Спасибо всем!

1 Ответ

0 голосов
/ 10 апреля 2020

Версия 4.6 была выпущена в конце марта 2020 года и теперь содержит встроенные контекстные меню 

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