jQuery FancyTree，點擊展開問題

我正在做FancyTree插件的幫助下的選擇樹，我試圖實現點擊事件，當你點擊選擇框的標題，所有他的子項和在各個層面都得到擴展。jQuery FancyTree，點擊展開問題

首先...讓我告訴你的腳本：

var treeData = [ 
    {title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", 
     children: [ 
      {title: "Sub-item 3.1", 
       children: [ 
        {title: "Sub-item 3.1.1", key: "id3.1.1" }, 
        {title: "Sub-item 3.1.2", key: "id3.1.2" } 
       ] 
      }, 
      {title: "Sub-item 3.2", 
       children: [ 
        {title: "Sub-item 3.2.1", key: "id3.2.1" }, 
        {title: "Sub-item 3.2.2", key: "id3.2.2" } 
       ] 
      } 
     ] 
    }, 
    {title: "item2: selected on init", 
     children: [ 
      {title: "Sub-item 4.2", 
       children: [ 
        {title: "Sub-item 4.2.1", key: "id3.1.1" }, 
        {title: "Sub-item 3.2.2", key: "id3.1.2" } 
       ] 
      }, 
      {title: "Sub-item 3.2", 
       children: [ 
        {title: "Sub-item 3.2.1", key: "id3.2.1" }, 
        {title: "Sub-item 3.2.2", key: "id3.2.2" } 
       ] 
      } 
     ] }, 
]; 

$(function(){ 

      $(".test").fancytree({ 
    //   extensions: ["select"], 
       checkbox: true, 
       selectMode: 3, 
       source: treeData, 
       select: function(e, data) { 
        // Get a list of all selected nodes, and convert to a key array: 
        var selKeys = $.map(data.tree.getSelectedNodes(), function(node){ 
         return node.key; 
        }); 
        $("#echoSelection3").text(selKeys.join(", ")); 

        // Get a list of all selected TOP nodes 
        var selRootNodes = data.tree.getSelectedNodes(true); 
        // ... and convert to a key array: 
        var selRootKeys = $.map(selRootNodes, function(node){ 
         return node.key; 
        }); 
        $("#echoSelectionRootKeys3").text(selRootKeys.join(", ")); 
        //$("#echoSelectionRoots3").text(selRootNodes.join(", ")); 
       }, 
       //this is problematic one 
       click: function(e, data) { 
        data.node.toggleExpanded(); 
       }, 
       keydown: function(e, data) { 
        if(e.which === 32) { 
         data.node.toggleSelected(); 
         return false; 
        } 
       }, 
       // The following options are only required, if we have more than one tree on one page: 
    //    initId: "treeData", 
       cookieId: "fancytree-Cb3", 
       idPrefix: "fancytree-Cb3-" 
      }); 
      $("#btnToggleExpand").click(function(){ 
       $(".test").fancytree("getRootNode").visit(function(node){ 
        node.toggleExpanded(); 
     }); 
     return false; 
    }); 

     });

發行

我試着用這部分代碼這樣做：

click: function(e, data) { 
       data.node.toggleExpanded(); 
      },

但問題在於它擴展了selectbox的子項，我也不想那麼做。如果你展開一個節點，並且你試圖在左邊的箭頭幫助下打開另一個節點，那麼第二個節點會展開並隱藏點擊箭頭，這不是我想要的。

你可以看到編輯在這裏的情況：http://jsfiddle.net/9vAhZ/

所以你說我得到了某種「無路可走」的情況，我需要更聰明的人的幫助，告訴我如何解決這個問題，哪個事件使用，所以它不會與fancytree默認行爲衝突。

歡迎任何幫助或建議。

來源

2013-10-07 dzordz

您檢查，如果點擊的是選擇按鈕

click: function(event, data) { 
    var node = data.node, 
     tt = $.ui.fancytree.getEventTargetType(event.originalEvent); 
    if(tt === "checbox") { 
     ... 
    } 
},

或select事件，而不是click實現這一點。

來源

2013-10-08 15:17:27 mar10

mar10是什麼'select'和'click'之間的區別？選擇只是通過複選框（radiobox），點擊是文本點擊？ – andi

btw如何分離點擊展開元素上的文字？ – andi

拼寫

if(tt = "checkbox"){ 
... 
}

來源

2016-05-19 11:34:40

jQuery FancyTree，點擊展開問題

回答

相關問題