jQuery.tree.js是一個流行的JavaScript庫，它允許你快速創建樹形結構。其中的一個很有用的功能是右鍵菜單，我們可以使用它來添加自定義的操作。

$(function(){
// 初始化樹形結構
$('#tree').tree({
data: [
{
text: "節點1",
id: 1,
children: [
{
text: "子節點1",
id: 2
},
{
text: "子節點2",
id: 3
}
]
},
{
text: "節點2",
id: 4
}
]
});
// 添加右鍵菜單
$('#tree').on('tree.contextmenu', function(event) {
event.preventDefault();
// 獲取當前節點
var node = event.node;
// 創建菜單
var menu = [
{
label: '新增子節點',
action: function() {
// 在當前節點下新增一個子節點
$('#tree').tree('appendNode', {text: '新子節點', id: node.id * 10}, node);
}
},
{
label: '編輯節點',
action: function() {
// 編輯當前節點的文本
$('#tree').tree('updateNode', node, '修改后的文本');
}
}
];
// 顯示菜單
$.contextMenu({
selector: '#tree',
build: function() {
return {
callback: function(key, options) {
if (key === 'delete') {
// 刪除當前節點
$('#tree').tree('removeNode', node);
}
},
items: {
'delete': {name: '刪除節點', icon: 'delete'}
}
};
},
position: function(opt, x, y) {
opt.$menu.css({top: y, left: x});
},
events: {
show: function() {
// 禁用右鍵菜單默認行為
return false;
}
}
})
});
});

以上代碼演示了如何在樹形結構上添加右鍵菜單，并實現添加、編輯和刪除節點的功能。要注意的是，在菜單項中添加的action會在點擊菜單時被執行，而callback則是在使用contextMenu構建菜單時執行。