为不同节点类型配置jstree右键单击上下文菜单
我在网上看到过一个例子，展示了如何自定义jstree右键单击上下文菜单的外观(使用上下文菜单插件)。
例如，允许我的用户删除“文档”，但不能删除“文件夹”(通过隐藏文件夹上下文菜单中的“删除”选项)。
现在我找不到这个例子了。有谁能给我指个方向吗？官方的documentation并没有真正起到什么作用。
编辑：
因为我希望默认的上下文菜单只有一到两处细微的变化，所以我不想重新创建整个菜单(当然，如果这是唯一的方法，我会这样做)。我想做的是这样的：
"contextmenu" : {
items: {
"ccp" : false,
"create" : {
// The item label
"label" : "Create",
// The function to execute upon a click
"action": function (obj) { this.create(obj); },
"_disabled": function (obj) {
alert("obj=" + obj);
return "default" != obj.attr('rel');
}
}
}
}但它并不起作用-- create item总是处于禁用状态(该警告从不出现)。
回答 9
Stack Overflow用户
发布于 2011-01-05 10:19:30
contextmenu插件已经对此提供了支持。从您链接的文档中：
items：需要一个object或a function，这应该返回一个object。如果使用了一个函数，它将在树的上下文中触发，并接收一个参数-右键单击的节点。
因此，您可以提供以下函数，而不是为contextmenu提供一个硬编码的对象。它检查为"folder“类单击的元素，并通过从对象中删除"delete”菜单项来删除该菜单项：
function customMenu(node) {
// The default set of all items
var items = {
renameItem: { // The "rename" menu item
label: "Rename",
action: function () {...}
},
deleteItem: { // The "delete" menu item
label: "Delete",
action: function () {...}
}
};
if ($(node).hasClass("folder")) {
// Delete the "delete" menu item
delete items.deleteItem;
}
return items;
}请注意，上面的代码将完全隐藏删除选项，但该插件还允许您通过向相关项目添加_disabled: true，在禁用其行为的同时显示项目。在这种情况下，您可以在if语句中使用items.deleteItem._disabled = true。
这应该是显而易见的，但请记住使用customMenu函数初始化插件，而不是使用之前的函数：
$("#tree").jstree({plugins: ["contextmenu"], contextmenu: {items: customMenu}});
// ^
// ___________________________________________________________________|编辑：如果您不想在每次右键单击时都重新创建菜单，则可以将逻辑放入删除菜单项本身的操作处理程序中。
"label": "Delete",
"action": function (obj) {
if ($(this._get_node(obj)).hasClass("folder") return; // cancel action
}再次编辑：查看jsTree源代码后，似乎每次显示上下文菜单时都会重新创建它(请参阅show()和parse()函数)，因此我认为我的第一个解决方案没有问题。
但是，我确实喜欢您建议的表示法，使用函数作为_disabled的值。一种可以探索的潜在方法是，在调用原始parse()之前，将它们的disabled: function () {...}函数与您自己的函数包装在一起，该函数在_disabled中计算函数的值并将结果存储在parse()中。
直接修改它们的源代码也不难。版本1.0-rc1的第2867行是相关的行：
str += "<li class='" + (val._class || "") + (val._disabled ? " jstree-contextmenu-disabled " : "") + "'><ins ";您可以简单地在这一行之前添加一行来检查$.isFunction(val._disabled)，如果是，则检查val._disabled = val._disabled()。然后将其作为补丁提交给创建者:)
Stack Overflow用户
发布于 2015-02-28 04:48:08
使用不同的节点类型实现：
$('#jstree').jstree({
'contextmenu' : {
'items' : customMenu
},
'plugins' : ['contextmenu', 'types'],
'types' : {
'#' : { /* options */ },
'level_1' : { /* options */ },
'level_2' : { /* options */ }
// etc...
}
});和customMenu函数：
function customMenu(node)
{
var items = {
'item1' : {
'label' : 'item1',
'action' : function () { /* action */ }
},
'item2' : {
'label' : 'item2',
'action' : function () { /* action */ }
}
}
if (node.type === 'level_1') {
delete items.item2;
} else if (node.type === 'level_2') {
delete items.item1;
}
return items;
}Stack Overflow用户
发布于 2011-05-12 02:50:19
来清理一切。
而不是这样：
$("#xxx").jstree({
'plugins' : 'contextmenu',
'contextmenu' : {
'items' : { ... bla bla bla ...}
}
});使用以下命令：
$("#xxx").jstree({
'plugins' : 'contextmenu',
'contextmenu' : {
'items' : customMenu
}
});https://stackoverflow.com/questions/4559543
复制相似问题
腾讯云开发者
