如何在右键单击表格行时显示电子上下文菜单

时间:2016-11-10 10:15:48

标签: javascript html electron

我正在尝试学习Electron并构建一个简单的应用程序。在HTML部分,我有一些行的表 我使用" electron-context-menu"创建了上下文菜单。 NPM包。现在我希望当我右键单击表格的任何一行时,会弹出一些菜单,比如删除行 例如,我有一行如下:



<tr>
  <td id="name-1"></td>
  <td id="prog-1"><progress id='progress-1' max='100' value='0'> </progress></td>
  <td id="size-1"></td>
  <td id="status-1"></td>
  <td style="display:none;" id="path-1"></td>
  <td style="display:none;" id="link-1"></td>
  <td style="display:none;" id="formatid-1"></td>
</tr>
&#13;
&#13;
&#13;

现在,当我右键单击此行时,只会显示删除行菜单,点击该菜单后,我想调用一个函数deleteRow(this)来删除该行。
对于动态添加和删除行,我使用的代码来自:

here is JSFiddle

有任何帮助吗?另外,我怎样才能获得行中元素的id?

2 个答案:

答案 0 :(得分:1)

在回调后添加false参数。

new_row.addEventListener('contextmenu', function(e){
    var t = e.srcElement.id.split('-');
    id = t[1];
    menu.popup(remote.getCurrentWindow());
}, false);

答案 1 :(得分:0)

我找到了自己的答案:

// Menu's here

在我要添加动态行的地方:

const menu = new Menu();
menu.append(new MenuItem({
  label: 'Resume', click(){
    console.log('resume clicked');
  }
}));
menu.append(new MenuItem({type: 'separator'}));
menu.append(new MenuItem({
  label: 'Pause', click(){
    console.log('item 2 clicked');
  }
}));