【发布时间】：2016-07-20 21:30:34
【问题描述】：
在我的项目中，我有基于jstee angular directive 的树。我用帮助 2 api 请求构建了这棵树。此请求为文件夹和端点子节点（过滤器）提供数据。我还创建了自定义上下文菜单，其中包含针对不同类型节点的一些功能。在这个上下文菜单中，我定义了变量check，并在这个变量的帮助下设置了节点操作的限制。上下文菜单的完整代码如下：
$scope.contextMenu = {
"create": {
"label": "Create Folder",
"icon": "ico/folder.png",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference),
id = obj['original']['id'];
var check = obj['original']['folderId'];
if (typeof check == "undefined") {
obj = {
text: prompt("put folder name"),
parent: id
};
eventService.createFolder(obj);
setTimeout(function () {
getTreeData();
$scope.load();
}, 100);
}
else {
alert("This function is not available");
return false
}
// inst.refresh(true)
}
},
"rename": {
"label": "Rename Folder",
"icon": "ico/folder.png",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference),
check = obj['original']['folderId'];
if (typeof check == "undefined") {
var rename = {
id: obj.id,
text: prompt("put your name")
};
eventService.modifyFolder(rename);
inst.rename_node(obj, rename.text);
}
else {
alert("This function is not available");
return false
}
}
},
"delete": {
"label": "Delete Folder",
"icon": "ico/folder.png",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference),
node = inst.get_selected(),
check = obj['original']['folderId'];
if (typeof check == "undefined") {
if (!node.length) {
return false;
}
eventService.deleteFolder(node);
inst.delete_node(node);
}
else {
alert("This function is not available");
return false
}
}
},
"store": {
"label": "Store Filter",
"icon": "ico/file.png",
"action": function (data) {
$scope.saveStateString();
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference),
id = obj['original']['id'],
check = obj['original']['folderId'];
if (typeof check == "undefined") {
obj = {
body: $scope.state,
folderId: id,
text: prompt("put filter name")
};
// console.log(obj.body);
setTimeout(function () {
eventService.storeFilter(obj);
}, 1000);
setTimeout(function () {
getTreeData();
$scope.load();
alert("click to public filters to refresh the tree")
}, 1500)
} else {
alert("This function is not available");
return false
}
}
},
"remove": {
"label": "Remove Filter",
"icon": "ico/file.png",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
node = inst.get_selected(),
obj = inst.get_node(data.reference),
check = obj['original']['folderId'];
if (typeof check == "undefined") {
alert("This function is not available");
return false
} else {
if (!node.length) {
return false;
}
eventService.deleteFilter(node);
inst.delete_node(node);
}
}
}
};
现在我正在尝试按节点类型拆分此上下文菜单，对于每个节点我可以看到不同的上下文菜单，我在这里找到了一些解决方案，它说：
$('#jstree').jstree({
'contextmenu' : {
'items' : customMenu
},
'plugins' : ['contextmenu', 'types'],
'types' : {
'#' : { /* options */ },
'level_1' : { /* options */ },
'level_2' : { /* options */ }
// etc...
}
});
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;
}
我试图在我的应用程序中重复这种方式，但总是看到“未定义”而不是上下文菜单。
有人可以帮我解决我的问题吗？ Plunker 用我的代码
【问题讨论】：
标签： javascript jquery angularjs jstree