问

从Javascript Fancy树中的根节点完成路径

盘雪情发布于 2023-01-18 14:56

tree

我正在使用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.


            Selected keys: -
            Selected root keys: -
            Selected root nodes: -

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

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

但是无法将结果作为子节点返回到echoselection,然后直到根节点

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

因为我第一次使用树种,所以请耐心等待我.如果有任何其他好的选择,请提供.

PS; 我想以目录地址/abc/acv/ac/xyz.png的形式将树路径发送到服务器附加了图像,该图像未在所选根节点中显示image5和image_test

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

2023-01-18 14:59 回答

小秋秋

撰写答案