0

ファンシーツリーを使用してシンプルなツリービューを表示しています。ツリーには、グループ (子を持つことができる) とアイテム (子を持つことができない) の 2 つの「ノード タイプ」があります。contextMenu 拡張機能を使用して機能を追加しようとしています。メニューには、追加、編集、削除の 3 つのオプションがあります。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);
      }
    }
4

2 に答える 2

10

サードパーティのプラグインを使用: contextmenu

メニュー項目を記述する代わりに、関数を使用します。

contextMenu: {
  menu: function(node){
  if (node.folder){                 
    return {
        'create':{ 'name': 'folder option', 'icon': 'paste'}
    };
   } else {
      return {
        'create':{ 'name': 'leaf option', 'icon': 'paste'}
       };
   }
}
于 2014-10-29T12:20:47.620 に答える
1

無効にすることができます。

ルート ノードの編集/削除ボタンを無効にする方法の 1 つを次に示します。(最善の方法ではないかもしれませんが、考えられる方向性は...)

このために、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();
}
于 2014-06-10T09:06:26.183 に答える