Question

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

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

你可以禁用它。

这是一种方法，用于禁用Root节点的Edit / Delete按钮。（可能不是最好的方式，但你可以考虑的方向......）

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

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();
}

fancytree中不同的contextMenu选项？

2 个答案: