5

コードが表示されていることを理解するために、ファンシーツリーを使用してツリーを作成しています

 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);

しかし、子ノードとしてエコーセレクションで結果を取得できず、ルートノードまで取得できませんでした

実際には、ファイルパスであるため、選択内容をサーバーに送信して保存したいと考えています。

初めて木の人口を使用しているので、親切に我慢してください。他に良いオプションがあれば、親切に提供してください。

PS; ツリー パスをディレクトリ アドレス /abc/acv/ac/xyz.png の形式でサーバーに送信したい 選択したルート ノードに image5 と image_test が表示されていない画像が添付されています

4

1 に答える 1

8

コードを検索して深く調べた後、解決策を見つけました：

 $(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

于 2014-03-24T14:22:19.153 に答える