的Javascript花式樹的根節點

Question

我使用花式樹填充樹，對於理解代碼顯示

var treeData = [{"title":"image_test","folder":true,"children":[{"title":"images5","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images4","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images3","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images2","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images1","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]}]}]; 


    $(function(){ 
    $("#tree3").fancytree({ 
//  extensions: ["select"], 
     checkbox: true, 
     selectMode: 3, 
     source: treeData, 
     select: function(event, 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(", ")); 
     }, 
     dblclick: function(event, data) { 
     data.node.toggleSelected(); 
     }, 
     keydown: function(event, data) { 
     if(event.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-" 
    }); 
    }); 

使用的DIV是tree3。

<div id="tree3"></div> 
      <div>Selected keys: <span id="echoSelection3">-</span></div> 
      <div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div> 
      <div>Selected root nodes: <span id="echoSelectionRoots3">-</span></div></div> 

現在我想，每當用戶檢查childnode父節點的名稱，直到也顯示了這一點，我已經使用

var selRootNodes = data.tree.getSelectedNodes(true); 

，但無法得到結果的根節點在echoselection作爲childnode，然後直到根節點

其實我想發送選擇到服務器，以便它們被保存，因爲它們是文件路徑。

因爲我第一次使用樹人口，所以親切地與我一起。如果還有其他好的選擇，請提供。

P.S;我想在樹形路徑發送到服務器目錄地址/abc/acv/ac/xyz.png形式

Answer 1

搜索和深人地觀察到代碼中，我找到了解決辦法後：

$(function(){ 

    var tree3 = $("#tree3").fancytree({ 
     checkbox: true, 
     selectMode: 3, 
     source: $.ajax({ 
     url: "/getlist", 
     dataType: "json" 
     }), 
     select: function(event, data) { 

     // Get a list of all selected nodes, and convert to a key array: 
     var selKeys = 
      $.map(data.tree.getSelectedNodes(), function(node) { 
       if(node.key != 0){ 
        return node.key; 
       } 
      }); 

     var rootstructures = 
      $.map(selKeys, function(item){ 
       var tempnode = data.tree.getNodeByKey(item); 
       var tempstructure = []; 
       tempstructure.push(data.tree.getNodeByKey(item).title); 
       while(tempnode.getParent().getParent()){ 
        tempstructure.push(tempnode.getParent().title); 
        tempnode = tempnode.getParent(); 
       } 
       tempstructure.reverse(); 
       return tempstructure.join('/'); 
      }); 

     // WRITE DEBUG OUTPUT TO DIVS 

     $("#echoSelectionRoots4").text(rootstructures); 
     $("#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(", ")); 

     // ----------------- 

    }, 
    }); 
}); 

此實現工作，現在選擇直到根節點在echoSelectionRoots4對象上填充的路徑。

示例輸出：/image_test/image5/img_01.png, /image_test/image5/img_02.png etc