为不同的节点类型配置jstree右键单击上下文菜单 [英] Configuring jstree right-click contextmenu for different node types
问题描述
我在网上某个地方看到了一个示例，该示例显示了如何自定义jstree右键单击上下文菜单的外观(使用contextmenu插件).
I've seen an example somewhere online showing how to customise the appearance of jstree's right-click context menu (using contextmenu plugin).
例如，允许我的用户删除文档"而不是文件夹"(通过从文件夹的上下文菜单中隐藏删除"选项).
For example, allow my users to delete "documents" but not "folders" (by hiding the "delete" option from the context menu for folders).
现在我找不到那个例子.谁能指出我正确的方向?官方文档并没有真正的帮助.
Now I can't find that example. Can anyone point me in the right direction? The official documentation didn't really help.
由于我希望默认的上下文菜单仅进行一两个较小的更改，因此，我宁愿不重新创建整个菜单(当然，如果这是唯一的方法，我会这样做).我想做的是这样的:
Since I want the default context menu with only one or two minor changes, I'd prefer to not recreate the whole menu (though of course I will if it's the only way). What I'd like to do is something like this:
"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');
}
}
}
}
但是它不起作用-始终禁用创建项(永远不会显示警报).
but it doesn't work - the create item is just always disabled (the alert never appears).
推荐答案
contextmenu插件已对此提供支持.从您链接到的文档中:
The contextmenu plugin already has support for this. From the documentation you linked to:
items:需要一个对象或一个函数，该函数应返回一个对象.如果使用了函数，它将在树的上下文中触发并接收一个参数-右键单击的节点.
items: Expects an object or a function, which should return an object. If a function is used it fired in the tree's context and receives one argument - the node that was right clicked.
因此，您可以提供以下功能，而不是给contextmenu一个硬编码的对象以供使用.它检查单击名为文件夹"的类的元素，并通过从对象中删除菜单来删除删除"菜单项:
So rather than give contextmenu a hard-coded object to work with, you can supply the following function. It checks the element that was clicked for a class named "folder", and removes the "delete" menu item by deleting it from the object:
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;
}
请注意，以上内容将完全隐藏delete选项，但该插件还允许您通过将_disabled: true添加到相关项目来在禁用其行为的同时显示该项目.在这种情况下，您可以在if语句中使用items.deleteItem._disabled = true.
Note that the above will hide the delete option completely, but the plugin also allows you to show an item while disabling its behaviour, by adding _disabled: true to the relevant item. In this case you can use items.deleteItem._disabled = true within the if statement instead.
应该很明显，但是请记住使用customMenu函数而不是之前的函数初始化插件:
Should be obvious, but remember to initialise the plugin with the customMenu function instead of what you had previously:
$("#tree").jstree({plugins: ["contextmenu"], contextmenu: {items: customMenu}});
// ^
// ___________________________________________________________________|
编辑:如果您不想在每次右键单击时都重新创建菜单，则可以将逻辑放在删除菜单项本身的操作处理程序中.
If you don't want the menu to be recreated on every right-click, you can put the logic in the action handler for the delete menu item itself.
"label": "Delete",
"action": function (obj) {
if ($(this._get_node(obj)).hasClass("folder") return; // cancel action
}
再次在查看jsTree源代码之后，看起来每次都显示上下文菜单时都在重新创建它(请参见show()和parse()函数)，所以我的第一个解决方案没有问题.
Edit again: After looking at the jsTree source code, it looks like the contextmenu is being re-created every time it is shown anyway (see the show() and parse() functions), so I don't see a problem with my first solution.
但是，我确实喜欢您所建议的表示法，并带有一个函数作为_disabled的值.一个潜在的探索途径是用自己的函数包装它们的parse()函数，该函数在disabled: function () {...}处求值该函数并将结果存储在_disabled中，然后再调用原始的parse().
However, I do like the notation you are suggesting, with a function as the value for _disabled. A potential path to explore is to wrap their parse() function with your own one that evaluates the function at disabled: function () {...} and stores the result in _disabled, before calling the original parse().
直接修改其源代码也不难.相关版本1.0-rc1的第2867行是相关的:
It won't be difficult either to modify their source code directly. Line 2867 of version 1.0-rc1 is the relevant one:
str += "<li class='" + (val._class || "") + (val._disabled ? " jstree-contextmenu-disabled " : "") + "'><ins ";
您可以简单地在此行之前添加一行以检查$.isFunction(val._disabled)，如果是，则添加val._disabled = val._disabled().然后将其作为补丁提交给创作者:)
You can simply add a line before this one that checks $.isFunction(val._disabled), and if so, val._disabled = val._disabled(). Then submit it to the creators as a patch :)
这篇关于为不同的节点类型配置jstree右键单击上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
