web-dev-qa-db-ja.com

jsTree-オンデマンドでajax経由でサブノードをロードする

サブノードのオンデマンドロードでjsTreeを動作させようとしています。私のコードはこれです：

 jQuery（ '＃introspection_tree'）。jstree（{
 "json_data"：{
 "ajax"：{
 url： "http：// localhost/introspection/introspection/product "
} 
}、
" plugins "：["テーマ "、" json_data "、" ui "] 
}）;

呼び出しから返されたJSONは

 
 {
 "data"： "キット1"、
 "attr"：{
 "id"： "1" 
}、
 "children"：
 
 {
 "data"： "ハードウェア"、
 "attr"：{ 
 "id"： "2" 
}、
 "children"：
 
 
} 
、
 
 {
 "data"： "ソフトウェア"、
 "attr"：{
 "id"： "3" 
          }、
          "子供達"： 

          ]
        }
      ]
    ]
} 
 .....

各要素には多くの子があり、ツリーは大きくなります。現在、これはツリー全体を一度にロードしているため、時間がかかる場合があります。ユーザーが子ノードを開いたときに、子ノードのオンデマンド読み込みを実装するには何をしなければなりませんか？

前もって感謝します。

ajaxjstree
31
Christian Waidner

Irishkaは私を正しい方向に向けましたが、私の問題を完全には解決しません。私は彼女の答えをいじって、これを思いつきました。 2つの異なるサーバー機能の使用は、明確にするためだけに行われます。最初のものはすべての製品を最上位にリストし、2番目のものは特定のproductidのすべての子をリストします

jQuery("#introspection_tree").jstree({
    "plugins" : ["themes", "json_data", "ui"],
    "json_data" : {
        "ajax" : {
            "type": 'GET',
            "url": function (node) {
                var nodeId = "";
                var url = ""
                if (node == -1)
                {
                    url = "http://localhost/introspection/introspection/product/";
                }
                else
                {
                    nodeId = node.attr('id');
                    url = "http://localhost/introspection/introspection/children/" + nodeId;
                }

                return url;
            },
            "success": function (new_data) {
                return new_data;
            }
        }
    }
});

関数から返されるjsonデータは次のようになります（各ノードでstate = closedに注意してください）：

 
 {
 "data"： "キット1"、
 "attr"：{
 "id"： "1" 
}、
 "state"： "closed" 
}、
 {
 "data"： "KPCM 049"、
 " attr "：{
" id "：" 4 "
}、
" state "：" closed "
}、
 {
 "data"： "Linux BSP"、
 "attr"：{
 "id"： "8" 
}、
 "state"： "閉まっている"
  }

静的データは必要ありません。ツリーは各レベルで完全に動的になりました。

43
Christian Waidner

デフォルトの最初のレベルのノードで表示すると、子はオンデマンドでロードされます。その場合、変更する必要があるのは"state" : "closed"子ノードがオンデマンドでロードされるノードへ。

コードを変更するために、ajax呼び出しでノードのIDを送信したい場合があります

"json_data": {
    //root elements to be displayed by default on the first load
    "data": [
        {
            "data": 'Kit 1',
            "attr": {
                "id": 'kit1'
            },
            "state": "closed"
        },
        {
            "data": 'Another node of level 1',
            "attr": {
                "id": 'kit1'
            },
            "state": "closed"
        }
    ],
    "ajax": {
        url: "http://localhost/introspection/introspection/product",
        data: function (n) {
            return {
                "nodeid": $.trim(n.attr('id'))
            }
        }
    }
}

jsTree ドキュメントから

注：データとajaxの両方が設定されている場合、初期ツリーはデータ文字列からレンダリングされます。 （ロードされた子を持たない）閉じたノードを開くと、AJAXリクエストが行われます。

12
Radek

ページの読み込み時にルート要素をツリーデータとして設定する必要があります。その後、ajaxリクエストでその子を取得できます。

$("#introspection_tree").jstree({
    "plugins": ["themes", "json_data", "ui"],
    "json_data": {
        //root elements
        "data": [{"data": 'Kit 1', "attr": {"id": 'kit1'}} /*, ... */], //the 'id' can not start with a number 
        "ajax": {
            "type": 'POST',
            "data": {"action": 'getChildren'},
            "url": function (node) {
                var nodeId = node.attr('id'); //id="kit1"

                return 'yuorPathTo/GetChildrenScript/' + nodeId;
            },
            "success": function (new_data) {
                //where new_data = node children 
                //e.g.: [{'data':'Hardware','attr':{'id':'child2'}}, {'data':'Software','attr':{'id':'child3'}}]
                return new_data;
            }
        }
    }
});

同様の質問はこちら （古い部分）への私の答えを参照してください

10
Irishka

私はこの問題に何時間も費やしました。最終的に私はそれをそのように得ました：

$("#resourceTree").jstree({
    "types": {
      "default": {
        "icon": "fa fa-folder-open treeFolderIcon",
      }
    },
    "plugins": ["json_data", "types", "wholerow", "search"],
    "core": {
      "multiple": false,
      "data": {
        "url" : function(node){
          var url = "rootTree.json";
          if(node.id === "specialChildSubTree")
            url = "specialChildSubTree.json";
          return url;
        },
        "data" : function(node){
          return {"id" : node.id};
        }
      }
    },
  });

rootTree.json：

[
  {
    "text": "Opened root folder",
    "state": {
      "opened": true
    },
    "children": [
      {
        "id" : "specialChildSubTree",
        "state": "closed",
        "children":true
      }
    ]
  }
]

specialChildSubTree.json：

[
  "Child 1",
  {
    "text": "Child 2",
    "children": [
      "One more"
    ]
  }
]

そのため、Ajaxロードされたサブツリーの親になるノードをIDでマークし、コア構成で監視します。

注：そのノードには「state」：「closed」パラメーターが必要であり、パラメーター「children」：trueが必要です。

バージョン3.3.3でjsTree.jsを使用しています

2
Ruwen