ノード タイプやコンテキスト メニューなどのデモに満足しているので、http://www.jstree.comを使用しようとしています。私の問題は、"json_data": { "ajax": { ... } } を使用して jstree 内からノード データをロードする方法がよくわからないことです。私が読んだすべてのドキュメントでは、親データを手動で定義する必要があり、ajax 呼び出しは子ノードの遅延読み込み専用です。
私のコードは次のとおりです。
$('#file_tree').jstree({
"plugins": ["json_data", "themes", "ui", "crrm", "dnd", "search", "contextmenu"],
"themes": {"theme": "apple"},
"ui": {"select_limit": 1, "selected_parent_close": "deselect", "disable_selecting_children": "true", "initially_select": [0]},
"crrm": {"input_width_limit": "50", "move": {"always_copy": "multitree"}},
"dnd": {"open_timeout": "700"},
"search": {},
"contextmenu": {"select_node": "true"},
"json_data" :
{
"ajax" :
{
"url" : "{{ url('components/tree/findall') }}",
// the `data` function is executed in the instance's scope
// the parameter is the node being loaded
// (may be -1, 0, or undefined when loading the root nodes)
"data" : function (node) {
console.info("Nodes:",node);
return {
"operation" : "get_children",
"id" : node.attr ? node.attr("id").replace("node_","") : 1
};
}
}
}
})
URL 'components/tree/findall' は、次のように、parent_id = NULL のすべてのノードとその中のすべての子を返します (実質的にすべてのノード データを返します)。
[{"id":1,"name":"Static Album 1","type":"folder","children":[{"id":3,"name":"Static Album 1.1","type":"folder","children":[]},{"id":4,"name":"Static Album 1.2","type":"folder","children":[]}]},{"id":2,"name":"Static Album 2","type":"folder","children":[{"id":5,"name":"Static Album 2.1","type":"folder","children":[]},{"id":6,"name":"Static Album 2.2","type":"folder","children":[]}]}]
しかし、ページの読み込み時にルートが呼び出されることはありません (はい、id="file_tree" の div があります)。誰かが jsTree を使用しており、これを機能させる方法についてアドバイスをいただければ、本当に感謝しています。また、jsTree がツリー構造の goto ソリューションではないと思われる場合は、自由に代替案を提案してください。
編集:データを呼び出して取得するルートを取得しました(bowerによってインストールされたjstreeが機能していないことが判明したため、コピーをダウンロードしてライブラリに手動で配置しました)が、まだデータを表示できません。要素の「ノード」
"data": function(node) {....
-1 を返すだけで (私の firebug コンソールには上記のように取得したすべてのデータが表示されますが)、実際にはデータを取得していません。これがどのように機能するかはよくわかりません...