我想在表格末尾有一个按钮，我可以单击并打开按钮下方的 rowContextMenu。
但我也希望当我右键单击该行的任意位置时它会弹出。
我已经尝试过一些事情
var menuButtonFormatter = (cell: any) => {
var menuBtn = document.createElement('button');
menuBtn.type = 'button';
menuBtn.innerHTML = '<span class="material-icons" style="color: #707070">more_horiz</span>';
menuBtn.classList.add('menu-button');
menuBtn.addEventListener('click', (event) => {
event.stopImmediatePropagation();
const myEvent: any = new Event('row-contextmenu');
myEvent.pageX = event.pageX;
myEvent.pageY = event.pageY;
cell.getRow().getElement().dispatchEvent(myEvent);
});
buttonHolder.appendChild(menuBtn);
return buttonHolder;
}
这是按钮
我的专栏看起来像这样：
{
title: this.$t('actions'),
field: 'actions',
// formatterParams: poParams,
formatter:menuButtonFormatter,
headerSort: false,
width: 110,
frozen: true,
}
我尝试了很多不同的方法，但没有任何效果。
我也尝试过
const myEvent: any = new Event('contextmenu');您可以尝试使用
MouseEventconst tableData = [
{ id: 1, fullName: 'Oli Bob', age: '12', color: 'red' },
{ id: 2, fullName: 'Mary May', age: '1', color: 'blue' },
{ id: 3, fullName: 'Christine Lobowski', age: '42', color: 'green' },
{ id: 4, fullName: 'John Smith', age: '30', color: 'red' },
{ id: 5, fullName: 'Tim Burton', age: '51', color: 'blue' }
]
var menuButtonFormatter = (cell, formatterParams, onRendered) => {
const menuBtn = document.createElement('button')
menuBtn.type = 'button'
menuBtn.innerHTML = '<span class="material-icons" style="color: #707070">more_horiz</span>'
menuBtn.classList.add('menu-button')
menuBtn.addEventListener('click', (event) => {
const myEvent = new MouseEvent('contextmenu', {
bubbles: true,
clientX: event.pageX,
clientY: event.pageY
})
cell.getRow().getElement().dispatchEvent(myEvent)
})
onRendered(() => {
cell.getElement().appendChild(menuBtn)
})
}
const table = new Tabulator('#table', {
data: tableData,
layout: 'fitDataFill',
rowContextMenu: [
{
label: 'Delete Row',
action: (e, row) => {
row.delete()
}
}
],
columns: [
{ title: 'Name', field: 'fullName' },
{ title: 'Age', field: 'age' },
{ title: 'Color', field: 'color' },
{
title: 'Button',
field: 'actions',
formatter: menuButtonFormatter,
headerSort: false,
width: 110,
frozen: true
}
]
})<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="table"></div>
</body>
</html>