花式树中的不同上下文菜单选项？

Question

我正在使用 fancytree 来显示一个简单的树形视图。树中有两种“节点类型”：组（可以有子节点）和项目（不能有子节点）。我正在尝试使用 contextMenu 扩展来添加功能。我的菜单上有三个选项：添加、编辑和删除。是否可以只显示“组”节点的“添加”菜单选项（它们的key 值以“g”开头）而不是“项目”节点？或者至少为“项目”节点禁用它？？

var treeData = [{title: "All Locations", key: "g0", folder: true, expanded: true, children: [
                  {title: "Location 1", key: "g1", folder: true, children: [
                    {title: "Item 1", key: "81"},
                    {title: "Item 2", key: "82"},
                    {title: "Item 3", key: "83"},
                  ]},
                  {title: "Location 2", key: "g2", folder: true, children: [
                    {title: "Item 4", key: "87"},
                  ]},
                  {title: "Location 3", key: "g3", folder: true, expanded: true, children: [
                    {title: "Item 5", key: "88"},
                    {title: "Item 6", key: "89"},
                  ]}
               ]}
              ];

$(function(){
  // Create the tree inside the <div id="tree"> element.
  $("#tree").fancytree({
    checkbox: true,
    debugLevel: 2,
    selectMode: 3,
    extensions: ['contextMenu'],
    source: treeData,
    contextMenu: {
      menu: {
        "add": { "name": "Add", "icon": "add" },
        "edit": { "name": "Edit", "icon": "edit" },
        "delete": { "name": "Delete", "icon": "delete" },
      },
      actions: function(node, action, options) {
        alert('Selected action "' + action + '" on node ' + node.key);
      }
    }

Answer 1

使用第三部分插件：contextmenu

而不是描述菜单项使用功能：

contextMenu: {
  menu: function(node){
  if (node.folder){                 
    return {
        'create':{ 'name': 'folder option', 'icon': 'paste'}
    };
   } else {
      return {
        'create':{ 'name': 'leaf option', 'icon': 'paste'}
       };
   }
}

Answer 2

您可以禁用它。

这是一种方法，用于禁用根节点的编辑/删除按钮。 （可能不是最好的方法，但可能是你思考的方向......）

为此，您可以在contextMenu 中添加“beforeOpen”属性。这将在您右键单击上下文菜单并在菜单实际出现之前调用。

beforeOpen: function(event, ui) {
    var node = $.ui.fancytree.getNode(ui.target);
    /* Is this the root node */
    if( node.getParentList().length == 0 )
    {
        $('.ui-menu-item').eq(1).prop('disabled', true);  //disable Edit
        $('.ui-menu-item').eq(2).prop('disabled', true);
    }
    else {
        $('.ui-menu-item').eq(1).prop('disabled', false);  //enable Edit
        $('.ui-menu-item').eq(2).prop('disabled', false);
    }
    node.setActive();
}