javascript - Javascript Fancy 树中根节点的完整路径

Question

我正在使用 Fancy 树来填充树，以便理解显示的代码

 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>

现在我希望每当用户检查子节点时父节点的名称，直到根节点也显示为此我已经使用

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

但无法在 echoselection 中获得结果作为子节点，然后直到根节点

实际上我想将选择发送到服务器以便保存它们，因为它们是文件路径。

由于我第一次使用树的数量，所以请多多包涵。如果有任何其他好的选择，请提供。

附言; 我想以目录地址 /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