[Отредактировано для ясности (надеюсь!)]
Я уже некоторое время использую Tabulator (вот-вот начну переходить на 4.0!), Так что подумайте, что я достаточно хорошо понимаю основыи я большой поклонник!
В этом конкретном случае я использую таблицу для хранения списка ожидания.Пользователю (внутреннему) может потребоваться выполнить одно из нескольких действий в любой заданной строке и нацелить либо на эту строку, либо на данные в строке, как требуется.Учитывая этот сценарий, я ищу сценарий контекстного меню, вызываемого правой кнопкой мыши.
Я могу захватить событие щелчка правой кнопкой мыши с помощью обратного вызова rowContext и извлечь данные (row.getData () и т. Д.)для немедленного действия, например console.log () и т. д.
Конфигурация табулятора:
waitListName = "waitlist" + bayID;
console.log("Creating waitlist:", waitListName);
let column_array = [];
column_array.push({id: 1, title:"Index", field:"index", align:"center", headerSort: false, width:40});
column_array.push({id: 2, title:"Name", field:"name", align:"center", headerSort: false, width:100});
column_array.push({id: 3, title:"Qty", field:"throwers", align:"center", headerSort: false, bottomCalc: "sum" ,width:40});
column_array.push({id: 4, title:"Listed", field:"waitlisted", align:"center", headerSort: false, width:60});
column_array.push({id: 5, title:"Waited", field:"waittime", align:"center", headerSort: false, width:60});
column_array.push({id: 5, title:"ETA", field:"eta", align:"center", headerSort: false, width:60});
// Calculate width of tabulator table
let table_width = 0;
column_array.forEach ( row => {
table_width += row.width;
})
// Define tabulator table config
let tabulator_config = {
layout: "fitData",
responsiveLayout:true,
columns: column_array,
movableRows: true,
rowMoved: rowMovedHandler,
rowContext: waitlistTableContextMenu
}
// Creat new tabulator table div
let $newdiv = $("<div/>")
.attr("id", waitListName)
.addClass("waitlist")
.css({
width: table_width + "px",
})
.appendTo('#waitlist_container');
// create tabulator in new table div
$newdiv.tabulator(tabulator_config)
rowContext Handler
// define context menu for a waitlist table
function waitlistTableContextMenu(e,row) {
let data = row.getData();
console.log("Right click in waitlist!");
//console.log(e);
//console.log(row);
//console.log(data);
e.preventDefault(); // prevent the browsers default context menu form appearing.
}
Я также могу создать и присоединить основное контекстное меню к отдельным строкам таблицы, привязав его к классу .tabulator-row .
Примечание: Iя использую библиотеку jQuery-contextMenu - https://swisnl.github.io/jQuery-contextMenu/demo.html - но исторически я сталкивался с некоторыми из них, в основном они работают аналогичным образом
$.contextMenu({
selector: '.tabulator-row',
build: function($triggerElement, e) {
console.log($triggerElement);
return {
callback: function(key, options) {
var m = "clicked: " + key;
console.log(m);
console.log(options);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
copy: {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: function(){
return 'context-menu-icon context-menu-icon-quit';
}}
}
}
}
});
Все вышеперечисленное работает успешнои я получаю контекстное меню, как и ожидалось, когда я щелкаю правой кнопкой мыши по строке.
Я не могу ссылаться на строку табулятора/ строка данных из обратного вызова контекстного меню после выбора опции.
Может быть, япросто быть плотным?:)
Я использую опцию динамического построения меню (как ни странно, она называется «сборка»), которая захватывает запускающий элемент и позволяет создавать структуру меню во время вызова, однако при обращении к этому элементу яочевидно, получая базовый элемент / структуру таблицы Tabulator rowDiv
jQuery.fn.init [div.tabulator-row.tabulator-selectable.tabulator-row-even]
0: div.tabulator-row.tabulator-selectable.tabulator-row-even.context-menu-active
accessKey: ""
align: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 2}
attributes: NamedNodeMap {0: class, 1: role, 2: style, class: class, role: role, style: style, length: 3}
autocapitalize: ""
baseURI: "http://tetris.local/walkins2.html"
childElementCount: 6
childNodes: NodeList(6) [div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell]
children: HTMLCollection(6) [div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell]
classList: DOMTokenList(4) ["tabulator-row", "tabulator-selectable", "tabulator-row-even", "context-menu-active", value: "tabulator-row tabulator-selectable tabulator-row-even context-menu-active"]
className: "tabulator-row tabulator-selectable tabulator-row-even context-menu-active"
clientHeight: 23
clientLeft: 0
clientTop: 0
clientWidth: 360
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
firstChild: div.tabulator-cell
firstElementChild: div.tabulator-cell
hidden: false
id: ""
innerText: "2Aurelia211:09 am31:02 pm"
.
.
.
И хотя я могу видеть некоторые элементы данных (innerText и т. д.), я не вижу элегантного способа извлечения.
В качестве альтернативы, я мог бы вручную создать что-то сверхосновное на лету внутри функции обратного вызова rowContext в Tabulator, но я ненавижу заново изобретать колесо (не так ли?), Поэтому я надеюсь, что что-то упустилздесь очень просто ....
Любые мысли с благодарностью приветствуются!
Шон